CSS3 bietet Webentwicklern viele neue Möglichkeiten. Die Farbverläufe (linear-gradients) von CSS3 können auch dazu genutzt werden, um coole Muster zu erzeugen. Neben einfachen Streifen-Effekten sind aber auch Pfeil-, Zick-Zack- oder Würfelmuster möglich. Zunächst aber erst ein einfaches Beispiel:
<style>
.element {
background: -moz-linear-gradient(0, rgba(255, 153, 0,.75) 50%, transparent 50%),
-moz-linear-gradient(rgba(255, 153, 0,.25) 50%, transparent 50%);
-o-linear-gradient(0, rgba(255, 153, 0,.75) 50%, transparent 50%),
-o-linear-gradient(rgba(255, 153, 0,.25) 50%, transparent 50%);
-webkit-linear-gradient(0, rgba(255, 153, 0,.75) 50%, transparent 50%),
-webkit-linear-gradient(rgba(255, 153, 0,.25) 50%, transparent 50%);
linear-gradient(0, rgba(255, 153, 0,.75) 50%, transparent 50%),
linear-gradient(rgba(255, 153, 0,.25) 50%, transparent 50%);
background-size: 50px 50px;
}
</style>Bei Hintergrund-Mustern wird mit zwei oder mehreren Hintergründen gearbeitet. Der Erste in diesem Beispiel ist die dunklere Farbe. Er läuft von links nach rechts und hat jeweils 50% Farbe und 50% Transparenz. Der zweite Hintergrund läuft von oben nach unten und hat ebenfalls jeweils 50% Farbe und 50% Transparenz pro Kachel. Durch das übereinanderlegen der beiden entsteht das Muster.
Auf der Webseite CSS3 Patterns Gallery finden sich sehr viele weitere coole Beispiele, die zeigen was mit linear-gradient noch möglich ist. Viel Spaß beim Stöbern!