Benutzer:Apsel/gradient

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mithilfe der Funktion linear-gradient können Sie einen linearen Farbverlauf als Hintergrund eines Elements bestimmen.

  • CSS 3.0
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: linear-gradient()</title> <style> p { outline: 1px solid; float: left; margin-right: 1em; width: 300px; height: 200px; } #Deutschland { background-image: linear-gradient(to bottom, black 33.3%, red 33.3%, red 66.6%, gold 66.6%); } #Monaco { background-image: linear-gradient(0deg, rgb(255,255,255) 50%, rgb(255,0,0) 50%, rgb(255,0,0)); } #Regenbogenland { background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); } #Unbekannt { background-image: linear-gradient(to top, red, #0F0, blue, rgb(234,120,34), rgba(200,100,0,0.5), #F0E1C2); } </style> </head> <body> <h1>Erstellen eines Farbverlaufs</h1> <h2>Sind Sie schon einmal in einem dieser Länder gewesen?</h2> <p id="Deutschland"></p> <p id="Monaco"></p> <p id="Regenbogenland"></p> <p id="Unbekannt"></p> </body> </html>

Mit linear-gradient() legen Sie fest, wie sich ein linearer Farbverlauf im Hintergrund eines Elements verhalten soll. Erlaubt sind Verläufe mit beliebig vielen Farben, mindestens müssen aber 2 Farben angegeben werden.

linear-gradient erwartet folgende Parameter:

für die Richtung des Verlaufs
eine Winkelangabe
Der Scheitelpunkt des Winkels liegt dabei in der unteren linken Ecke der Hintergrund-Box des Elements (siehe background-clip). Außerdem sind folgende Richtungsangaben möglich: to top ...
Angabe ist optional

Farbangaben in Verbindung mit Ortsangaben


Weblinks[Bearbeiten]