CSS -verlopen
Met CSS-verlopen kunt u vloeiende overgangen weergeven tussen twee of meer gespecificeerde kleuren.
CSS definieert drie soorten verlopen:
- Lineaire gradiënten (gaat omlaag/omhoog/links/rechts/diagonaal)
- Radiale verlopen (gedefinieerd door hun middelpunt)
- Kegelverlopen (geroteerd rond een middelpunt)
CSS lineaire verlopen
Om een lineair verloop te maken, moet u minimaal twee kleurstops definiëren. Kleurstops zijn de kleuren waartussen u vloeiende overgangen wilt weergeven. U kunt naast het verloopeffect ook een startpunt en een richting (of een hoek) instellen.
Syntaxis
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Richting - Van boven naar beneden (dit is standaard)
Het volgende voorbeeld toont een lineair verloop dat bovenaan begint. Het begint rood en gaat over in geel:
Voorbeeld
#grad {
background-image: linear-gradient(red, yellow);
}
Richting - van links naar rechts
Het volgende voorbeeld toont een lineair verloop dat van links begint. Het begint rood en gaat over in geel:
Voorbeeld
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Richting - Diagonaal
U kunt diagonaal een verloop maken door zowel de horizontale als de verticale startpositie op te geven.
Het volgende voorbeeld toont een lineair verloop dat linksboven begint (en naar rechtsonder gaat). Het begint rood en gaat over in geel:
Voorbeeld
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Hoeken gebruiken
Als u meer controle wilt over de richting van het verloop, kunt u een hoek definiëren in plaats van de vooraf gedefinieerde richtingen (naar beneden, naar boven, naar rechts, naar links, naar rechtsonder, enz.). Een waarde van 0deg is gelijk aan "naar boven". Een waarde van 90deg is gelijk aan "naar rechts". Een waarde van 180deg is gelijk aan "naar beneden".
Syntaxis
background-image: linear-gradient(angle, color-stop1, color-stop2);
Het volgende voorbeeld laat zien hoe u hoeken op lineaire hellingen gebruikt:
Voorbeeld
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Meerdere kleurstops gebruiken
Het volgende voorbeeld toont een lineair verloop (van boven naar beneden) met meerdere kleurstops:
Voorbeeld
#grad {
background-image: linear-gradient(red, yellow, green);
}
Het volgende voorbeeld laat zien hoe u een lineair verloop (van links naar rechts) maakt met de kleur van de regenboog en wat tekst:
Voorbeeld
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Transparantie gebruiken
CSS-gradiënten ondersteunen ook transparantie, die kan worden gebruikt om vervagingseffecten te creëren.
Om transparantie toe te voegen, gebruiken we de functie rgba() om de kleurstops te definiëren. De laatste parameter in de rgba()-functie kan een waarde van 0 tot 1 zijn en definieert de transparantie van de kleur: 0 geeft volledige transparantie aan, 1 geeft volledige kleur aan (geen transparantie).
Het volgende voorbeeld toont een lineair verloop dat van links begint. Het begint volledig transparant en gaat over in full colour rood:
Voorbeeld
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Een lineair verloop herhalen
De functie repeating-linear-gradient() wordt gebruikt om lineaire gradiënten te herhalen:
Voorbeeld
Een herhalend lineair verloop:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}