03 Jun, 2009

CSS effect op tekst

Categoriën: Color |Images |tekst |valid

Effecten geven op tekst is mogelijk met enkel en alleen CSS, je moet gewoon een beetje vindingrijk zijn. Door middel van een transparente PNG die een effect bevat en deze over de tekst te positioneren kan je de indruk wekken dat je tekst “iets speciaals heeft”.
Je hebt wel een afbeelding nodig (png) met transparantie, zoals volgend voorbeeld.

image

HTML

<h1>Effect op tekst<span></span></h1>

CSS

h1 {
    position:relative;
    color:#000;
    font-family: Georgia;
    float: left;
}
h1 span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:transparent url('images/image.png') repeat-x 0 0;
  }

Gerelateerde Snippets

1 Reaktie op "CSS effect op tekst"

Css Snippets » CSS effect op tekst 2

June 5th, 2009 at 08:43

1

[...] het vorige voorbeeld kunnen we het principe van effecten op tekst nog een beetje uitbreiden. Deze keer groter door een [...]

Reaktie formulier


Demo: CSS effect op tekst:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.