27 Stijlvolle CSS-voorbeelden van achtergrondverloop

Op de hoogte blijven van de beste trends en standaarden voor webdesign is erg belangrijk voor een ontwerper of ontwikkelaar. Momenteel worden achtergrondgradiënten veel gebruikt in moderne websites.

In dit artikel zullen we u door verschillende achtergrondverloopvoorbeelden leiden met behulp van CSS.

Achtergrondverlopen met CSS

Het CSS-verloop geeft een vloeiende overgang weer met twee of meer gespecificeerde kleuren. CSS-verloop biedt betere controle en prestaties bij het gebruik van een echt afbeeldingsbestand (van een verloop). De achtergrond afbeelding CSS-eigenschap wordt gebruikt om verlopen als achtergrond te declareren.

windows 10 taakbeheer schijf 100%

Er zijn drie soorten gradiënten: lineair (gemaakt met de lineair-gradiënt() functie), radiaal (gemaakt met radiaal-gradiënt() functie), en kegelsnede (gemaakt met de kegelvormig-gradiënt() functie). U kunt ook herhalende verlopen maken met de herhalend-lineair-verloop() , herhalen-radiaal-gradiënt() , en herhalen-conische-gradiënt() functies.

MDN Docs definieert deze functies als:

lineair-gradiënt() : De CSS-functie linear-gradient() maakt een afbeelding die bestaat uit een progressieve overgang tussen twee of meer kleuren langs een rechte lijn. Het resultaat is een object van de gegevenstype, wat een speciaal soort .

radiaal-gradiënt() : De radiaal-gradiënt() De CSS-functie creëert een afbeelding die bestaat uit een progressieve overgang tussen twee of meer kleuren die uitstralen vanuit een oorsprong. De vorm kan een cirkel of een ellips zijn. Het resultaat van de functie is een object van de gegevenstype, wat een speciaal soort .

kegelvormig-gradiënt() : De kegelvormig-gradiënt() De CSS-functie maakt een afbeelding die bestaat uit een verloop met kleurovergangen die rond een middelpunt zijn geroteerd (in plaats van uit te stralen vanuit het midden). Voorbeelden van kegelvormige verlopen zijn taartdiagrammen en kleurenwielen. Het resultaat van de kegelvormig-gradiënt() functie is een object van de gegevenstype, wat een speciaal soort .

herhalend-lineair-verloop() : De herhalend-lineair-verloop() De CSS-functie maakt een afbeelding die bestaat uit herhalende lineaire gradiënten. Het is vergelijkbaar met gradient/linear-gradient() en heeft dezelfde argumenten, maar het herhaalt de kleurstops oneindig in alle richtingen om zo de hele container te bedekken. Het resultaat van de functie is een object van de gegevenstype, wat een speciaal soort .

herhalen-radiaal-gradiënt() : De herhalen-radiaal-gradiënt() De CSS-functie maakt een afbeelding die bestaat uit herhalende gradiënten die uitstralen vanuit een oorsprong. Het is vergelijkbaar met gradient/radial-gradient() en heeft dezelfde argumenten, maar het herhaalt de kleurstops oneindig in alle richtingen om zo de hele container te bedekken, vergelijkbaar met gradient/repeating-linear-gradient(). Het resultaat van de functie is een object van de gegevenstype, wat een speciaal soort .

herhalen-conische-gradiënt() : De herhalen-conische-gradiënt() De CSS-functie maakt een afbeelding die bestaat uit een herhalend verloop (in plaats van een enkel verloop) met kleurovergangen die rond een middelpunt zijn geroteerd (in plaats van uit te stralen vanuit het midden).

Hier is de officiële syntaxis van elk type verloop.

Officiële syntaxis van lineaire verlopen

linear-gradient(  
 [ | to ]? ,  
  
)  
 = [to left | to right] || [to top | to bottom]

Officiële syntaxis van radiale verlopen

radial-gradient(  
 [ || ]? [ at ]? ,  
  
);

Officiële syntaxis van kegelvormige gradiënten

conic-gradient(  
 [ from ]? [ at ]?,  
  
)

Hier zijn enkele geweldige voorbeelden van achtergrondverloop die de gebruikersinterface van uw website naar een hoger niveau kunnen tillen.