De linear-gradient functie
De functie linear-gradient definieert een lineair
kleurverloop. Wordt toegepast op eigenschappen die
een achtergrondafbeelding instellen: background,
background-image
of een randafbeelding: border-image,
background-image-source.
Syntaxis
selector {
background: linear-gradient([hoek of richting], kleur1 grootte1, kleur2 grootte2...);
}
Waarden
| Waarde | Beschrijving |
|---|---|
| richting |
Specificeert een bepaalde richting van het verloop in alle hoekeenheden
of met de sleutelwoorden top, left, right, bottom
of hun combinatie: top left, top right enzovoort.
De volgorde van de woorden is niet belangrijk: je kunt top left en left top schrijven,
er is geen verschil. Deze parameter is optioneel: als deze niet wordt geschreven, loopt het verloop
van boven naar beneden (zoals bij to top). Voor de richting wordt het woord to geplaatst.
|
| hoek | Hoek in alle hoekeenheden. Kan positief of negatief zijn. Deze parameter is optioneel. Er kan gelijktijdig een hoek of een richting worden opgegeven (of helemaal niets). |
| kleur1 | Startkleur van het verloop in alle kleureenheden. |
| kleur2 | Eindkleur van het verloop in alle kleureenheden. |
| grootte | Specificeert de omvang van een bepaalde kleur van het verloop in alle lengte-eenheden. |
Voorbeeld . De eenvoudigste variant
Syntaxis:
selector {
background: linear-gradient(startkleur, eindkleur);
}
Laten we naar een voorbeeld kijken:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Voorbeeld . We voegen een hoek toe
Syntaxis:
selector {
background: linear-gradient(hoek, startkleur, eindkleur);
}
Laten we naar een voorbeeld kijken:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Voorbeeld . We voegen een richting toe
In plaats van een hoek kan een richting worden toegevoegd
top, left, right, bottom
of hun combinatie: top left, top right
Voor de richting wordt het woord to geplaatst.
Syntaxis:
selector {
background: linear-gradient(richting, startkleur, eindkleur);
}
Laten we naar een voorbeeld kijken:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Voorbeeld . We voegen een richting toe
Laten we een andere richting opgeven:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Voorbeeld . We voegen een grootte toe
Syntaxis:
selector {
background: linear-gradient(kleur1 grootte1, kleur2 grootte2);
}
In het volgende voorbeeld zal het gedrag als volgt zijn:
puur rood zal zijn van 0px tot
30px, van 30px tot 50px
zal er een verloop zijn van rood naar blauw, en
van 50px tot het einde - puur blauw:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Voorbeeld . We voegen meer dan 2 kleuren toe
Syntaxis:
selector {
background: linear-gradient(kleur1 grootte1, kleur2 grootte2, kleur3 grootte3...);
}
In het volgende voorbeeld zal het gedrag als volgt zijn:
puur rood zal zijn van 0px tot
30px, van 30px tot 50px
zal er een verloop zijn van rood naar blauw, en
van 50px tot 70px - een verloop van blauw
naar groen, en na 70px - puur groen:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Scherpe overgangen
In het volgende voorbeeld zal het gedrag als volgt zijn:
puur rood zal zijn van 0px tot
30px, puur blauw - van 30px
tot 60px, puur groen - na 60px
(red 0px hoeft niet geschreven te worden):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Voorbeeld . Groottes kunnen ook in percentages worden opgegeven
In het volgende voorbeeld zal het gedrag als volgt zijn:
puur rood zal zijn van 0% tot
30%, puur blauw - van 30%
tot 60%, puur groen - na 60%
(red 0% hoeft niet geschreven te worden):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Voorbeeld . Combinatie met background-size
In het volgende voorbeeld zal het gedrag als volgt zijn:
puur rood zal zijn van 0px tot
30px, puur blauw - van 30px
tot 60px, waarbij dit alles zal worden herhaald
in stukjes van 60px (vanwege background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Zie ook
-
de functie
radial-gradient,
die een radiaal verloop creëert -
de functie
repeating-linear-gradient,
die een herhalend lineair verloop creëert -
de functie
repeating-radial-gradient,
die een herhalend radiaal verloop creëert
