Jeudi 13 septembre 2012

Avec l'iPhone 5 et les mises à jour d'iPod, Apple se repose sur ses acquis
  • 16/09
  • 2010
  • 14h26

CSS 3 : box-shadow

Difficulté : 3

  • Auteur : iNaphrayoo

La propriété box-shadow permet d'afficher une ou plusieurs ombres portées sous un éléments html. C'est un des styles les plus simples à mettre en place et posant le moins de soucis en terme de compatibilité navigateur.

La syntaxe box-shadow est compatible avec les moteurs de navigateur WebKit (Safari et Chrome), Gecko (Mozilla Firefox) et Presto (Opéra). Les différentes valeurs indiquent le décalage vertical et horizontal, l'étendue du dégradé et la couleur.

Tout comme la propriété border-radius, il faut cibler le moteur pour afficher l'effet :
Pour WebKit : -webkit-box-shadow
Pour Gecko : -moz-box-shadow
Pour les autres moteurs et certainement la spécification validée : box-shadow

La première valeur permet de faire varier le décalage horizontal :
-webkit-box-shadow: 0px 10px 10px #063;

box-shadow
La deuxième, le décalage vertical :
-webkit-box-shadow: 0px 10px 10px #063;

box-shadow
La troisième valeur permet la variation de l'étendu du dégradé de l'ombre :
-webkit-box-shadow: 0px 10px 10px #063;

box-shadow
La dernière valeur concerne la couleur et s'indique en code hexadécimal ou RVBa :
-webkit-box-shadow: 0px 10px 10px #063;

box-shadow

Pour aller plus loin, il est possible de combiner plusieurs ombres portées en séparent toutes leurs valeurs par des virgules. Voici le code de l'effet suivant :
-webkit-box-shadow: 0px 20px 50px #063, 20px 5px 50px #C60, -10px -10px 50px #09C;

box-shadow

Sur un navigateur n'étant pas capable d'afficher cet effet (IE6/7/8), vous n'aurez aucun problème tant que vous ne jouerez pas avec les marges. De même les bordures ou autres rajouts de styles donnant un effet intéressant avec une ombre-portée, ne donneront pas forcément le même effet sans ombre portée.

Maintenant que vous avez les bases, c'est à vous de jouer.

  • Cet article est rattaché aux tags :
  • CSS
  • Tutoriaux
  • Web
Copyright © 2005-2014 PomGraphik. Tous droits réservés.