CSS3 Pattern mit Linear-Gradient - Tag 14 im CSS3 Adventskalender 2011

CSS3 Pattern mit Linear- GradientDer Einsatz von Background-Pattern ist kein neuer Ansatz im Webdesign und daher verwundert es nicht das viele Webseitenbetreiber die Möglichkeit, eine große Fläche einer Webseite mit einer kleinen Grafik auszustatten die sich beliebig oft in x- und y-Richtung wiederholt, nutzen. Durch diesen Wiederholungseffekt (Background-Pattern), entsteht eine Art Muster das im heutigen 14. Türchen des CSS3-Adventskalenders ausschliesslich auf Basis von CSS3, genauer gesagt mit der Farbverlaufseigenschaft linear-gradient, vorgestellt wird. Dank dieser CSS3 Eigenschaft für Farbverläufe mit den Ausrichtungen linear und radial, besitzen Webdesigner endlich die Möglichkeit, Farbverläufe mittels CSS umsetzen zu können und endlich auf Hintergrundgrafiken hierfär verzichten zu können. Vorteil ist neben der möglichen Reduzierung von HTTP-Requests auch der flexible Einsatz solcher, ohne die Performance großartig zu beeinflussen. Aber seht selbst.

Modernes Webdesign mit CSS - Das neue CSS3 Buch!

Für dieses CSS3 Beispiel verwenden wir an dieser Stelle eine exemplarischen Klasse css3pattern. Dieser werden im weiteren verlauf dieses CSS3 Tutorials alle Eigenschaften und Werte zur Verdeutlichung dieser Eigenschaft zugewiesen.

CSS3 Pattern mit linear-gradient
.css3pattern {
    background-image:
        linear-gradient(0, rgba(0, 100, 200,.5) 100%, transparent 100%);
    background-size:50px 50px;
}

Als erstes wird dem Element welchem ihr CSS3 Pattern als gestalterisches Mittel zukommen lassen wollt, ein halbtransparenter hellblauer Hintergrund (0, 100, 200, .5) zugewiesen, der sich noch durchgehend über die volle Breite des Bereiches ausdehnt.

CSS3 Pattern - ein FarbverlaufEin "nicht sichtbarer Farbverlauf" für den Hintergrund eines Elementes

Da von einer Wiederholung des Gestaltungselementes im Hintergrund mit den Ausmaßen 50x50px noch nicht viel zu sehen ist, wird dies im folgenden Schritt deutlich gemacht. Nun wird der Bereich in dem sich die Eigenschaft linear-gradient ausdehnen kann ab 50% der Breite möglich.

CSS3 Pattern mit linear-gradient
.css3pattern {
    background-image:
        linear-gradient(0, rgba(0, 100, 200,.5) 50%, transparent 100%);
    background-size:50px 50px;
}

Das heißt, die ersten 25px besitzen eine "flächendeckende Hintergrundfarbe", während die zweite Hälfte des 50x50px großen Elmentes einen Farbverlauf vom halbtransprenten Blau hin zu weiß zugewiesen bekommt. Zum Besseren Verständnis des Merkmals eines "Haltepunktes" innerhalb eines Farbverlaufes, empfehle ich Euch den Artikel detaillierter Farbverlauf des letztjährigen CSS-Adventskalenders.

CSS3 Pattern - ein FarbverlaufEin Farbverlauf für den Hintergrund eines Elementes, ab 50% der 50px

Der Farbverlauf im CSS3 Pattern sieht allerdings nicht sonderlich ansehnlich aus, daher wird der Farbverlauf abrupt beendet, so dass wie in der folgenden Abbildung ein alternierender Farbwechsel von hellblau und weiß sichtbar wird.

CSS3 Pattern mit linear-gradient
.css3pattern {
    background-image:
        linear-gradient(0, rgba(0, 100, 200,.5) 50%, transparent 50%);
    background-size:50px 50px;
}

Möglich wird dies durch den Wechsel des hier letzten Wertes von 100% auf 50% Alle anderen Werte dieses lienaren Farbverlaufes bleiben unverändert.

CSS3 Pattern - ein FarbverlaufEin Farbverlauf für den Hintergrund eines Elementes, mit abrupten Farbwechsel bei 50% der 50px

Um nun bspw. ein Karo-Muster erzeugen zu können, bedarf es nun lediglich eines weiteren linearen Farbverlaufes. Dieser erstreckt sich dann allerdings nicht mehr von links nach rechts, sondern von oben nach unten und wird vom ersten Farbverlauf, lediglich durch ein Komma getrennt.

CSS3 Pattern mit linear-gradient
.css3pattern {
    background-image:
        linear-gradient(0, rgba(0, 100, 200,.5) 50%, transparent 50%),
        linear-gradient(rgba(0, 100, 200,.5) 50%, transparent 50%);
    background-size:50px 50px;
}

Die Eigenschaften dieses Farbverlaufes sind, bis auf die dem Farbwert vorangestellte "0", identisch mit der vorangegangenen Zeile CSS. Aufgrund der Halbtransparenz und den "Schnittpunkten" dieser beiden Farbverläufe, reduziert sich Transparenz an diesen Bereichen und wirkt dadurch dunkler.

CSS3 Pattern - zwei FarbverläufeZwei Farbverläufe für den Hintergrund eines Elementes mit identischen Transparenzen

Wer keine Gleichmäßigkeit der Farbbereiche innerhalb dieses CSS3 Pattern Elementes haben möchte, kann mit wie im folgenden Beispiel auch die Transparenzen dieser verändern (im Bsp. von .5 auf .75 bzw. von .5 auf .25).

CSS3 Pattern mit linear-gradient
.css3pattern {
    background-image:
        linear-gradient(0, rgba(0, 100, 200,.75) 50%, transparent 50%),
        linear-gradient(rgba(0, 100, 200,.25) 50%, transparent 50%);
    background-size:50px 50px;
}

Die Veränderung dieser Farbwerte ist in der folgenden Abbildung hoffentlich recht deutlich. Auf dieses Weise besitzt man eien gute Möglichkeit diesen CSS3 Pattern Ansatz farblich dezenter oder mit voller "Farbktraft" anzubieten.

CSS3 Pattern - zwei FarbverläufeZwei Farbverläufe für den Hintergrund eines Elementes mit unterschiedlichen Transparenzen

Wie bereits im vorangegangenen Schritt gelernt, kann man durch hinzufügen eines weiteren Farbverlaufes, dass CSS3 Pattern "gestalterisch ausbauen". Und um diesen Effekt noch ein wenig zu verstärken anbei noch ein kleines Beispiel dafür was mit relativ wenig aufwand erreichen kann. Ausschlaggebend hierfür ist neben dem Farbwert und der Transparenz der für den Farbverlauf verwendet wird, die Position aber der dieser stattfinden soll (Prozentwert hinter der schliessenden Klammer rgba-Eigenschaft).

CSS3 Pattern mit linear-gradient
.css3pattern {
    background-image:
        linear-gradient(0, rgba(0, 100, 200, .5) 25%, transparent 25%),
        linear-gradient(rgba(0, 100, 200, .5) 25%, transparent 25%),
        linear-gradient(0, rgba(255, 255, 255, .5) 28%, transparent 25%),
        linear-gradient(rgba(255, 255, 255, .5) 28%, transparent 25%),
        linear-gradient(0, rgba(0, 100, 200, .5) 50%, transparent 25%),
        linear-gradient(rgba(0, 100, 200, .5) 50%, transparent 25%),
        linear-gradient(0, rgba(255, 255, 255, .5) 80%, transparent 25%),
        linear-gradient(rgba(255, 255, 255, .5) 80%, transparent 25%),
        linear-gradient(0, rgba(0, 100, 200, .5) 81%, transparent 25%),
        linear-gradient(rgba(0, 100, 200, .5) 81%, transparent 25%),
        linear-gradient(0, rgba(255, 255, 255, .5) 95%, transparent 25%),
        linear-gradient(rgba(255, 255, 255, .5) 95%, transparent 25%);
    background-size:50px 50px;
}

Mittels dieser zusätzlichen Farbverläufe kann man, wenn man verschiedene Farbwerte verwendet, sehr sehenswerte CSS3 Patterns erstellen die auf den ersten Blick nicht unbedingt als solche zu erkennen sind.

CSS3 Pattern - mehrere FarbverläufeMehrere Farbverläufe für den Hintergrund eines Elementes mit identischen Transparenzen

Da sich die Schreibweisen in für alle Browser(versionen) mit Ihren immer noch notwendigen Präfixen vereinheitlicht und auch die Unterstützung der Browser für diese Eigenschaft verbessert haben, wurde in diesem CSS3 Artikel auf die Schreibweise ohne Präfix zurückgegriffen, um Einsteiger in die Thematik nicht zusätzlich zu verunsichern ;o) Gleiches gilt im übrigen auf für die Eigenschaft background-size.

View CSS3 Pattern Demo

Auf der Beispielseite zu CSS3 Pattern sind zudem verschiedene Einstellmöglichkeiten für eine mögliche Modifizierung der Farbverläufe umgesetzt, so dass man anhand dieser das Verhalten von linearen Farbverläufen gut verständlich nachvollziehen kann.

CSS3 Pattern (CSS3 Linear Gradient) - Browser-Support

Unabhängig von den Möglichkeiten die sich mit diesen CSS3 Eigenschaften rund um Farbverläufe ergeben, ist wie die folgende Abbildung zeigt, die Browser-Unterstützung auch dieser CSS3 Eigenschaft mittlerweile sehr beachtlich. So können dies der Firefox 3.6 , Chrome, Safari 5.1, Opera 11.10 und der Internet Explorer ab Version 10.

CSS3 Pattern - Browser-SupportBrowserunterstützung der CSS3 Eigenschaft Linear-Gradient für CSS3 Pattern

Wer von Euch also in dem Besitz einer aktuellen Version der relevanten Browser ist, kann die Demo-Version dieses CSS3 Tutorials, mit Ausnahme des Internet Explorers, auch im Browser nachvollziehen. Wie bei den vorangegangenen Türchen dieses CSS3-Adventskalenders wird auch hier offensichtlich, dass sich bei der Browser-Entwicklung im Vergleich zum letzten Jahr bereits einiges getan hat und die Unterstützung dieser CSS3 Eigenschaften bereits eine sehr gute Verbreitung besitzen. In diesem Sinne, weiterhin viel Spaß mit CSS3!

  1. Sebastian
    14 Dez 2011, 08:41

    Was man alles mit dieser Technik machen kann sieht man unter http://lea.verou.me/css3patterns/. Lea Verou hat da einige Beispiele zusammengetragen. Viel Spass damit.


  2. Susanne 14 Dez 2011, 09:58

    @Sebastian: Ich kenne die Seite lea.verou.me auch und ich finde die Inspiration auch wertvoll, aber es Schritt für Schritt erklärt zu bekommen, bietet durchaus einen Mehrwert für den Leser, denn so kann er unter Umständen leichter und schneller verstehen, wie man diese Eigenschaft umsetzt.

    @Webstandard-Team: Weiter so Jungs!


  3. Siegfried
    14 Dez 2011, 10:17

    Ich finde das Muster zwar potthässlich, aber die Möglichkeiten sind damit gut erklärt.


  4. Webstandard-Team
    14 Dez 2011, 11:01

    @Susanne: Danke!
    @Siegfried: ...aber die Möglichkeiten sind damit gut erklärt


  5. Tom
    14 Dez 2011, 12:37

    Die Möglichkeiten mit mehreren Verläufen kannte ich bisher nur theoretisch. Ist ja ganz einfach. Danke für die Inspiration. :)


  6. michi
    15 Dez 2011, 02:56

    Wirklich sehr schön erklärt. Jetzt habe auch ich es verstanden.

    gruss michi


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage