Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Radialer (kreisförmiger) Farbverlauf – mehr Realismus beim Lichtfall

In der Realität kommen sehr wenige lineare Farbverläufe vor (wenn dann künstlich digital erzeugt oder von einem Malermeister). Meistens wird durch eine punktförmige Lichtquelle Farb- oder Helligkeitsverläufe „erzeugt“. Hier sehen wir dann einen radialen Verlauf in Form eines Kreises bzw. einer Ellipse.

Dazu gibt es die CSS-Anweisung radial-gradient. Verändern wir unser Beispiel aus dem vorherigen Kapitel.

Der HTML-Code bleibt gleich:

<h1>CSS3 radialer Farbverlauf</h1>
<div id="box1">1</div>

Auch der grundlegende CSS-Code bleibt gleich:

#box1 {
	background-color: orange;
	width: 300px;
	height: 300px;
	position: absolute;
	top: 150px;
	left: 50px;
}

Für den Farbverlauf wird nun folgende Angabe gemacht:

background-image: radial-gradient(red, black);

Wir erhalten nun einen kreisförmigen Farbverlauf, der exakt in der Mitte unserer Box startet.

radialer Kreisverlauf über radial-gradient(red, black)

Weiteren Parameter kennen wir schon von den linearen Farbverlauf. Hier nur als Beispiel herausgegriffen die Breite mit 200px:

background-image: repeating-radial-gradient(red, black 200px);

Im Mittelpunkt wird nun unsere Farbe gesetzt (im Beispiel rot) mit einem Verlauf nach schwarz in die Ecken.

Farbverlauf in Form einer Ellipse

Radialer Farbverlauf in Form einer Ellipse

In unserem Beispiel ist die Grundfläche viereckig mit gleichen Kantenlängen. Machen wir unsere Box nun dreimal so breit wie hoch, dann entsteht ein komplett anderer Farbverlauf:

#box1 {
	background-color: orange;
	width: 900px;
	height: 300px;
}

Das Ergebnis unserer Änderung der Anzeigebreite:

Farbverlauf in Form einer Ellipse

Nun wird aus unserem Kreis eine Ellipse. Es wird versucht, dass der ursprüngliche Kreis sich gleichmäßig in der vorhandenen Fläche verteilt – wir erhalten dadurch eine Ellipse.

Wenn wir das nicht wollen, müssen wir das in CSS angeben.

Radialer Farbverlauf in Form eines Kreises erzwingen

Wollen wir aber für unsere Ausgabe auf jeden Fall einen Kreis, müssen wir dies auch angeben. Innerhalb der Klammern wird die Anweisung circle als erstes gemacht.

background-image: radial-gradient(circle, red, black);
Kreisrunder Farbverlauf auch bei rechteckigen Grundflächen

Wir können als Wert entweder „ellipse“ oder „circle“ mitgeben. Ohne eine gemachte Angabe wird als Standard beim Farbverlauf eine Ellipse verwendet.

Der normale Start des Kreises ist immer die Mitte der Fläche.

Startpunkt des Kreisverlaufs festlegen

Der Startpunkt des Kreisverlaufs kann festgelegt werden. Dazu stehen uns diese 4 Parameter zur Verfügung:

• closest-side

• farthest-side

• closest-corner

• farthest-corner

Zu dem Parameter wird noch eine Entfernung benötigt. Im folgenden Beispiel in Prozentangaben.

Und nun der entsprechende Aufbau der CSS-Anweisung:

background-image: radial-gradient(farthest-side at 10% 10%, red, black);

Wir erhalten durch diese Angaben folgende Anzeige:

radialer Farbverlauf mit Startpunkt 10% eingerückt an linken oberen Ecke