CSS tutorial: Anaglyfisk tekst-effekt

I denne CSS-tutorial kan du lære at lave en anaglyfisk tekst-effekt med elegant kode skrevet i CSS. Anaglyfiske billeder er røde, blå og sløret, og skal ses med de grimme 3D-briller – ja, nu ved du, hvad det er.

Anaglyfisk css tekst effekt

Demo af den anaglyfiske tekst-effekt

Se demo

Effekten kan laves på flere måder, men dette er den klart mest elegante måde at gøre det på. Rod dig endelig ikke ud i noget som minder om dette:

Meget dum ide

Gør ikke dette! Meget dum ide

Du skal ikke prøve at lave denne effekt, på den måde! Hvorfor? Fordi det er forkert opbygning af din XHTML/HTML kode, og det kan jeg ikke lide!

CSS-koden

I din .css-fil har du kun brug for to elementer: din header (H1) og en pseudoelementet :after

Headeren er din overskrift, som du nok ved. Her ser du koden for din header (h1) og dit pseudoelement (h1:after).

CSS-koden

CSS-koden

H1

Først ses H1-elementet, som får den blå farve med 50 % opacity.

Det skal positioneres relativt og skal fremstå som et inline- eller inline-block-element.

Skrifttypen og bogstavafstanden kan du ændre som du vil.

H1:after

Hvis du ikke kender :after pseudoelementet, så bruges det til at tilføje ekstra effekter efter et element (i dette tilfælde H1-elementet).

content-egenskabens værdi skal selvfølgelig afspejle teksten på din overskrift.

Derefter positionerer vi den værdi absolut, og sætter afstanden fra H1-elementet vha. left og top.

Og til sidst fortæller vi, at tekstfarven skal være rød med 50 % opacity

Husk at se demoen og bliv fan af os på facebook


Kunne du lide denne artikel, ville det gøre mig meget glad, hvis du gad at dele den med andre. Det giver mig motivation til at skrive.

— Morten Kaltoft

Skriv en kommentar