WordPress - CSS Effecten

CSS Tekst Uitsnijden

Tekst over een afbeelding plaatsen is niet redelijk standaard. Een mooi effect zou zijn als we die tekst in een gekleurde achtergrond zouden kunnen plaatsen en dan de tekst uitgesneden zouden kunnen tonen, alsof we een soort van sticker op een foto plaatsen waarbij de tekst op die sticker “uitgeknipt” is:

Voorbeeld:

Welkom in Dover

Effect CSS-Codes

Hieronder vindt je de CSS-code welke we gebruikt hebben om dit effect te bewerkstelligen. Verander een aantal parameters in de CSS-code, klik op “Klik & Probeer het” en zie dan wat er gebeurd:

De truc zit in de CSS-code “mix-blend-mode”. Hiermee is het mogelijk om kleuren te laten mixen en daarmee voorgaand effect te bereiken.

De waardes die hier opgegeven kunnen worden zijn: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color of luminosity.

Probeer het door de waarde “screen” in voorgaande editor te vervangen door één van deze waardes.

Deze CSS-code kan ook meegeven worden aan een stand-alone afbeelding. Zie volgend voorbeeld en vervang om het effect te zien door één van de waardes hiervoor opgesomd.

Om meer van het effect te zien, wijzig in voorgaande CSS-code ook de achtergrondkleur van de img-container.

Let opde mix-blend-mode wordt niet ondersteund door de browsers Explorer en Edge.

Vragen & Info

Het stijlen van websites is een belangrijk onderdeel om je activiteiten er uit te laten springen. Wil je bepaalde onderdelen van je website door ons laten stylen, neem dan contact met ons op via: info@qwain.nl.

We geven ook trainingen om je alle in’s & out’s te leren om zelf je WordPress website volledig naar eigen wens vorm te geven. Voor meer informatie over deze training, bekijk onze: WordPress Design & Vormgeving Training.

Vragen over dit artikel, geef dan een reactie via onderstaand reactie-formulier.

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

Overige Artikelen


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *