Hintergrund-Muster mit CSS3

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!