Astuces ⇒ HTML CSS facebook twitter youtube

Astuces CSS3 ⇒ & Créer des ombres sur des div et du texte



Créer des ombres sur des div et du texte avec La propriété box-shadow

 

La propriété box-shadow doit recevoir plusieurs valeurs (les deux premières étant obligatoires) :

  1.     Une valeur de décalage horizontal
  2.     Une valeur de décalage vertical
  3.     Une valeur pour l'effet flou
  4.     Une valeur l'étendue de l'ombre
  5.     La couleur de l'ombre.
 

Fonctionne avec :

 
   Chrome 10, Safari 3.2
    Firefox 3.6, SeaMonkey
    MSIE 9+
    Opera 10.6
 

 


Code (x)html
<div class="ombre1">    <p>    Lorem ipsum dolor sit amet, consectetur adipiscing elit.     Mauris vulputate laoreet urna. Integer magna.     Donec facilisis lectus sed quam.     Curabitur sit amet lacus id lacus facilisis venenatis.    </p>  </div>  

Codes CSS
.ombre1
 {  background-color:#C0C0C0;
  border:1px solid gray; 
 padding:5px; 
 box-shadow:2px 2px 10px gray;  
 -moz-box-shadow:2px 2px 10px gray;  
-webkit-box-shadow:2px 2px 10px gray; 
 }  

Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate laoreet urna. Integer magna. Donec facilisis lectus sed quam. Curabitur sit amet lacus id lacus facilisis venenatis.


Exemple 2

On peut aussi rajouter la valeur inset qui va ombrer l'intérieur en donnant un effet de relief en creux.

.ombre2 {
background-color:#C0C0C0; border:1px solid gray; padding:5px; box-shadow:2px 2px 10px gray inset; -moz-box-shadow:2px 2px 10px gray inset; -webkit-box-shadow:2px 2px 10px gray inset; }

Résultat


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate laoreet urna. Integer magna. Donec facilisis lectus sed quam. Curabitur sit amet lacus id lacus facilisis venenatis.


Déclarer plusieurs ombres

Oon peut déclarer plusieurs ombres à un élément.

.ombre3 { 
 background-color:#C0C0C0;
padding:5px;
box-shadow:12px 12px 21px gray,
-7px -7px 7px #F00;
/*#F00 c'est le rouge */
     }  

Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate laoreet urna. Integer magna. Donec facilisis lectus sed quam. Curabitur sit amet lacus id lacus facilisis venenatis.



Ombrer du texte

Contrairement à box-shadow, text-shadow n'est pas implémenté dans Internet Explorer...

Sinon, aucun besoin de préfixes propriétaires et, hormis pour l'étendue qui n'existe pas, même principe que box-shadow pour les valeurs à lui attribuer.


Code (x)html
<p class="text1">7 ASTUCES </p>   

Code CSS
.text1{
text-shadow: 5px 5px 5px gray;
font-family: Georgia;
font-size: 36px;
} 

Résultat

7 ASTUCES

Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces