Startseite › Weblogs › Stefan Rieger's blog ›

Ade, transparenten PNGs - Hallo, CSS3 Alpha-Farbverlauf

Verfasst von Stefan Rieger am 15. Januar 2012 - 12:42

Immer mehr CSS3 Funktionen werden in den aktuellen Browser unterstütze. Eine sehr interessante Funktion war es schon immer die Hintergrundfarbe eines Elementes zu setzen.

Durch das überlagern mehrere Elemente konnten interessante Effekte erstellt werden. Leider waren dadurch keine Übergänge oder Verläufe zu realisieren. Um dieses Dilemma zu lösen, wurden meist alphatransparente PNG verwendet. Auf diese Hilfskonstruktion kann mit CSS3 verzichtet werden.

Auf der linkten Seite sind je nach Browserunterstützung zwei Elemente zu sehen (Firefox 10). Gegenüber auf der rechten Seite ein Screenshot, der zeigt, wie es aussehen könnte. Der CSS-Code ist nach der aktuellen W3C Definition. Aber es gibt schon einige spezielle Browser Implementierungen (-moz, -webkit ...). Um diesen Effekt heute zu verwenden, sollte man z. B. die Seite http://gradients.glrzad.com besuchen um dort den CSS-Code für alle gängigen Browser zu erzeugen.

Auf den Seiten den W3C erfahren sie mehr zu diesem Effekt. http://www.w3.org/TR/css3-images/#linear-gradients

Klassische Beispiele

<div style="background-color: rgb(100%, 0%, 0%);"></div>
<div style="background-color: rgb(0%, 100%, 0%);"></div>
<div style="background-color: rgb(0%, 0%, 100%);"></div>  
<div style="background-color: rgba(100%, 0%, 0%, 0.4);"></div>
<div style="background-color: rgba(0%, 100%, 0%, 0.4);"></div>
<div style="background-color: rgba(0%, 0%, 100%, 0.4);"></div>

Verlauf Beispiele (Gradients)

<div style="background-image: linear-gradient(top, rgb(100%,100%,100%) 0%, rgb(100%,0%,0%) 100%);"></div>
<div style="background-image: linear-gradient(top, rgb(100%,100%,100%) 0%, rgb(0%,100%,0%) 100%);"></div>
<div style="background-image: linear-gradient(top, rgb(100%,100%,100%) 0%, rgb(0%,0%,100%) 100%);"></div>
<div style="background-image: linear-gradient(top, rgba(100%,100%,100%, 0.0) 0%, rgb(100%,0%,0%) 100%);"></div>
<div style="background-image: linear-gradient(top, rgba(100%,100%,100%, 0.0) 0%, rgb(0%,100%,0%) 100%);"></div>
<div style="background-image: linear-gradient(top, rgba(100%,100%,100%, 0.0) 0%, rgb(0%,0%,100%) 100%);"></div>
<div style="background-image: linear-gradient(top, rgba(100%,0%,0%, 0.0) 0%, rgb(100%,0%,0%) 100%);"></div>
<div style="background-image: linear-gradient(top, rgba(0%,100%,0%, 0.0) 0%, rgb(0%,100%,0%) 100%);"></div>
<div style="background-image: linear-gradient(top, rgba(0%,0%,100%, 0.0) 0%, rgb(0%,0%,100%) 100%);"></div>