Home-theater-designers
Als je langer dan een paar minuten op internet zit, is de kans groot dat je een CSS-verloop tegenkomt. 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
Background-image: gradient-type (direction, color1, color2);
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
Background-image: linear-gradient(#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. Dit onderdeel 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
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Zoals je aan de uitvoer kunt zien, creëert de bovenstaande code een verloop dat begint met blauw bovenaan en langzaam overgaat naar oranje onderaan. 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.
hoe doe ik de zaklamp uit?
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
Background-image: linear-gradient(to bottom right, #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 een 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
Background-image: linear-gradient(to right, #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
Background-image: radial-gradient( circle, #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.
beste plek om pc-onderdelen te kopen
De startpositie van het radiale verloop wijzigen Voorbeeld
Background-image: radial-gradient(circle at top right, #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 belangrijkste verschil is dat waar de lineaire gradiënt in een rechte lijn aan de gradiënt toevoegt, de radiale gradiënt nieuwe kleuren toevoegt aan de buitenrand.
Voorbeeld van veelkleurig radiaal verloop
Background-image: radial-gradient(circle, #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 u eenmaal de basis begrijpt van het maken van een CSS-achtergrondverloop, is de volgende voor de hand liggende stap om te leren hoe u uw CSS-verloop unieker kunt maken.
nest hub vs nest hub max
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
Background-image: linear-gradient(to right, #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 de gebruikelijke positie, en omdat de tweede kleur ook de laatste kleur in de gradiënt is, loopt deze natuurlijk door tot het 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
Background-image: linear-gradient( to right, #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 in een radiale gradiënt te bereiken, is door het gradiënttype 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.
Deel Deel Tweeten E-mail 27 Stijlvolle CSS-voorbeelden van achtergrondverloopEffen kleuren zijn zo vorig jaar. Gradiënten zijn binnen! Maar hoe maak je ze in CSS?
Lees volgende Gerelateerde onderwerpen- 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).
Meer van Kadeisha KeanAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren