NetPlusMédia - Les ombrages en CSS3
NetPlusMédia

Les ombrages en CSS3

Retour

Compatibilités


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 +

ombrages-css3.html

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  2. 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
  4. <title>Les ombrages en CSS3</title>
  5. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  6.  
  7.  
  8. <!-- Style CSS -->
  9. <link rel='stylesheet' type='text/css' href='ombrages-css3.css' />
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. <div class='ombre_css' id="ombre_css_1">Ombrage externe en CSS3 n&deg;1</div>
  17.  
  18. <div class='ombre_css' id="ombre_css_2">Ombrage interne en CSS3 n&deg;2</div>
  19.  
  20. <div class='ombre_css' id="ombre_css_3">Ombrage en CSS3 n&deg;3</div>
  21.  
  22. <div class='ombre_css' id="ombre_css_4">Ombrage sur les textes en CSS3 n&deg;4</div>
  23.  
  24. <div class='ombre_css' id="ombre_css_5">Ombrage multiple sur les textes en CSS3 n&deg;5</div>
  25.  
  26. <div class='ombre_css' id="ombre_css_6">Ombrage pour faire des bords en CSS3 n&deg;6</div>
  27.  
  28.  
  29. <!-- Javascript -->
  30.  
  31. </body>
  32. </html>

ombrages-css3.css

  1. .ombre_css{
  2. float:left;
  3. margin:0 1% 20px 1%;
  4. width:48%;
  5. background-color:#aaa;
  6. text-align:center;
  7. }
  8.  
  9. /* Ombrage externe en CSS3 n°1 */
  10. #ombre_css_1{
  11. /*
  12.   Conseil : pour la lisibilité et la maintenance du site, organiser les propriétés CSS
  13.   utilisant une sandbox de façon décroissante (Merci éric)
  14.   */
  15.  
  16. -webkit-box-shadow:5px 5px 5px #656565;
  17. -khtml-box-shadow:5px 5px 5px #656565;
  18. -moz-box-shadow:5px 5px 5px #656565;
  19. -ms-box-shadow:5px 5px 5px #656565;
  20. -o-box-shadow:5px 5px 5px #656565;
  21. box-shadow:5px 5px 5px #656565;
  22.  
  23. /*
  24.   Pour Internet Explorer 8 et inférieure :
  25.   - Attribut "Color" : couleur du halo
  26.   - Attribut "Strength" : taille de l'effet
  27.   - Attribut "Direction" : orientation du flou en degré
  28.   */
  29. filter:progid:DXImageTransform.Microsoft.Shadow(color='#656565', Direction=135, Strength=5);
  30. zoom:1;
  31.  
  32. /* Complément CSS3 pour Internet Explorer, à télécharger sur http://css3pie.com/ */
  33. behavior:url(/PIE/PIE.htc);
  34. }
  35.  
  36. /* Ombrage interne en CSS3 n°2 */
  37. #ombre_css_2{
  38. /*
  39.   Les valeurs sont dans l'ordre suivant :
  40.   - Ombre intérieure (inset) ou extérieur (laissez vide)
  41.   - Décalage vers la droite
  42.   - Décalage vers le bas
  43.   - Taille du dégradé
  44.   - Augmentation de la taille de l'ombre par rapport à l'élément de départ
  45.   - Couleur du dégradé
  46.   */
  47.  
  48. /* coins arrondis pour Chrome, Safari, Android */
  49. -webkit-box-shadow:inset 5px 5px 5px 10px #656565;
  50. /* coins arrondis pour Konqueror */
  51. -khtml-box-shadow:inset 5px 5px 5px #656565;
  52. /* coins arrondis pour Firefox et Mozilla */
  53. -moz-box-shadow:inset 5px 5px 5px #656565;
  54. /* coins arrondis pour Internet Explorer */
  55. -ms-box-shadow:inset 5px 5px 5px #656565;
  56. /* coins arrondis pour Opera */
  57. -o-box-shadow:inset 5px 5px 5px #656565;
  58. /* coins arrondis par défaut */
  59. box-shadow:inset 5px 5px 5px 2px #656565;
  60.  
  61. behavior:url(/PIE/PIE.htc);
  62. }
  63.  
  64. /* Ombrage en CSS3 n°3 */
  65. #ombre_css_3{
  66. -webkit-box-shadow:-15px 15px 15px 10px #656565;
  67. -khtml-box-shadow:-15px 15px 15px 10px #656565;
  68. -moz-box-shadow:-15px 15px 15px 10px #656565;
  69. -ms-box-shadow:-15px 15px 15px 10px #656565;
  70. -o-box-shadow:-15px 15px 15px 10px #656565;
  71. box-shadow:-15px 15px 15px 10px #656565;
  72. behavior:url(/PIE/PIE.htc);
  73. }
  74.  
  75. /* Ombrage sur les textes en CSS3 n°4 */
  76. #ombre_css_4{
  77. background-color:#fff;
  78. -webkit-text-shadow:5px 5px 5px #656565;
  79. -khtml-text-shadow:5px 5px 5px #656565;
  80. -moz-text-shadow:5px 5px 5px #656565;
  81. -ms-text-shadow:5px 5px 5px #656565;
  82. -o-text-shadow:5px 5px 5px #656565;
  83. text-shadow:5px 5px 5px #656565;
  84. }
  85.  
  86. /* Ombrage multiple sur les textes en CSS3 n°5 */
  87. #ombre_css_5{
  88. margin-top:30px;
  89. background-color:#fff;
  90. -webkit-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
  91. -khtml-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
  92. -moz-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
  93. -ms-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
  94. -o-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
  95. text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f;
  96. }
  97.  
  98. /* Ombrage pour faire des bords en CSS3 n°6 */
  99. #ombre_css_6{
  100. margin-top:30px;
  101. background-color:#fff;
  102. color:#fff;
  103. -webkit-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
  104. 1px 0 0 rgba(0, 0, 0, 0.8) ,
  105. 0 -1px 0 rgba(0, 0, 0, 0.8) ,
  106. 0 1px 0 rgba(0, 0, 0, 0.8);
  107. -khtml-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
  108. 1px 0 0 rgba(0, 0, 0, 0.8) ,
  109. 0 -1px 0 rgba(0, 0, 0, 0.8) ,
  110. 0 1px 0 rgba(0, 0, 0, 0.8);
  111. -moz-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
  112. 1px 0 0 rgba(0, 0, 0, 0.8) ,
  113. 0 -1px 0 rgba(0, 0, 0, 0.8) ,
  114. 0 1px 0 rgba(0, 0, 0, 0.8);
  115. -ms-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
  116. 1px 0 0 rgba(0, 0, 0, 0.8) ,
  117. 0 -1px 0 rgba(0, 0, 0, 0.8) ,
  118. 0 1px 0 rgba(0, 0, 0, 0.8);
  119. -o-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
  120. 1px 0 0 rgba(0, 0, 0, 0.8) ,
  121. 0 -1px 0 rgba(0, 0, 0, 0.8) ,
  122. 0 1px 0 rgba(0, 0, 0, 0.8);
  123. text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) ,
  124. 1px 0 0 rgba(0, 0, 0, 0.8) ,
  125. 0 -1px 0 rgba(0, 0, 0, 0.8) ,
  126. 0 1px 0 rgba(0, 0, 0, 0.8);
  127. }

Démonstration

Les ombrages en CSS3
Ombrage externe en CSS3 n°1
Ombrage interne en CSS3 n°2
Ombrage en CSS3 n°3
Ombrage sur les textes en CSS3 n°4
Ombrage multiple sur les textes en CSS3 n°5
Ombrage pour faire des bords en CSS3 n°6
Plan du site - Contact - Google+ - FaceBook - Twitter