
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.
Genau denselben Effekt erreicht man auch über box-shadow
. Für das Beispiel muss man die weiße Farbe (die im Farbverlauf zuerst angegeben ist) als Hintergrundfarbe definieren. Auf diese Hintergrundfarbe setzt man den dunklen Schatten (die zweite Farbe des Farbverlaufs), der um die Hälfte der Höhe des Elements von oben verschoben ist und keine Verschwommenheit aufweist. Allerdings kann man an dieser Stelle nicht mit Prozentwerten arbeiten. Die von mir eingesetzten 100px gehen also von einem 200px hohen Element aus.
background-color: #040707 ;
-webkit-box-shadow: 0px 100px #fff inset;
box-shadow: 0px 100px #fff inset;
Das Ergebnis ist exakt dasselbe wie oben. Allerdings zeigt sich ein Unterschied, wenn man Schatten und Farbverlauf einmal nicht auf ein Rechteck, sondern auf ein abgerundetes Element anwendet: Dann ist die durch den Farbverlauf erzeugte Linie weiterhin gerade, die durch den Schatten erzeugte Linie folgt hingegen der Abrundung des Elements.

Beispiel zu linear-gradient() und box-shadow mit harten Übergängen zum Austesten bei jsFiddle
Wofür man das braucht? Beispielsweise bei einem Button: Hier kann man einen Button mit abgerundeten Ecken dank linear-gradient()
zweiteilen – und box-shadow
sorgt für den unteren Rand.
Listing zum Button mit linear-gradient() und box-shadow bei jsFiddle
Das Beispiel stammt übrigens aus meinem Buch CSS3: Die neuen Features für fortgeschrittene Webdesigner und wird im Abschnitt über box-shadow
, den es zum kostenlosen Probelesen gibt, genauer beschrieben.
ich wollte gerne als Hintergrund von links nach rechts drei farben mit scharfem Übergang (italienische Fahne) bastellt und hab alles probiert,
Ged nicht gibst schon:-( oder doch nicht.
Für ein Tip wäre ich sehr dankbar
LG Mark
Hallo Mark, hast du mal das hier http://codepen.io/esironal/pen/Csrdy angeschaut? Da ist zumindest auch eine italienische Flagge dabei 🙂