Als je langer dan een paar minuten op internet bent, is de kans groot dat je een CSS-verloop bent tegengekomen. De CSS-achtergrondeigenschap kan worden gebruikt om een reeks verschillende stijlen te maken, en een van de meest intrigerende typen is wat het kan doen met de verloopwaarde.
Weten hoe verschillende CSS-gradiënten moeten worden ontworpen en gemaakt, is een aanwinst voor elke softwareontwerper of -ontwikkelaar. In dit artikel leert u alles wat u moet weten om CSS-gradiënten in uw projecten op te nemen.
Wat is een CSS-verloop?
Een CSS-verloop is in wezen de combinatie van twee of meer kleuren die vloeiend van de ene naar de andere overgaan. De overgangstoestand van een CSS-verloop is afhankelijk van het gebruikte type verloop. Er zijn twee hoofdtypen gradiënten die vaak worden gebruikt in softwareontwerp: lineair en radiaal.
Er is echter een derde type verloop dat minder populair is en bekend staat als het conische verloop.
Syntaxis voor CSS-verlopen
Achtergrondafbeelding: verlooptype (richting, kleur1, kleur2);
Het CSS-verloop moet worden toegewezen aan de CSS-eigenschap achtergrondafbeelding. Het verlooptype kan een van meerdere zijn; lineair verloop, radiaal verloop of conisch verloop. Het verlooptype wordt gevolgd door haakjes openen en sluiten die de overgangsrichting van het verloop bevatten, evenals de kleuren die in het verloop moeten worden opgenomen.
Verwant: Een achtergrondafbeelding instellen in CSS
Het bovenstaande voorbeeld toont twee kleuren, maar een verloop kan meerdere verschillende kleuren bevatten. De enige vereiste is dat elke kleur in de lijst wordt gescheiden door een komma.
Wat is een lineair verloop?
De lineaire gradiënt is de meest populaire CSS-gradiënt. Het creëert een horizontaal, verticaal of diagonaal overgangsverloop met twee of meer kleuren.
CSS lineair verloop voorbeeld
Achtergrondafbeelding: lineair verloop (#00A4CCFF, #F95700FF);
De bovenstaande code zal het volgende CSS-verloop produceren:
Er is één belangrijk onderdeel van de gradiëntsyntaxis weggelaten uit het bovenstaande voorbeeld. Deze component is de overgangsrichting van het verloop en is weggelaten omdat de standaarduitlijning van het lineaire verloop verticaal is (van boven naar beneden); dat is de gewenste output in dit voorbeeld.
De bovenstaande code geeft hetzelfde resultaat als de volgende regel code. Het enige verschil tussen de twee is het richtingsgedeelte van de code.
Het onderste lineaire verloop gebruiken voorbeeld
Achtergrondafbeelding: lineair verloop (naar beneden, #00A4CCFF, #F95700FF);
Zoals je aan de uitvoer kunt zien, creëert de bovenstaande code een verloop dat begint met blauw aan de bovenkant en langzaam overgaat naar oranje aan de onderkant. Als u de volgorde van de kleuren wilt omkeren, kunt u eenvoudig de Tot op de bodem met naar boven en dit zal de richting van het verloop omkeren, waardoor de volgende uitvoer wordt geproduceerd:
Net als bij de verticale uitlijning, kan de horizontale uitlijning van een verloop worden bereikt met behulp van twee sets richtingssleutelwoorden: naar links en naar rechts, die respectievelijk de volgende uitvoer produceren.
Diagonaal lineair verloop
Het is mogelijk om een diagonale lineaire gradiëntovergang in elke richting van een lineaire gradiënt te bereiken. Er zijn slechts vier specifieke lijsten met trefwoorden die u moet kennen om dit mogelijk te maken.
- Naar rechtsonder
- Naar linksonder
- Naar rechtsboven
- Naar linksboven
Het voorbeeld van een diagonaal lineair verloop gebruiken
Achtergrondafbeelding: lineair verloop (naar rechtsonder, #00A4CCFF, #F95700FF);
Het bovenstaande voorbeeld levert de volgende uitvoer op:
Zoals je kunt zien aan de bovenstaande uitvoer, maakt de lineaire gradiënt zijn overgang in een diagonale richting van linksboven naar rechtsonder van de gradiënt.
Veelkleurige lineaire gradiënt
Een lineair verloop kan twee of meer kleuren hebben, maar hoe zien meer kleuren eruit in een verloop? Een veelkleurige lineaire gradiëntkleurregeling is afhankelijk van de richting. Bij degenen die in horizontale richting overgaan, verschijnt elke nieuwe kleur links of rechts van de lineaire gradiënt, afhankelijk van de exacte richting van de lineaire gradiënt.
Voorbeeld van veelkleurig lineair verloop
Achtergrondafbeelding: lineair verloop (naar rechts, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
De bovenstaande regel code zal de volgende uitvoer produceren:
Zoals je kunt zien, wordt elke nieuwe kleur rechts van het verloop toegevoegd, waardoor er uiteindelijk een regenboog ontstaat. Dezelfde output kan worden bereikt in verticale richting; de specifieke kleurrangschikking op de lineaire gradiënt is echter afhankelijk van het trefwoord verticale richting (naar boven of naar beneden).
Wat is een radiaal verloop?
Het radiale verloop creëert een spiraalverloop van twee kleuren die standaard vanuit het midden beginnen. Waar de lineaire gradiënt een rechte gradiënt produceert die verticaal of horizontaal stroomt, produceert de radiale gradiënt een cirkelvormige gradiënt die van het midden naar de buitenranden stroomt.
Het radiaal verloop gebruiken voorbeeld
Achtergrondafbeelding: radiaal verloop (cirkel, #00A4CCFF, #F95700FF);
De bovenstaande regel code zal de volgende uitvoer produceren:
Het radiale verloopcentrum wijzigen
Standaard begint een radiaal verloop in het midden van het verloop; het is echter mogelijk om het beginpunt te wijzigen door een paar trefwoorden in te voeren.
De startpositie van het radiale verloop wijzigen Voorbeeld
Achtergrondafbeelding: radiaal verloop (cirkel rechtsboven, #00A4CCFF, #F95700FF);
De bovenstaande regel code zal de volgende uitvoer produceren:
Zoals je kunt zien aan de uitvoer hierboven, begint het verloop nu in de rechterbovenhoek in plaats van in het midden. Deze wijziging is mogelijk vanwege de opname van het trefwoord rechtsboven in de bovenstaande code. De volgende lijst met trefwoorden kan ook worden gebruikt om het beginpunt van de radiale gradiënt te wijzigen:
- Linksboven
- Rechts onder
- Linksonder
Veelkleurige radiale verlopen
Net als de lineaire gradiënt, kan de radiale gradiënt ook twee of meer kleuren gebruiken, het grote verschil is dat: waar het lineaire verloop in een rechte lijn aan het verloop toevoegt, voegt het radiale verloop nieuwe kleuren toe aan de buitenkant rand.
Voorbeeld van veelkleurig radiaal verloop
Achtergrondafbeelding: radiaal verloop (cirkel, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
De bovenstaande regel code zal de volgende uitvoer produceren:
Verlopen aanpassen
Tot nu toe heb je gezien hoe je de richting en het middelpunt van een verloop kunt wijzigen, maar je hebt nog niet gezien hoe je een verloop kunt aanpassen. Het aanpassen van een verloop klinkt misschien als veel werk, maar als je eenmaal de basisprincipes van het maken begrijpt een CSS-achtergrondverloop de volgende voor de hand liggende stap is leren hoe u uw CSS-verloop meer kunt maken uniek.
Standaard nemen de kleuren in een verloop een gelijkmatig verdeelde hoeveelheid ruimte in beslag, waarbij elke kleur vloeiend overgaat in de kleur erna. Dus als twee kleuren worden gecombineerd om een verloop te vormen, neemt elke kleur de helft van de beschikbare ruimte in beslag tijdens de overgang van de ene naar de andere. Als drie kleuren worden gecombineerd, neemt elke kleur een derde van de beschikbare ruimte in beslag.
Met een aangepast verloop kunt u de hoeveelheid ruimte definiëren die een kleur in een verloop inneemt door expliciet de toe te wijzen kleurstoppositie.
Een lineair verloop aanpassen Voorbeeld 1
Achtergrondafbeelding: lineair verloop (naar rechts, #00A4CCFF, #F95700FF 30%);
De bovenstaande regel code zal de volgende uitvoer produceren:
De uitvoer hierboven toont de tweede kleur in de lineaire gradiënt die stopt op het 30%-punt van de eerste kleur in de gradiënt, in plaats van zijn gebruikelijke positie, en omdat de tweede kleur ook de laatste kleur in het verloop is, breidt deze zich natuurlijk uit naar de einde.
Als je de 30% in de bovenstaande code aan het einde van de eerste kleur zou plaatsen, zou het duidelijker moeten worden.
Een lineair verloop aanpassen Voorbeeld 2
Achtergrondafbeelding: lineair verloop (naar rechts, #00A4CCFF 30%, #F95700FF);
De bovenstaande code zal de volgende uitvoer produceren.
De uitvoer hierboven laat duidelijk zien dat de eerste kleur in het verloop stopt bij het 30%-punt van de tweede kleur in het verloop. Dit voorbeeld, samen met het bovenstaande, zou moeten helpen om het aanpassen van de kleurstop voor u gemakkelijker te begrijpen.
Het aanpassen van een radiaal verloop gaat op dezelfde manier als een lineair verloop. Het enige dat u hoeft te doen om dezelfde resultaten hierboven te bereiken in een radiaal verloop, is door het verlooptype en de richting te wijzigen.
CSS-gradiënten maken was nog nooit zo eenvoudig
Dit zelfstudieartikel biedt u de hulpmiddelen om lineaire en radiale verlopen te identificeren en te maken. Als je dit punt hebt bereikt, heb je geleerd hoe je de richting en het midden van een verloop kunt wijzigen. Bovendien beschikt u nu over de vaardigheden om CSS-verlopen aan te passen en unieke achtergrondverlopen te maken.
Als u echter niet meteen nieuwe en unieke verlopen wilt maken, kunt u beginnen met het maken van een aantal fantastisch uitziende, reeds bestaande verlopen.
Effen kleuren zijn zo vorig jaar. Gradiënten zijn binnen! Maar hoe maak je ze in CSS?
Lees volgende
- Programmeren
- Webontwikkeling
- Webdesign
- CSS
Kadeisha Kean is een full-stack softwareontwikkelaar en technisch/technologisch schrijver. Ze heeft het onmiskenbare vermogen om enkele van de meest complexe technologische concepten te vereenvoudigen; materiaal produceren dat gemakkelijk kan worden begrepen door elke technologiebeginner. Ze is gepassioneerd door schrijven, interessante software ontwikkelen en de wereld rondreizen (via documentaires).
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Nog een stap…!
Bevestig uw e-mailadres in de e-mail die we u zojuist hebben gestuurd.
