Heute stelle ich euch einen sehr simplen aber dafür sehr schönen Effekt vor, der jeden Frontend Entwickler die Augen glänzen lässt. Dafür benötigen wir nur zwei der neuen CSS3 Regeln - Gradient & RGBA.
Für sich alleine sind diese zwei Effekte schon sehr mächtig, aber zusammen ergeben sie einen besonders schönen Effekt und auch der Browser Support sicht nicht schlecht aus.
Browser Support
- Gradient:
- IE 10
- Firefox 3.6
- Chrome 10.0
- Safari 5.1
- Opera 11.6
- RGBA:
- IE 9
- Firefox 3.0
- Chrome 4.0
- Safari 3.1
- Opera 10.0
Früher musste man aufwendige Grafiken mit Verläufen und Transparenzen erstellen und immer auf das jeweilige Szenario anpassen. CSS3 schafft Abhilfe. Nun aber zu einem Beispiel.
Transparenten Verlauf
Da die CSS3 Regeln noch kein fester Standard ist, brauchen wir noch die Browser-Prefixe als Fallback.
.box {
background: #EBEBEB; /* Als Fallback für alte Browser */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(253, 253, 253, 0.8), to(rgba(215, 215, 215, 0.8))); /* Chrome, Safari */
background: -moz-linear-gradient(top, rgba(253, 253, 253, 0.8), rgba(215, 215, 215, 0.8)); /* Firefox */
background: linear-gradient(top, rgba(253, 253, 253, 0.8), rgba(215, 215, 215, 0.8)); /* CSS3 */
}Statt einen Hex Farbwert anzugeben, kann man dank CSS3 nun auch die CSS3 Farben verwenden.
Manche werden jetzt denken - es gibt doch auch eine neue CSS3 Regel namens opacity, die regelt doch die Transparenz. An sich ist die Aussage auch nicht falsch. Verwendet man opacity fällt einem schnell auf, dass alles was sich in dem Container befindet transparent wird. Dieser Effekt tritt mit der Verwendung von RGBA nicht auf.
Viel Spaß beim 'verlaufen' und 'transparentieren' :)