Einen Augenblick Geduld...
Farbverläufe und Texturen in div-Containern sind mit CSS3 eine tolle Sache und ganz leicht umzusetzen. Im Prinzip ist es nur eine Zeile um die sich hier alles dreht, wenn der div-Container einmal erstellt wurde und seine Angaben mit Höhe und Breite versehen wurde.
Legt man einen div-Container mit 100% Breite und Höhe auf den Hintergrund einer Webseite, kann dieser anschließend mit einem bildschirmfüllenden Verlauf versehen werden ohne zuvor große Bilddateien erzeugen zu müssen (je exakter ein Bildverlauf, desto größer ist auch die Dateigröße des entsprechenden Bildes).
Der dafür notwendige div-Container muss wie immer in den styles angelegt und konfiguriert werden. Die styles bette ich zunächst in das HTML-Dokument selbst ein.
Für die Vorbereitung richte ich mir die styles im head-Bereich des HTML-Dokumentes ein (Siehe Zeile 7-9).
Anschließend erstelle ich einen div-Container mit dem Name ''farbiger-container'' im Bereich body des HTML-Dokumentes (Siehe Zeile 15-17).
Da ich auch noch Text in diesem Container darstellen will schreibe ich zunächst nur die Worte ''Farbiger Verlauf'' dort hinein. Dies wird später mal eine Überschrift.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Farbverläufe</title>
<style>
</style>
</head>
<body>
<div class="farbiger-container">
Farbiger Verlauf
</div>
</body>
</html>
Von nun an werde ich im Quelltext nur das zeigen, was sich in den styles abspielt. Der Rest des HTML-Dokumentes bleibt vorerst gleich und damit davon unberührt. Kümmern wir uns also um die Formatierungen in den styles.
Ich möchte zunächst den Hintergrund des HTML-Dokumentes dunkler haben als die standardmäßig angezeigte Farbe weiss.
Dafür versehe ich den Eintrag body mit der Angabe background-color: #121212 (ein sehr dunkles grau).
Darunter lege ich nun den div-Container ''.farbiger-container'' (mit vorangestelltem Punkt) an. Auch hier ist es wie immer in den styles wichtig die Befehlsketten in geschweifte Klammern zu setzen und natürlich auch am Ende jeder Befehlszeile ein Semikolon einzufügen.
Anschließend gebe ich die Breite (''width'') des div-Containers mit 600px an. Die Höhe habe ich anschl. mit height: 160px definiert.
Die Schriftfarbe habe ich darunter auf weiss festgelegt (''#FFFFFF'').
Der komplette Container soll randlos dargestellt werden. Deswegen hab ich border auf ''none'' gesetzt.
body {
background-color: #121212;
}
.farbiger-container {
width: 600px;
height: 160px;
color: #FFFFFF;
border: none;
background-image: linear-gradient(90deg, #088BD1 0%, #BF4B0D 100%);
}
Die Befehlszeile für den Farbverlauf befindet sich in Zeile 10. Der Verlauf wird als ''background-image'' des div-Containers bestimmt. Mit einem linearen Farbverlauf (''linear-gradient'') will ich zunächst einen horizontalen Farbverlauf von hellblau (''#088BD1'') nach orange (''#BF4B0D''). Dabei lege ich die mit 0% angegebene Verlaufsgrenze der blauen Farbe stark nach links.
Bei dem Orange will ich eine breite Farbverlaufsgrenze nutzen, damit die ''Zwischenfarben'' zwischen den beiden Farben blau und orange besser herauskommen. Deswegen setze ich diese mit einem maximalen Verlaufswert auf 100%.
Fast hätte ich es vergessen: den Winkel in dem der Verlauf stattfinden soll, stelle ich auf 90deg (''degree''=Grad) ein. Damit findet der Verlauf von links nach rechts statt. Würde hier der Wert ''0'' stehen wäre es ein vertikaler Verlauf.
Im letzten Beispiel zu den Farbverläufen zeige ich wie es aussieht wenn der Winkel vergrößert wird. Die Angabe des Winkels wird im Übrigen immer an den Anfang des Farbverlaufbefehls gesetzt.
Für die Ermittlung der Hex-Farbwerte habe ich einen interaktiven Farbwähler bereitgestellt. Nutzt dazu den Link HIER.
Damit fällt die Zuordnung der Hex-Werte leichter.
Das Ganze sieht nun so aus:
Die grundsätzliche Funktionalität des Farbverlaufs ist soweit funktional. Für eine optisch ansprechende Form würde ich allerdings in Verbindung mit dem Text noch ein paar ''Schönheitskorrekturen'' vornehmen wollen.
Dazu gehört zum einen die Verwendung einer serifenlosen Schrift, wie Arial, Helvetiva, etc. Diese ''Schriftfamilie'' füge ich ebenfalls in die Befehlskette des div-Containers ''farbiger-container'' mit ein.
Des Weiteren lege ich den Abstand von Inhalten, also dem Text zum Rand des div-Containers auf 30px fest. Gerade jetzt, da er farbig unterlegt ist wirkt der Container wie eine Begrenzung um die Inhalte. Dazu nutze ich den Befehl ''padding: 30px''.
Später werde ich noch einen weiteren Text unter die Beschreibung ''Farbiger Verlauf'' setzen. Deswegen sorge ich jetzt schon mal für einen größeren Buchstabenabstand (Laufweite) mit ''letter-spacing: 1.8px''.
body {
background-color: #121212;
}
.farbiger-container {
width: 600px;
height: 160px;
position: relative;
border: none;
background-image: linear-gradient(90deg, #088BD1 0%, #BF4B0D 100%);
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFFFFF;
letter-spacing: 1.8px;
padding: 30px;
}
Nun füge ich in den body-Teil der Seite noch ein bisschen Text ein. Diesem Fließtext gebe ich das Textattribut ''p''.
Der Überschrift ''Farbiger Verlauf'' ordne ich das Attribut ''h2'' zu.
Das sieht dann im HTML-Teil des Dokumentes so aus:
<body>
<div class="farbiger-container"><h2>Farbiger Verlauf</h2>
<p>Ich bin ein farbiger Verlauf. Mein Hintergrund wurde ohne ein Bildbearbeitungprogramm erstellt.
Damit bin ich dynamisch verwendbar. Möglich macht das die Angabe von Breite und Höhe in Prozent.</p>
</div>
</body>
Übrigens, der Zeilenumbruch hinter ''...Bildbearbeitungsprogramm erstellt.'' und ''Damit bin ich...'' ist auf einer Webseite nicht sichtbar. Um explizit einen Zeilenwechsel zu erzeugen ist der Eintrag ''br'' (in eckigen Klammern) nötig. Ich habe den Zeilenwechsel hier nur aus optischen Gründen verwendet, damit ihr mit geringerer Bildschirmauflösung möglichst den kompletten Quelltext sehen könnt ohne horizontal scrollen zu müssen.
Unser Ergebnis sieht nun schon viel ansprechender aus:
Bis jetzt war es ein zweifarbiger Verlauf.
Nun kann ich den Verlauf z.B. mit einer dritten Farbe ergänzen. So soll zu dem blau und orange noch ein grüne Farbe hinzukommen. Diese möchte ich rechts im Verlauf sehen.
Also ergänze ich die entsprechende Zeile mit dem Farbverlauf um den Eintrag ''#0F8703' mit 100%. Den Verlaufswert für das Orange habe ich anschließend aus optischen Gründen auf 50% gesetzt.
background-image: linear-gradient(90deg, #088BD1 0%, #BF4B0D 50%, #0F8703 100%);
Wenn man nun die 90deg auf 130deg setzt wird es ein diagonaler Farbverlauf. Das sieht dann so aus:
background-image: linear-gradient(130deg, #088BD1 0%, #BF4B0D 50%, #0F8703 100%);
Die Farben für einen Verlauf lassen sich auch ersetzen durch Angaben, wie red, blue, green, etc.
Um z.B. die typischen Regenbogenfarben darzustellen und diese alle mit in die Verlaufzeile einzubinden, wobei jede Farbe den gleichen Verlaufsanteil bekommt, erlaubt CSS3 auch die folgende Eingabe:
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
Der Befehl to right gibt dabei die Richtung des Verlaufs vor. Alternativ: to left (nach links), to top (nach oben) oder to bottom (nach unten).
Es sind aber auch wiederholende Effekte möglich, z.B. wenn sich rot und weiß wiederholen sollen - am besten in diagonaler Form. Dazu wird der Befehl linear-gradient ergänzt durch den Eintrag repeating-linear-gradient, z.B. so:
background: repeating-linear-gradient(45deg, Red, Red 5px, White 5px, White 10px);
Um den Text erkennbar zu halten habe ich ihn schwarz eingefärbt. Schnell kommt man bei stark kontrastreichen Effekten aber zu der Erkenntnis, dass zusätzlicher Text hier eher weniger angebracht ist, da er sehr schwer lesbar ist.
Die Effekte werden nun etwas anspruchsvoller. Um nun zusätzlich ein zentriert ausgerichtetes Bild in einem div-Container mit vertikalem Farbverlauf abzubilden, verwende ich beispielsweise folgende Zeile mit den kombinierten Befehlen in den styles:
background: url(bild.png) no-repeat center center, linear-gradient(#B39484, #BF4B0D);
Aus optischen Gründen habe ich den Fließtext hier entfernt und die Überschrift lediglich auf h4 gesetzt. Dadurch erscheint sie hier etwas kleiner.
Der Befehl no repeat für das Hintergrundbild ist notwendig, damit es nicht wiederholt dargestellt wird. Die beiden Befehle center sorgen dafür, dass das Bild sowohl horizontal als auch vertikal zentriert wird.
Auch kreisförmige Farbverläufe sind mit CSS3 realisierbar. Das ist dann sicherlich Geschmacksache und nicht für jede Webseite geeignet.
background: radial-gradient(circle, #3DB7FF 10%, #FFFFFF 84%);
Auch hier habe ich aus optischen Gründen ein paar Veränderungen vorgenommen. Zum einen habe ich die Schrift weiss eingefärbt. Zum anderen verändere ich den Container in seinen Maßen zu einer quadratischen Form, also z.B. mit 400px x 400px. So lässt sich der radiale Farbverlauf besser erkennen.
Auch hier habe ich mit den Werten der Farbverlaufangabe experimentiert und sie entprechend angepasst. Deswegen hat der orangene Farbverlaufwert 10% und der dunkelgraue Verlaufswert 84% erhalten.
Mit at 70% und 40px verschiebt man das Zentrum des Radialen Verlaufs um 70% nach rechts und 40px nach unten.
background: radial-gradient(at 70% 40px, #EEA47D, #BF4B0D, #242424);
Das Ergebnis sieht dann so aus:
Dabei habe ich noch eine dritte Farbe mit ins Spiel gebracht um die Tiefe des Verlaufs zu steigern. So besteht dieser nun aus einem dunkelgrauen Farbwert (#242424), einem dunklen Orange (#BF4B0D) und einem sehr hellen Orange (#EEA47D).
Einen weiteren radialen Effekt kann man mit dem Befehl conic-gradient erzielen. Ich würde das für die ''normale Nutzung'' einer Webseite allerdings als ein wenig ''abgedreht'' bezeichnen. Aber es ist ein toller Farbeffekt.
background: conic-gradient(orange, yellow, lime, aqua, blue, magenta, red, orange);
Eine ''automatische'' Erstellung von Farbverläufen ist übrigens auf DIESER Webseite möglich.
Kommen wir weg vom radialen Farbverlauf zu den Texturen. Diese werden allerdings in dieser einen Zeile sehr aufwendig. Ein Schreibfehler sorgt dann schnell dafür, dass gar nichts mehr angezeigt wird. Hier also ein Beispiel für eine Art ''Millimeterpapier-Vorlage'':
background-color:#9F9F9F;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
letter-spacing: 1.8px;
padding: 30px;
Das Ergebnis sieht dann so aus wie unterhalb abgebildet. Auch hier ist es wieder praktisch kein Bildbearbeitungsprogramm dafür nutzen zu müssen. Es ist somit an jede Auflösung der genutzten Geräte anpassbar.
Auch die nächste Textur in unserem div-Container lässt einige interessante Möglichkeiten zu. Diesmal möchte ich eine Art ''Schreibpapier'' als Textur nutzen.
Die Befehle in unserer Zeile sehen dann beispielsweise so aus:
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #95BBD9 79px, #95BBD9 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
Ich habe die Formatierung des Textes entsprechend angepasst. Damit der Effekt ''schön'' aussieht ist es notwendig die Seitenränder zu modifizieren. Den horizontalen Abstand des Inhalts vom div-Container habe ich nun mit 81px entsprechend angepasst. Von oben sind es hier zur ersten Zeile des Textes 13px.
Die horizontalen Linien werden in einem hellen grau dargestellt (''#eeeeee''). Die vertikale Linie ist hellblau eingefärbt (''#95BBD9''). Der Zeilenabstand ist hier auf 1.2em eingestellt.
Hier ließe sich noch eine schöne Schreibschrift dafür einsetzen um die Optik weiter zu verbessern...
Ich hoffe, das Tutorial war hilfreich.
Ich wünsche viel Erfolg beim Experimentieren mit Farbverläufen und Texturen in div-Containern. Es sind sehr effektive Stilmittel um eine Webseite ohne viel Aufwand optisch aufzuwerten.