Ich freue mich immer, wenn es über CSS3 neue Lösungen für alte Probleme gibt. Die vertikale Zentrierung von Elementen unbekannter Höhe ist so eines. Im Beitrag zeige ich 4 Lösungen – drei setzen auf CSS3, eine auf CSS 2.1. Das Ergebnis dieser vier Lösungen ist immer dasselbe: ein Element unbestimmter Höhe wird in der Mitte der Webseite angezeigt. Die Techniken sind unterschiedlich …
Wenn man Textinhalte mit transform dreht, führt das in manchen Browsern wie dem Firefox zu einer unschönen Textdarstellung. Zoltan Dulac, bekannt etwa von seinem Transform Translator, der CSS3-Transformationen in Filterangaben für Uralt-IEs umrechnet, hat eine schöne und – das ist besonders schön – sehr einfache Lösung für das Problem der unschönen Schrift (http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/). Es genügt, dem Element zusätzlich einen Tick Perspektive zu geben.
Auch wenn heute kaum noch jemand Tabellen zu Layoutzwecken einsetzt, werden doch noch erstaunlich häufig Tabellen zur Anordnung von Formularelementen benutzt – dabei macht man das besser mit CSS. Die Anordnung einer Beschriftung oberhalb des Formularfelds ist ganz einfach realisiert, für die zweispaltige Darstellung gibt es unterschiedliche Möglichkeiten – eine praktische besteht im Einsatz von display: inline-block.
Im Video zeige ich ein Formular, das dank display: inline-block bei großen Bildschirmen zweispaltig und bei kleinen Viewports mit display: block einspaltig ist.
Das Video ist ein Ausschnitt aus meinem Videotraining für video2brain CSS-Layouts für Fortgeschrittene.
“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. Es ist ein Ausschnitt aus meinem Videotraining CSS-Layouts für Fortgeschrittene, das im Mai 2014 bei Video2brain herausgekommen ist.
Gerade ist mein neues gut zweistündiges Videotraining bei video2brain/LinkedIn Learning “CSS-Layouts für Fortgeschrittene” erschienen. Es behandelt weiterführende CSS-Layouttechniken, die über die Anordnung mit float und position hinausgehen: Mit dabei zwei Techniken aus CSS 2.1: Layouts mit display: inline-block oder display: table, und zwei Techniken aus CSS3: das Multicolumn-Layout-Modul und der attraktive Alleskönner Flexbox.
CSS-Layouts für Fortgeschrittene
CSS-Tabellen, Multicolumn-Layout, Flexbox
Laufzeit: 2 Std. 13 min
Neben den klassischen Farbverläufen mit linear-gradient() und radial-gradient() gibt es auch mit CSS3 die etwas weniger häufig eingesetzten sich wiederholende Farbverläufe. Dafür existieren die Funktionen repeating-linear-gradient() für wiederholende lineare Farbverläufe und repeating-radial-gradient() für sich wiederholende radiale Farbverläufe.
Im Firefox ab 29 funktionieren auch Farbverläufe bei Rahmenbildern. Das habe ich zum Anlass genommen, mit diesen Eigenschaften einmal herumzuspielen.
Das Prinzip ist folgendermaßen:
Hinter der CSS3-Eigenschaft border-image notiert man linear-gradient() für einen linearen Farbverlauf oder radial-gradient() für einen radialen. Außerdem bestimmt man, wie der Farbverlauf aufgeteilt werden soll und gibt ein Schlüsselwort wie round, stretch oder repeat an:
border-image: linear-gradient(white, #4972A4) 10% round;
Ein paar Beispiele zum Anschauen und Experimentieren gibt es hier – sie funktionieren im Firefox 29, im Chrome und auch im Internet Explorer 11.
Noch ein wichtiger Hinweis:
Damit die Anzeige des Rahmens klappt, muss man einen border-style definieren – macht man das nicht, funktioniert der Rahmen nicht.
Modernizr ist das Tool der Wahl, um zu überprüfen, ob ein Browser ein bestimmtes Features versteht oder nicht. Je nach Ergebnis ergänzt Modernizr dann passende Klassen beim HTML-Start-Tag. Darauf basierend lassen sich besondere Formatierungen für beide Fälle definieren: Für den Fall, dass das Feature unterstützt wird, oder eben, wenn es nicht unterstützt wird.
Beispielsweise erhält durch folgende Angabe das Element mit Klasse .eins, sofern box-shadow nicht unterstützt wird, einen Rahmen:
.no-boxshadow .eins {
border: 2px solid blue;
}
Wenn hingegen box-shadow unterstützt wird, wird der Rahmen ausgeblendet und stattdessen ein Schatten angezeigt:
.boxshadow .eins {
border: none;
box-shadow: 0px 0px 5px blue;
}
Auf welche Eigenschaften überprüft werden soll, kann man auf der Download-Seite von Modernizr selbst bestimmen. Falls einmal die gewünschte CSS3-Eigenschaft nicht dabei ist, lässt sich Modernizr einfach durch eigene Tests erweitern. Weiterlesen
In einem Posting hatte ich vorgestellt, wie man das “Standard-Menü-Icon” – drei horizontale Striche – über box-shadow realisiert. In einem Kommentar bei Google Plus hat mich Bernd Lindemann darauf hingewiesen, dass das Standard-Menü-Icon (im englischen Sprachraum auch “Hamburger” genannt) keineswegs von allen Benutzern verstanden wird. Das zeigen die Untersuchungen von Luke Wroblewski und anderen (hier und hier).
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.
Unter Windows kann man aber sehr einfach die Funktionalität MailtoDisk aktivieren. Dafür muss man die Datei php.ini bearbeiten. Diese erreicht man beispielsweise über das XAMPP-Kontrollzentrum und hinter “Apache” auf den Konfig-Button klicken und “PHP (php.ini)” wählen.
Hier [mail function] suchen. Die folgende Option muss dann aktiv sein (kein ; davor):
sendmail_path = C:\xampp\mailtodisk\mailtodisk.exe
Die Pfadangabe kann je nach XAMPP-Installation auch anders aussehen.
Damit die Änderungen wirksam werden, muss der Server heruntergefahren und wieder neu gestartet werden. Das geht wieder gut über das Kontrollzentrum.
Die danach per PHP versendete Mails landen dann automatisch in dem Unterordner xampp/mailoutput. Dort sind sie einzeln aufgeführt, im Dateinamen befindet sich das Datum, in der Datei kann man sich ansehen, wie die Mail aussehen würde … äußerst praktisch!