Achtergrond maken met CSS WordPress afbeelding verloop gradient

Ik ben enthousiast over het maken van unieke, mooie verloopjes. Leer hoe je een achtergrond kan maken met een CSS class stijl in WordPress met een achtergrondafbeelding of een gradient kleurverloop.

Afbeelding, kleurverloop of gradients als achtergrond in WordPress pagina

Achtergronden hebben een enorme impact op het ontwerp van een website. Zo groot, dat het waarschijnlijk een van de belangrijkste aspect van je website is – naast de functionaliteit natuurlijk. Het zijn de eindjes die het uiterlijk en het thema van een website aan elkaar koppelen. Ze maken vaak groeperingen, maken onderscheid tussen pagina’s en hebben de hand in het aanwijzen van belangrijke elementen van de site. Maar wilt u niet dat uw achtergrond boeiend, uniek en onderscheidend is?

Gradiëntachtergronden kunnen dat doen. Kijk eens naar een aantal van uw favoriete websites. De kans is groot dat ten minste een handvol van de best ontworpen websites die er zijn een soort van gradiënt als achtergrond implementeren. Ze dragen bij aan het unieke karakter en het ontwerp van uw website, terwijl ze uw consumenten tekenen om een tijdje op uw pagina te blijven staan.

Hoe maak je je eigen gradiënt-achtergrond met verloop

Oké, dus je begrijpt het belang van gradiënten als achtergrond – het is waarschijnlijk tijd dat we het echte vlees van het artikel gaan halen en je leren hoe je het zelf kunt maken. Het beste nieuws? Het is heel eenvoudig. Omdat gradiënten de ruimte vullen die ze krijgen, maken ze prachtige achtergrondafbeeldingen.

The Basics

Hier zijn een paar belangrijke termen en ingrediënten waarmee u vertrouwd moet zijn voordat u begint met het bouwen van uw code voor uw geweldige achtergrondgradiënt.

Achtergrondafbeelding met CSS maken (class)

Effen-kleurige achtergronden gebruiken de term background-color wanneer je voor hen codeert in CSS, maar de term background-image verwijst specifiek naar verlopen en gradiënten. Omdat de kleurverlopen een stapelvolgorde hebben, kunt u ze beschouwen als gelaagde achtergrondafbeeldingen, zodat u de kleurverlopen van uw achtergrondafbeeldingen over andere afbeeldingen kunt verdelen als u de transparantie van uw kleurverlopen manipuleert.

Maak een achtergrondafbeelding

Maak eerst een achtergrondafbeelding in bijvoorbeeld Photoshop of Affinity:


Ik heb een afbeelding gemaakt van 1600pixels breed. Breed genoeg voor de meeste webbrowsers:


Achtergrond maken met achtergrondafbeelding in WordPress met CSS class

Je kan een achtergrond maken met een achtergrondafbeelding door de volgende CSS code in je thema te plaatsen.
WP > Weergave > Customizer > Aangepaste CSS


.bg {
background-image: url("https://www.cursuswp.com/wp-content/uploads/achtergrond-maken-css-class-stijl-wordpress-achtergrondafbeelding-verloop-gradient.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}

Achtergrondafbeelding met CSS over de hele breedte van de browser

Voeg nog wat meer code toe aan je CSS, namelijk ‘cover’. Dan wordt de afbeelding beeldvullend.


.bg  {
background-image: url("https://www.cursuswp.com/wp-content/uploads/achtergrond-maken-css-class-stijl-wordpress-achtergrondafbeelding-verloop-gradient.jpg")    ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


Gradient kleurverloop maken als achtergrond met CSS

Gradient

Gradient specificeert het type kleurverloop dat je gaat instellen. Hoewel lineaire kleurverlopen het meest gebruikte type kleurverloop zijn voor achtergronden, kun je het ook instellen voor radiale kleurverlopen.

Color Stops & Colors

Voor een kleurverloopontwerp in CSS heb je minstens twee kleuren nodig om het kleurverloop te laten overgaan. Deze worden kleurstops genoemd omdat ze de code vertellen op welke punten elke kleur moet stoppen en beginnen langs het kleurverloop.

De syntax

De syntaxis is het belangrijkste onderdeel van uw codeerproces, want als uw zin niet werkt, werkt uw code ook niet. Laten we dus de syntaxis van verschillende gradiëntachtergronden afbreken.

Laten we het hebben over de achtergrondafbeelding voor een lineaire gradiëntachtergrond:
background-image: linear-gradient(color1,  color2);
Wat dacht je van een achtergrondafbeelding voor een radiaalverloop-achtergrond:
background-image: radial-gradient(color1, color2, color3);
Wil je meer kleuren? Voeg dan meer kleuren toe!
Wil je de percentages van je kleur aanpassen (hoe ver staan de kleuren uit elkaar)? Geef elke kleur een percentage zoals hieronder:
background-image: linear-gradient(color1 30%, color2 50%, color3 20%)


Voorbeeld verloop maken in met achtergrond in WordPress met CSS class stijl

Wil je de richting van uw lineaire gradiëntachtergrond aanpassen of de vorm van uw radiale lineaire gradiëntachtergrond veranderen? Voeg dan een paar van die richtingen in.
Voorbeeld:

background-image: linear-gradient(to right bottom, color1 30%,
color 2 50%, color 3 20%);

background-image: radial-gradient(circle, color1 30%,
color 2 50%, color 3 20%);

Richting kleurverloop achtergrond bepalen

Kleurverloop geleidelijk:


.bg-verloop {
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

Kleurverloop hard:


.bg-verloop-hard {
background: linear-gradient(117deg, rgba(184,184,184,1) 50%, rgba(0,204,0,1) 50%);
}


Tekstverloop maken met achtergrondgrondafbeelding met CSS

Maak een achtergrondafbeelding. Zoiets als dit:

Resultaat

Tekstverloop maken met afbeelding

Zo maak je dit. Plaats deze tekst met class op je website:


<h3 class="kleurverloop-demo">Tekstverloop maken met afbeelding</h3>

In je CSS plaats je deze tekst:


.kleurverloop-demo {
background-image: url(https://www.cursuswp.com/wp-content/uploads/verloop-gradient-achtergrondafbeelding-cursus-wordpress-handleiding-arthur-wentzel.png);
background-repeat: no-repeat;
background-clip: text;
background-position: left;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-position: left;
}

Voorbeelden verloopjes