CSS Gradients
Met de gradientfunctie kun je een verloop van de ene kleur naar de andere maken.De CSS gradient functie biedt een flexibele oplossing om vloeiende overgangen tussen twee of meer kleuren te genereren. Om een dergelijk effect te bereiken moesten we voorheen afbeeldingen gebruiken. Met behulp van CSS gradient kun je de downloadtijd verkorten en bandbreedte gebruik besparen. De elementen met gradienten kunnen in elke mate omhoog of omlaag worden geschaald zonder kwaliteitsverlies. Ook wordt de uitvoer veel sneller weergegeven omdat deze door de browser wordt gegenereerd.
| Lineaire | - | Gradient (gaat omlaag / omhoog / links / rechts / diagonaal). |
| Radiale | - | Gradient (gedefinieerd door hun middelpunt). |
| Conische | - | Gradient (geroteerd rond een middelpunt). |
CSS lineaire gradienten
Om een lineair verloop te creëren, moet je minimaal twee kleurstops definiëren. Om complexere verloopeffecten te creëren, kun je echter meerdere kleurstops opgeven. Kleurstops zijn de kleuren waarvan je vloeiende overgangen wilt maken. Je kunt ook een startpunt en een richting instellen waar het verloopeffect op wordt toegepast.De basisregel voor het maken van lineaire gradiënten met behulp van trefwoorden kan worden opgegeven met:
background-image: linear-gradient(richting, kleur-stop1, kleur-stop2, ...);
 |
Richting - van boven naar beneden (standaard) |
Het volgende voorbeeld toont een lineair kleurverloop dat bovenaan begint.
|
Richting - van links naar rechts |
Het volgende voorbeeld toont een lineair kleurverloop dat links begint.
|
Richting - van rechts naar links |
Het volgende voorbeeld toont een lineair kleurverloop dat rechts begint.
|
Richting - diagonaal |
Om een diagonaal gradient te maken kunnen we zowel de horizontale als de verticale startposities opgeven.
| Richting van lineaire kleurverlopen instellen met behulp van hoeken (graden): |
| Voorbeeld |
| Lineaire kleurverlopen creëren met behulp van meerdere kleurstops: |
| Voorbeeld |
| De locatie van de kleurstops instellen: |
| Voorbeeld |
| Herhaling van de lineaire kleurverlopen opgeven: |
| Voorbeeld |
CSS radiale gradienten
Bij een radiale kleurovergang ontstaat de kleur vanuit één enkel punt en verspreidt zich vloeiend naar buiten in een cirkelvormige vorm, in plaats van in één enkele richting zoals bij lineaire kleurovergangen.De basis opbouw voor het maken van een radiaal verloop kan worden gegeven met:
background-image: radial-gradient(vorm, grootte, positie, start-kleur, ..., eind-kleur);
| Vorm | - | Specificeert de vorm van het verloop. Het kan een cirkel of een ellips zijn. |
| Grootte | - | Specificeert de grootte van het verloop. De standaardinstelling is farthest-side. |
| Positie | - | Specificeert het startpunt van het verloop, dat kan worden opgegeven in (px, em of percentages) of een trefwoord zoals: links, onder, enz. |
Het volgende voorbeeld toont een radiale gradient met gelijkmatig verdeelde kleurstops:
Het volgende voorbeeld toont een radiale gradient met verschillend verdeelde kleurstops:
De vorm parameter definieert de vorm en kan één van de volgende waarden bevatten circle of ellipse.
Het volgende voorbeeld toont een radiale gradient met de vorm van een cirkel:
Je kunt ook radiale gradienten herhalen met behulp van de functie
repeating-radial-gradient().
Voorbeeld:
#grad {
background: repeating-radial-gradient(red, yellow 10%, purple 20%);
}
CSS conische gradienten
Een conische gradient is een gradient met kleurovergangen die rond een middelpunt zijn gedraaid. Om een conische gradient te maken, moet je ten minste twee kleuren opgeven.
background-image: conic-gradient([hoek] [positie,] kleur [graden], kleur [graden], ...);Standaard is de hoek 0 graden en staat de positie in het midden.
Als er geen graad is opgegeven, worden de kleuren gelijk over het middelpunt verspreid.
Conische gradient met drie kleuren
Conische gradient met vijf kleuren
Conische gradient en graden
Het volgende voorbeeld toont een conische gradient met 3 kleuren. De graden zijn voor elke kleur apart ingesteld.
Voorbeeld:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
Het maken van cirkeldiagrammen
Doorborder-radius: 50%; aan je css code toe te voegen kan je een conische gradient uit laten zien als een cirkeldiagram:
Voorbeeld:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
Cirkeldiagrammen en graden
Voorbeeld:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Conische gradient vanuit een hoek
De [from] geeft een hoek aan waar de hele conische gradient door wordt gedraaid.Het volgende voorbeeld toont een conische gradient met een van hoek van 90 graden:
Voorbeeld:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
Conische gradient met een midden positie
De [at] geeft het midden van een conische gradient aan.Het volgende voorbeeld toont een conische gradient met een middenpositie van 60% 45%:
Voorbeeld:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Conische gradient herhalen (repeat)
De functierepeating-conic-gradient() wordt gebruikt om een conische gradient te herhalen.
Voorbeeld:
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Hieronder zie je een herhalende conische gradient met een gedefinieerde kleurstart en kleurstops:
Voorbeeld:
#grad {
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
