Faire des ombres en CSS3.

css3

Cette fois-ci, nous allons voir comment réaliser des ombres sur votre texte ou vos div. Les ombres permettent de donner beaucoup de style à votre page. En effet, les pages sans ombres donnent un effet très plat à votre site. Rajouter des ombres pourra donner la sensation que votre texte ou div se trouve en avant par rapport au reste de la page ou bien en arrière comme une sorte de renfoncement dans votre page.

Ombres externes :

Pour réaliser une ombre externe, il vous faut utiliser l’attribut box shadow.

L'attribut fonctionne comme cela:

box-shadow: [Décalage horizontal] [Décalage vertical] [Effet flou] [Étendue de l ombre] [Couleur de l ombre];

-Pour le décalage horizontal, une valeur en pixel positive donnera un effet vers la droite, une valeur négative donnera un effet vers la gauche.
-Pour le décalage vertical, une valeur en pixel positive donnera un effet vers le bas, une valeur négative donnera un effet vers le haut.
-L'effet flou se défini aussi en pixel. Plus vous mettrez de pixel, plus ce sera fou. Cet effet n'est pas obligatoire
-L'étendue de l'ombre, encore en pixel, vous ajustera l'étendu de l'ombre ! Cet effet n'est aussi pas obligatoire.
-Enfin pour la couleur, choisissez celle qui vous plait.

Exemple de box-shadow externe:

.shadowbox
{
width:300px;
height:100px;
border:1px solid black;
background-color:white;
box-shadow: 10px 10px 5px 2px #000000;
}

 

La fonction shadow-box est compatible avec les récents navigateurs. Pas besoin donc de mettre de webkits pour cette fonction.

Ombres internes:

Si vous avez compris comment faire un ombre interne, l'ombre externe est à votre portée !
Il suffit de rajouter l'attribut inset a votre fonction.

Exemple de box-shadow interne:

.shadowboxinset
{
width:300px;
height:100px;
background-color:white;
box-shadow: 2px 2px 5px 1px #888888 inset;
}

 

Vous pouvez aussi ajouter plusieurs ombres sur un même élément en mettant une virgule à la fin de votre première ombre et en insérant les paramètres de la deuxième ombre.

Exemple de double box-shadow interne:

box-shadow: 2px 2px 5px 1px #888888 inset, -2px -2px 5px 1px #888888 inset;

Ombre sur du texte:

Pour mettre de l'ombre sur du texte, au lieu de mettre la fonction box-shadow, utilisez la fonction text-shadow avec exactement les mêmes attributs sauf l'attribut "étendue de l'ombre".
Attention la fonction text-shadow ne fonctionne pas sur IE.

Exemple de text shadow:

.textshadow
{
text-shadow: 2px 2px 1px #000000;
}

Texte avec une ombre

Et voilà pour les ombres ! Le CSS 3 c'est vraiment facile non ? Le CSS en général est un langage simple, si vous le maîtrisez, vous pourrez créer vous même le site de vos rêves avec WordPress.

Il vous faudra choisir le thème qui vous plait et modifier le CSS pour le personnaliser.

Laisser un commentaire