Lineare Farbverläufe
Ein Farbverlauf benötigt mindestens 2 Farben, die miteinander verlaufen können.
Wir machen aus unseren <div>-Elementen "Box01" bis "Box03" einfach ein einzelnes <div>-Element mit einer "id" als "Attribut", um darin Farben verlaufen zu lassen.
<body>
...
<div id="farbverlauf"></div>
</body>
In CSS erstellen wir zur "id" eine Box mit einer festen Größe und einem Hintergrund, in dem wir unsere Farben verlaufen lassen können.
#farbverlauf {
width: 300px;
height: 300px;
background-image: linear-gradient(yellow, purple);
}
Die Box hat noch ein paar Eigenschaften vom Selektor "div", welche am roten abgerundeten "border" zu erkennen sind, aber im Mittelpunkt steht der Farbverlauf von Gelb nach Lila.
Die Richtung des Farbverlaufs können wir auch direkt in CSS angeben.
#farbverlauf {
width: 300px;
height: 300px;
background-image: linear-gradient(to right bottom, yellow, purple);
}
Die Farbe verläuft nach unten rechts.
Der Farbverlauf muss nicht immer von Anfang bis Ende ausgeführt werden.
#farbverlauf {
width: 300px;
height: 300px;
background-image: linear-gradient(yellow 70%, purple);
}
Der Punkt des Farbumbruchs wurde verändert.
Der Farbverlauf kann auch wiederholt werden.
#farbverlauf {
width: 300px;
height: 300px;
background-image: repeating-linear-gradient(yellow, purple 50px);
}
Mehr als 2 Farben sind auch kein Problem.
#farbverlauf {
width: 300px;
height: 300px;
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
radiale Farbverläufe
Für etwas mehr Rundung können wir auch kreisförmige Farbverläufe gestalten.
#farbverlauf {
width: 300px;
height: 300px;
background-image: radial-gradient(yellow, purple);
}
Für eine Wiederholung des kreisförmigen Farbverlaufs:
#farbverlauf {
width: 300px;
height: 300px;
background-image: repeating-radial-gradient(yellow, purple 60px);
}
Weiter mit Schriften