Gradient og sløret tekst med CSS3

Så blev det vist også tid til, at jeg fik lavet et lille indlæg mere. Med CSS3 er der kommet en masse nye muligheder for at style sin tekst, og jeg vil derfor i dette linlæg vise jer et par stykker af dem.

Tekst med gradient:
Dette fungerer kun med webkit. Det er nok den bedaste måde at opnå denne effekt, da man også vil kunne markere og kopiere teksten på denne måde. Nedenfor ser du css strylingen der vil give denne effekt:

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Eksempel

Sløret tekst:

For at opnå en sløret tekst effekt bruger vi gennemsigtig farve kombineret med tekst-skygge.

.sloret {
   font-size: 72px;
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Eksempel

Hvis du ikke kan se effekterne, så er det sandsynligvis fordi din browser er forældet og ikke understøtter CSS3.