Beiträge von April 2014

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.

Rahmen mit Farbverläufen

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 durch eigene Tests erweitern

Modernizr - Auswahl von EigenschaftenModernizr 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

Menü-Icon („Hamburger“) für viele Nutzer nicht verständlich

menu-icon

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).

Weiterlesen

Mailversand mit XAMPP

Ordner mit ausgehenden Mails bei XAMPPBei 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.

Inzwischen landen per PHP versendete Mails bei der  Nutzung von XAMPP  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!

Menü-Icon mit box-shadow

Menü-Icon - drei Striche

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