box-shadow : Safari 3 et + , Chrome 3 et + , FireFox 3.5 et + , Opéra 10.5 et + , Internet Explorer 9 beta et +
text-shadow : Safari 1.1 et + , Chrome 2 et + , FireFox 3.1 et + , Opéra 9.5 et + , Internet Explorer 10 et +
- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
- 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
- <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
- <head>
- <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
-
-
- <!-- Style CSS -->
- <link rel='stylesheet' type='text/css' href='ombrages-css3.css' />
-
-
-
- </head>
- <body>
-
-
-
-
-
-
-
-
-
- <!-- Javascript -->
-
- </body>
- </html>
- .ombre_css{
- float:left;
- margin:0 1% 20px 1%;
- width:48%;
- background-color:#aaa;
- text-align:center;
- }
-
- /* Ombrage externe en CSS3 n°1 */
- #ombre_css_1{
- /*
- Conseil : pour la lisibilité et la maintenance du site, organiser les propriétés CSS
- utilisant une sandbox de façon décroissante (Merci éric)
- */
-
- -webkit-box-shadow:5px 5px 5px #656565;
- -khtml-box-shadow:5px 5px 5px #656565;
- -moz-box-shadow:5px 5px 5px #656565;
- -ms-box-shadow:5px 5px 5px #656565;
- -o-box-shadow:5px 5px 5px #656565;
- box-shadow:5px 5px 5px #656565;
-
- /*
- Pour Internet Explorer 8 et inférieure :
- - Attribut "Color" : couleur du halo
- - Attribut "Strength" : taille de l'effet
- - Attribut "Direction" : orientation du flou en degré
- */
- filter:progid:DXImageTransform.Microsoft.Shadow(color='#656565', Direction=135, Strength=5);
- zoom:1;
-
- /* Complément CSS3 pour Internet Explorer, à télécharger sur http://css3pie.com/ */
- behavior:url(/PIE/PIE.htc);
- }
-
- /* Ombrage interne en CSS3 n°2 */
- #ombre_css_2{
- /*
- Les valeurs sont dans l'ordre suivant :
- - Ombre intérieure (inset) ou extérieur (laissez vide)
- - Décalage vers la droite
- - Décalage vers le bas
- - Taille du dégradé
- - Augmentation de la taille de l'ombre par rapport à l'élément de départ
- - Couleur du dégradé
- */
-
- /* coins arrondis pour Chrome, Safari, Android */
- -webkit-box-shadow:inset 5px 5px 5px 10px #656565;
- /* coins arrondis pour Konqueror */
- -khtml-box-shadow:inset 5px 5px 5px #656565;
- /* coins arrondis pour Firefox et Mozilla */
- -moz-box-shadow:inset 5px 5px 5px #656565;
- /* coins arrondis pour Internet Explorer */
- -ms-box-shadow:inset 5px 5px 5px #656565;
- /* coins arrondis pour Opera */
- -o-box-shadow:inset 5px 5px 5px #656565;
- /* coins arrondis par défaut */
- box-shadow:inset 5px 5px 5px 2px #656565;
-
- behavior:url(/PIE/PIE.htc);
- }
-
- /* Ombrage en CSS3 n°3 */
- #ombre_css_3{
- -webkit-box-shadow:-15px 15px 15px 10px #656565;
- -khtml-box-shadow:-15px 15px 15px 10px #656565;
- -moz-box-shadow:-15px 15px 15px 10px #656565;
- -ms-box-shadow:-15px 15px 15px 10px #656565;
- -o-box-shadow:-15px 15px 15px 10px #656565;
- box-shadow:-15px 15px 15px 10px #656565;
- behavior:url(/PIE/PIE.htc);
- }
-
- /* Ombrage sur les textes en CSS3 n°4 */
- #ombre_css_4{
- background-color:#fff;
- -webkit-text-shadow:5px 5px 5px #656565;
- -khtml-text-shadow:5px 5px 5px #656565;
- -moz-text-shadow:5px 5px 5px #656565;
- -ms-text-shadow:5px 5px 5px #656565;
- -o-text-shadow:5px 5px 5px #656565;
- text-shadow:5px 5px 5px #656565;
- }
-
- /* Ombrage multiple sur les textes en CSS3 n°5 */
- #ombre_css_5{
- margin-top:30px;
- background-color:#fff;
- -webkit-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
- -khtml-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
- -moz-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
- -ms-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
- -o-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
- text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
- }
-
- /* Ombrage pour faire des bords en CSS3 n°6 */
- #ombre_css_6{
- margin-top:30px;
- background-color:#fff;
- color:#fff;
- -webkit-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
- 1px 0 0 rgba(0, 0, 0, 0.8) ,
- 0 -1px 0 rgba(0, 0, 0, 0.8) ,
- 0 1px 0 rgba(0, 0, 0, 0.8);
- -khtml-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
- 1px 0 0 rgba(0, 0, 0, 0.8) ,
- 0 -1px 0 rgba(0, 0, 0, 0.8) ,
- 0 1px 0 rgba(0, 0, 0, 0.8);
- -moz-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
- 1px 0 0 rgba(0, 0, 0, 0.8) ,
- 0 -1px 0 rgba(0, 0, 0, 0.8) ,
- 0 1px 0 rgba(0, 0, 0, 0.8);
- -ms-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
- 1px 0 0 rgba(0, 0, 0, 0.8) ,
- 0 -1px 0 rgba(0, 0, 0, 0.8) ,
- 0 1px 0 rgba(0, 0, 0, 0.8);
- -o-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
- 1px 0 0 rgba(0, 0, 0, 0.8) ,
- 0 -1px 0 rgba(0, 0, 0, 0.8) ,
- 0 1px 0 rgba(0, 0, 0, 0.8);
- text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
- 1px 0 0 rgba(0, 0, 0, 0.8) ,
- 0 -1px 0 rgba(0, 0, 0, 0.8) ,
- 0 1px 0 rgba(0, 0, 0, 0.8);
- }