In früheren Blogposts habe ich Euch schon ein paar Beispiele gezeigt wie man durch CSS3 einfache Grafiken ersetzen kann. Ein sehr beliebtes Beispiel hier für sind die Dreiecke gewesen. Heute möchte ich euch ein weiteres grafisches Element zeigen das man als Frontend-Developer einfach mit CSS3 zeichnen kann, anstatt eine Grafik zu verwenden. Grafiken einzusparen heißt einfach gesagt einen Zugriff auf den Webserver zu sparen und damit etwas für eine gute Performance zu tun. Nun aber zu dem Beispiel.
Zunächst wird ein Container-Element benötigt, das wir stylen wollen.
<div class="element"></div>
Diesem Element geben wir eine Größenangabe sowie als Hintergrundfarbe eine der Farben die wir für die Zack-Zack Linie verwenden wollen. Dazu wird es relativ positioniert.
.element {
position: relative;
height: 100px;
width: 200px;
background: #46392C;
}Dann benutzen wir das Pseudo-Element :before um die Zacken über den Hintergrund zu legen. Hier nutzen wir die CSS3-Eigenschaft linear-gradient und legen zwei Hintergründe übereinander um das Muster zu erzeugen. Der Style hier sieht dann folgendermaßen aus:
.element:before {
position: absolute;
top: left;
right: 0px;
left: 0px;
bottom: 0px;
height: 30px;
background-size: 24px 48px;
background-repeat: repeat-x;
background-image:
linear-gradient(45deg, transparent 34%, #F69C00 34%, #F69C00 66%, transparent 66%),
linear-gradient(315deg, transparent 34%, #F69C00 34%, #F69C00 66%, transparent 66%);
content: "";
}Bei den Quelltexten habe ich der Einfachheit halber auf Browser-Prefixe verzichtet. Das Beispiel zum Anschauen ist bei jsfiddle verfügbar. Viel Spaß damit.