Archiv

background-blend-mode: Hintergründe mischen (CSS3)

will it blend?

Ein schönes neues CSS3-Feature sind die Blendmodi oder Mischmodi. Damit sind Effekte ermöglicht, die man sonst nur von Bildbearbeitungssoftware kennt. In der entsprechenden Spezifikation Compositing und Blending finden sich drei neue CSS-Eigenschaften:

  • mix-blend-mode
  • isolation
  • background-blend-mode

Sehen wir uns im ersten Teil einer kleinen Artikelserie background-blend-mode an.  Im zweiten Teil der Serie geht es dann um mix-blend-mode. Weiterlesen

CSS3: Harte Übergänge bei box-shadow und linear-gradient()

box-shadow und linear-gradient für harte Übergänge

Klassischerweise verwendet man die CSS-Farbverläufe genauso wie die CSS3-Boxschatten, um sanfte Übergänge oder verschwommene Schatten zu realisieren. Man kann sie aber auch zur Erzeugung von harten Übergängen verwenden.
Für Farbverläufe gelingt das, indem man bestimmt, dass eine Farbe bis zu einer Stelle reicht und dann genau an derselben Stelle eine andere Farbe anfängt.

background: linear-gradient(#fff 50%, #040707 50%);

Im echten Einsatz sollten Sie zuerst eine Fallbackfarbe angeben und dann das zusätzlich mit -webkit- doppeln:

background: #040707;
background: -webkit-linear-gradient(#fff 50%, #040707 50%);
background: linear-gradient(#fff 50%, #040707 50%);

Das erzeugt eine gerade Linie, oberhalb der die erste Farbe steht, unterhalb die zweite Farbe.

Weiterlesen

Unschöner Text bei CSS3-Transformationen

Textdarstellung bei Transformationen - oben unschön, unten verbessert

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.

Weiterlesen

Videotraining: CSS-Layouts für Fortgeschrittene

CSS-Layouts für Fortgeschrittene

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

Weiterlesen

CSS3: Sich wiederholende Farbverläufe

sich wiederholende Farbverläufe - radial und linear

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.

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.

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

Einstieg in LESS & Sass

LESS & Sass - VideotrainingZum modernen Workflow gehören die CSS-Präprozessoren dazu: Sie erlauben es, Stylesheets effektiver und schneller zu schreiben. Auch Änderungen lassen sich bei Bedarf leichter durchführen. Einen Einstieg in die Funktionsweise der beiden großen CSS-Präprozessoren LESS & Sass bietet mein Videotraining „LESS & Sass – Crashkurs“ bei Video2brain.

Wie viele Präfixe braucht man heute noch?

Bei der Arbeit an meinem CSS3-Buch musste ich mich auch entscheiden, wie viele Präfixe ich bei den Beispielen einsetzen sollte, d.h. ob und wann bei einer der CSS3-Eigenschaften -moz-, -webkit- oder auch -ms- und -o- notwendig sind.

Das Ergebnis vorweg: Man braucht wesentlich weniger als oft angenommen wird. Weiterlesen