Table des matières
Niveau
..........
En rapport...

Introduction

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 !

Principe

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.

Exemple

HELLO WORLD !
Deviens:
HELLO WORLD !

Explication

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

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

Ce code se compose se compose de 2 div :


Voici le CSS que l'ont applique :

css
<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 :

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

Sous opéra, le height:100% ne fonctionne pas.
La solution est de mettre height:6em.
Ceci permet de positionner l'image sur une hauteur de 6 lignes. C'est la que l'overflow:hidden prend tous sont sens.

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

L'image

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).

Sous IE pour que le png soit transparent, il faut l'enregistrer au format 8bits !

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

D'autres exemples

HELLO WORLD !
HELLO WORLD !
HELLO WORLD !

Source

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


iDo 15/12/2005 23:40