CSS INTENSIVSTATION

CSS Gradient

Ein Gradient ist ein fliessender Farbübergang zwischen zwei oder mehr Farben. In CSS gelten Gradients nicht als Farben, sondern als Images – deshalb werden sie meist mit background oder background-image verwendet.

background-color: linear-gradient(...); /* FALSCH */ 
background: linear-gradient(...);  /* RICHTIG */

Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Bei radial:

background: radial-gradient(shape size at position, colors...);

Linear Gradient

Einfachstes Beispiel

 
background: linear-gradient(salmon, pink);
 
background: linear-gradient(Salmon 10%, pink 45%, pink 65%, Salmon 90%);

Richtung festlegen

  • to rightlinks -> rechts
  • to leftrechts -> links
  • to topunten -> oben
  • to bottomoben -> unten
 
background: linear-gradient(to right, darkblue, pink);
 
background: linear-gradient(to top left, darkblue, pink);

Gradangaben

  • 0degnach oben
  • 90degnach rechts
  • 180degnach unten
  • 270degnach links
 
background: linear-gradient(45deg, pink, darkmagenta);

Mehrere Farben

Farben verteilen sich automatisch gleichmässig.

 
background: linear-gradient(darkblue, darkmagenta, magenta, deeppink);

Color Stops

Kann harte Farbkanten erzeugen (fast wie Streifen)

 
background: linear-gradient(45deg, darkblue 0%, darkblue 30%, skyblue 30%, skyblue 100%);

Transparenz (rgba / hsla)

 
background: linear-gradient(to bottom, red, rgba(255, 255, 255, .0));

Radial Gradient

Grundform

Startet in der Mitte, kreisförmig

 
background:radial-gradient(yellow, lime);

Kreis oder Ellipse

Der Grundwert ist ellipse

 
background:radial-gradient(circle, white, turquoise);

Grösse bestimmen

  • sideStoppt an einer Kante
  • cornerStoppt an einer Ecke
  • closestDer kürzeste Weg (kleiner Kreis)
  • farthestDer weiteste Weg (grosser Kreis)

Werte:
closest-side (nächste Seite)
farthest-side (fernste Seite)
closest-corner (nächste Ecke)
farthest-corner(fernste Ecke) – Der Standard

 
background:radial-gradient(circle closest-side, white, turquoise);

Position ändern

 
background: radial-gradient(circle at top left, red, blue);
 
background: radial-gradient(circle at 30% 70%, red, blue);
 
 background: radial-gradient(circle closest-corner at 80% 0%, pink, red, indigo);

Conic Gradient

Farben rotieren um einen Mittelpunkt

 
background: conic-gradient(red, yellow, green, blue, red);

Rotation & Position

 
background: conic-gradient( from 90deg at center, darkmagenta, deeppink, magenta);

Perfekt für: Pie-Charts, Loader, Farbräder

Repeating Gradient

Erzeugt Muster (Streifen, Karos, etc.)

 
background: repeating-linear-gradient( 45deg, black 0px, black 10px, white 10px, white 20px)
 
background: repeating-radial-gradient(circle at 100%, #000000, #000000 10px, #eeeeee 10px, #eeeeee 20px);

Gradient & Image

Gradient liegt über dem Bild
Reihenfolge: erstes Gradient = oberste Schicht

 
background: linear-gradient(to right, rgba(128,0,0,0.5), rgba(128,0,0,0)), url("bild.gif")

Nurse DEMO – Pattern mit CSS Gradient