Ombrages en CSS 3

Les ombrages sur les textes et les objets donnent la sensation qu’ils ont du volume alors qu’en réalité ils restent en 2D.

Avant, pour obtenir ces ombres, il fallait retoucher les images ou les textes. Il fallait ainsi avoir un logiciel de retouche mais aussi savoir s’en servir.

Maintenant, avec l’arrivée de CSS 3, on peut le faire directement via les feuilles de style. Tout se fait dans le code, il n’y a plus des dizaines de fichiers à retoucher manuellement.

De plus, en faisant les ombres en CSS 3 on garde les textes et on ne les transforme pas en images. Or, pour le référencement, il est plus intéressant d’avoir du texte que des images.

Les différents navigateurs

Pour surfer sur Internet et visiter les milliards de sites disponibles sur la toile nous devons utiliser un navigateur. Il existe différents navigateurs que tout un chacun peut utiliser en l’ayant au préalable téléchargé.

Ainsi, nous pouvons utiliser les navigateurs suivants :
– Internet Explorer : sur PC il est généralement déjà installé quand vous l’achetez
– Mozilla Firefox
– Google Chrome
– Safari : vous le trouverez déjà installé sur les appareils Apple.
– Opera

Pour ces navigateurs il existe des suffixes à utiliser en CSS :
– Mozilla Firefox : -moz-
– Safari et Chrome : -webkit-
– Opéra et Internet Explorer : pas de préfixe

Pour les toutes dernières versions des navigateurs on n’est normalement pas obligé d’utiliser ces suffixes mais il n’y a malheureusement pas tout le monde qui met à jour son navigateur. Ainsi, pour être sûr qu’une grande majorité voit ces effets il vaut encore mieux utiliser ces suffixes.

Comment faire ces ombrages ?

Je vais vous expliquer simplement comment faire :

Etape 1 : Attribuer une classe (class= »X ») ou un id (id= »X ») à l’objet ou le texte où vous aimeriez qu’il y ait une ombre.

Etape 2 : Déclarer cette classe ou cet id dans la feuille de style de votre site
– déclaration de classe : .X {}
– déclaration d’id : #X {}

Etape 3 : Une fois déclaré vous pouvez ajouter le code CSS entre les accolades :
– Si c’est un texte on utilisera la syntaxe « text-shadow » :
.X {text-shadow: 1px 2px 3px #000;}
– Si c’est un objet on utilisera la syntaxe « box-shadow » :
.X {box-shadow: 1px 2px 3px #000;}

Plus d’indications sur la syntaxe à utiliser

Pour les ombrages d’objets il faut ajouter le suffixe du navigateur :
– Mozilla : .X {-moz-box-shadow: 1px 2px 3px #000;}
– Safari et Chrome : .X {-webkit-box-shadow: 1px 2px 3px #000;}

Que signifie le « 1px 2px 3px #000; » ?

Divisons cette syntaxe en 4 : A B C D.

Le A correspond à « 1px ».
Le B correspond à « 2px ».
Le C correspond à « 3px ».
Le D correspond à « #000 ».

Le A indique le décalage horizontal vers la droite.
Le B indique le décalage vertical vers le bas.
Le C indique la force du dégradé de l’ombre.
Le D indique la couleur de l’ombre.

Et voici ce que donne notre exemple « 1px 2px 3px #000; » :

Exemple de texte avec ombrage

Exemple d’image avec ombrage : – – – – – – – – – – – – – – – – – – – – – – – – – – – – >

Ceci est un article expliquant brièvement et simplement comment les ombrages fonctionnent avec CSS 3. Pour des informations plus complètes vous trouverez pleins de bons tutoriels sur Internet.

par Marine Hollner