Html - CSS3 Box Shadow

CSS3 Box Shadow

CSS3 Box Shadow

Par Mathieusub, publié le 29/01/2012 à 23:05:39

Bonjour à tous !

Aujourd'hui j'ai décidé de vous présenter la propriété "Box Shadow" (Ombre sur une boite) en CSS3. Celle-ci vous permettra de réaliser des ombres sur les éléments de type "block".

Voici un petit exemple d'utilisation :

.shadow {

  -moz-box-shadow:    3px 3px 5px 6px #ccc;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc;

  box-shadow:         3px 3px 5px 6px #ccc;

}

Comme vous pouvez le voir dans ce code CSS, j'ai mis trois lignes avec exactement les même paramètres.

Mais alors quelle est la différence entre "-moz-box-shadow", "-webkit-box-shadow", et "box-shadow" ? C'est en fait, une simple solution pour que le rendu soit le même sous tous les navigateurs internet.

Mozilla Firefox ("-moz-box-shadow" le préfixe "moz" pour mozilla) , Google Chrome, Internet Explorer, ect...

Maintenant, nous allons nous intéresser à la suite de ces lignes : "3px 3px 5px 6px #ccc".

Voici donc dans l'ordre à quoi ils correspondent :

1. Le premier 3px correspond au décalage horizontale de l'ombre, s'il est positif cela mettra l'ombre du "block" à droite, tandis qu'un décalage négative mettra l'ombre du "block" à gauche.

2. Le deuxième 3px correspond au décalage verticale de l'ombre, s'il est positif cela mettra l'ombre du "block" au-dessous, tandis qu'un décalage négative mettra l'ombre du "block" au-dessus.

3. Le troisième paramètre, ici de 5px correspond au blur
(facultatif), si vous mettez 0px l'ombre sera aiguisée, et à l'inverse plus le nombre de pixel sera haut plus l'ombre sera flou.

4. Le quatrième paramètre, ici de 6px correspond au rayon de diffusion. Plus il sera élevé, plus la taille de l'ombre sera grande. (Par défaut le rayon est de 0px)

5. Et le dernier paramètre correspond tout simplement au code couleur HTML.

Voici donc le résultat visuel de ce bout de code CSS :

Dans le même style, voici un exemple avec une ombre intérieur ("inner") :

.shadow {

   -moz-box-shadow:    inset 0 0 10px #000000;

   -webkit-box-shadow: inset 0 0 10px #000000;

   box-shadow:         inset 0 0 10px #000000;

}

Attention, cette propriété n'est pas supporté par tous les navigateurs internet, voici donc les supports de base :

- Firefox : 4.0 (2.0)
- Chrome : 4.0, 0.2 -webkit
- Internet Explorer : 9.0
- Opéra : 10.5
- Safari : 5.0, 3.0 -webkit

Voilà, j'espère que mon tutoriel vous servira !
(Si vous le souhaitez, un exemple est téléchargeable en bas du site)
A bientôt sur Webtutoriaux :-)

Téléchagement

Téléchargement du fichier source

exemple.html - 659 octets

Vous devez être connecté pour télécharger ce fichier zip

2 commentaires

Par le 01/03/2012 à 10:41:31 Note : 3/5

Bonjour,

Il s'agit d'une propriété et non d'une fonction. Les fonctions CSS ont une autre utilité.

Les préfixes vendeurs (-moz-, -webkit-, etc.) n'ont pas pour rôle d'offrir un rendu identique sur chaque navigateur, mais de rendre fonctionnelle une propriété non standardisée. Et même lorsque celle-ci est standardisée le rendu n'est quasiment jamais identique.

Ce sont juste des détails de vocabulaire, c'est juste pour préciser les choses.

Ne pas oublier de dire qu'il s'agit de CSS 3 (en plus ce sera plus vendeur pour le tuto :D)

Bonne continuation.