Saviez-vous qu'avec du CSS et un peu d'astuce, on peu créer de superbe effet de texte ?
Un police façon matrix ou strié, ou en dégradé, ou encore abîmée… Ces effet sont possible sur n'importe quel texte normal, juste avec un peu de css !

C'est tous simple, il suffit de positionner une image avec des zones transparente par dessus un texte. Ce patron agira comme filtre et ne laissera voir qu'une parti du texte ce qui donnera un bel effet.

Tout d'abord, l'html normal. Celui qui écrit votre texte

<div class="eh1"><span></span>HELLO WORLD !</div><div class="clear"></div>

Ce code se compose se compose de 2 div :

• La 1ere, contient un span vide. C'est lui qui va accueillir l'image que l'on va appliquer au texte. Elle contient aussi votre texte.
• La 2eme est vide, son seul but est d'appliquer le style “clear:left;” sans quoi, tout le reste de votre page aurais la même mise en page que la 1ere div.

Voici le CSS que l'ont applique :

<style type="text/css">
.eh1 {
    font-size:30px;
    font-weight: bold;
    margin:0;
    position: relative;
    overflow: hidden;
    float: left;
}
.eh1 span {
    position: absolute;
    width: 100%;
    height:100%;
    background: url(image.png);
}
.clear {
    clear:left;
}

Regardons .eh1 :

• les éléments font, font-weight et margin sont la mise en page de base que vous voulez donner a votre texte.

• On place cet élément de façon relative pour que le <span> qu'il contiennent soit positionné au bon endroit.

• En mettant overflow a hidden, on s'assure que même si l'image appliqué dans le <span> déborde, cela ne se verra pas.

• On note aussi un float:left. C'est la seule façon pour que l'élément prenne exactement la taille du texte qu'il contient. On aimerais pas que notre élément fasse 80 pixels de plus que le texte(cela impliquerais que l'image dépasse aussi le texte de 80 pixels)…

Passons au sélecteur .eh1 span qui correspond a notre <span> vide :

• La position relative place le span au bon endroit
• On lui applique en background notre image avec ses trou transparent.
• On remarque aussi que le width et le height sont a 100%. De cette façon, notre span recouvre l'intégralité du div.

Le dernier élément .clear n'est la que pour annuler le float:left précédemment placé.

Maintenant que vous avez la technique, il vous faut l'image.
La concevoir est assez simple. Prenez votre logiciel de retouche graphique et créer une image de 32*32 (ou plus, a votre guise).
Dessiner votre masque en blanc et enregistrer ça dans un format qui conserve la transparence (gif ou png).

Voici l'image utilisée pour l'exemple :

Idée originale lue sur http://www.khmerang.com/index.php?p=95

— iDo 15/12/2005 23:40