Text-shadow | Schaduw voor je teksten

Text-shadow is een nieuwe property in CSS3, voorheen was het wel mogelijk om een schaduw achter je teksten te krijgen dit kon dan alleen via een javascript of met het gebruik van afbeeldingen.

Het gebruik van text-shadow is heel erg simpel, en er wordt niks aan extra javascript bestanden of afbeeldingen ingeladen. Hierdoor is je website uiteindelijk sneller.

Hoe werkt het

text-shadow: 1px 1px 2px #000;

De syntax werkt als volgt:

  1. Het eerste getal is voor de horizontale offset
  2. Het tweede getal wordt gebruikt voor de verticale offset
  3. En voor de hoeveelheid blur gebruik je het derde getal
  4. En dan rest natuurlijk nog de kleur van de schaduw

Meerdere kleuren

Je kunt ook meerdere kleuren tegelijkertijd gebruiken, dit gaat als volgt.

text-shadow: 1px 1px 2px #000, -1px -1px 2px #fff;

De volgorde maakt in dit geval niet zo uit. De mogelijkheden hiermee zijn echter eindeloos, zo kun je bijvoorbeeld een tekst vlammen geven doormiddel van schaduw. Dit vergt uiteraard wel wat oefening met CSS3 text-shadow.

Browser support

Support

Support

no-support

Support

Support

Vorige Portfolio item

Meer nieuws items

Vorige Portfolio item

Nieuws