Florence Maurice

Webthemen

Sticky Footer mit variabler Höhe

"Sticky Footer" nennt man eine Fußzeile, die sich immer unten befindet - auch wenn es nur wenig Inhalt gibt. Zur Realisierung eines Sticky Footer gibt es mehrere Lösungen, allerdings verlangen viele Ansätze, dass die Höhe des Fußbereichs bekannt ist. Bei responsiven Webseiten ist das allerdings oft nicht der Fall: Hier kann es ja leicht sein, dass der Fußbereich bei kleinen Viewports höher wird als bei großen Viewports.

Eine Lösung dieser Herausforderung geht über die Verwendung von display: table. Wie das genau funktioniert, zeige ich in folgendem Video.

Weiterlesen ...

CSS3: Sich wiederholende Farbverläufe

Neben den klassischen Farbverläufen gibt es auch die wiederholenden Farbverläufe.

Mit linear-gradient() und radial-gradient() erzeugt man einfache Farbverläufe . Über die Funktionen repeating-linear-gradient() kann man hingegen wiederholende lineare Farbverläufe und mit repeating-radial-gradient() wiederholende radiale Farbverläufe definieren.

Weiterlesen ...

CSS3: Farbverläufe bei Rahmenbildern

Im Firefox ab 29 funktionieren auch Farbverläufe bei Rahmenbildern. Das habe ich zum Anlass genommen, mit diesen Eigenschaften einmal herumzuspielen.

Weiterlesen ...

Mailversand mit XAMPP

Ordner mit ausgehenden Mails bei XAMPP

Bei vielen PHP-Anwendungen muss man Mails versenden. Früher war das mühsam, wenn man lokal mit XAMPP entwickelt hat: Denn dort ging der Mailversand nicht so ohne Weiteres.

Weiterlesen ...

Menü-Icon mit box-shadow

Inzwischen haben sich drei horizontale Striche als normales Icon für Menüs etabliert. Es gibt unterschiedliche Möglichkeiten, dieses Icon zu generieren, ohne auf ein Bild zurückzugreifen. Beim schönen Framework Foundation von Zurb werden die drei horizontalen Striche über die Eigenschaft `box-shadow` erzeugt, was ich ganz raffiniert fand, als ich es entdeckte.

Weiterlesen ...

padding bei table-header-group und table-footer-group

Mit `display: table` und Konsorten kann man bei bis zu vier Elementen die Reihenfolge der Darstellung auf dem Bildschirm beeinflussen. Nehmen wir einmal folgende Situation: Wir haben vier Elemente, die bei großen Bildschirmen nebeneinander dargestellt werden sollen und bei kleinen Bildschirmen untereinander.

Weiterlesen ...

Kein Abstand vor den Klammern bei Funktionen in CSS

Es gibt sehr viele Funktionen in CSS, die durch runde Klammern gekennzeichnet sind. Ein Beispiel ist `url()` zur Einbindung eines Hintergrundbildes:

background-image: url(pfad/zum/bild.png);

Weiterlesen ...