NemProgrammering.dk logo

Skygge og sløret tekst med CSS3

  Skrevet af: Redaktionen     01-12-2013     Skrevet i: CSS og CSS3

Et af de gode tiltag i CSS3 er muligheden for at lave mere grafisk-styling direkte gennem koden. Det betyder, at du ikke længere behøver at investere i dyre billedebehandlingsprogrammer, hvis du ønsker at give dine tekster, billeder eller tabeller et ekstra pift.

Alt hvad du behøver for at udnytte disse muligheder, er at lære et par nye css atributter at kende. Det vil jeg hjælpe dig med i denne artikel, så hvis det har interesse, ja så læser du bare videre…

Sløret tekst med CSS3:

Lad os først tage et kig på koden:

.sloeret {
   font-size: 35px; 
   color: transparent;
   text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

Det først jeg har gjort, er at sætte farven på min tekst til gennemsigtig. Herefter bruger jeg text-shadow attributten. De første to værdier (0 0) angiver, hvor skyggen skal placeres i forhold til teksten. Den første værdi flytter skyggen op eller ned ad x-aksen, mens den anden værdi flytter skyggen frem eller tilbage på y-aksen.

Da jeg er interesseret i en sløret styling og ikke en skygge, sætter jeg dem begge til 0, så de placeres direkte under teksten. Herefter angiver jeg hvor tyk skyggen skal være – i dette tilfælde 6px. Man kan også kalde tykkelsen på skyggen for skyggens “spredning”. rgba() angiver selvfølgelig farven på skyggen. CSS koden ovenfor giver følgende resultat:

Sløret tekst

Tekst-skygge med CSS3

Her er fremgangsmåden næsten den sammen:

.skygge {
   font-size: 35px; 
   color: #000;
   text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

Denne gang har jeg dog fjernet den gennemsigtige farve og istedet erstattet den med sort. Derudover har jeg forskudt skyggen lidt til venstre (ad y-aksen), og lidt nedad (af y-aksen). Dette giver den skygge-effekt som vi er ude efter:

Tekst med skygge

Prøv selv at lege lidt med skygge-forskydningen, farven og skygge-spredningen ved at ændre i værdierne. Du vil oplevet at det er super let at håndtere, og du kan faktisk også bruge det på andre HTML elementer såsom divs og billeder.

Spørgsmål og kommentarer

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.