A la découverte des ombres en CSS3

Si vous n'avez jamais observé des effets d'ombres réalisée en CSS3, c'est que simplement votre navigateur ne les supporte pas encore.  Pour moi la première fois c'etait l'ombre d'un texte, lors d'une sélection à la souris, qui avait attirée mon attention.

Voici un petit tour d'horizon de deux déclarations qui vont vous permettre d'ajouter une ombre à un block ou à un texte.



Les ombres en CSS3

Une ombre derrière un élément block

Pour réaliser une ombre sur un élément de type block (<p>,<div>,<table>...) nous pouvons utiliser la class suivante pour laquelle nous spécifions pour chaque type de navigateur la règle précédée du préfixe correspondant suivie par une couleur et 4 longueurs ou seulement 3 pour le webkit :

 

<style type="text/css">

.shadow {

  box-shadow: #999 3px 3px 4px 1px;

  /* Mozilla/Firefox/Gecko */
  -moz-box-shadow: #999 3px 3px 4px 1px;

  /* Webkit (Safari/Chrome) */
  -webkit-box-shadow: #999 3px 3px 4px;
}

</style>

 

La couleur de l'ombre est spécifiée par sa valeur héxadécimale #999 ainsi que son décalage sur l'axe horizontal (offset-xhorizontal), son décalage sur l'axe vertical (offset-yl), le rayon du flou (blur-radius) qui proportionnellement augmente l'étalement de l'ombre, et le rayon d'étendue si elle est supportée par le navigateur.

 Voir la démo | See demo

 

Une ombre derrière un texte

Pour un élément de type text, nous utiliserons la déclaration suivante :

 
<style type="text/css">

.text-shadow {

  text-shadow: #666 2px 2px 2px;
}
</style> 

La couleur de l'ombre est là aussi spécifiée par sa valeur héxadécimale #666 suivie du décalage sur l'axe horizontal (offset-x), puis vertical (offset-y) et enfin du rayon du flou (blur-radius).

 Voir la démo | See demo

A la découverte des ombres en CSS3
comments (1)
The following comments are owned by whomever posted them. This site is not responsible for what they say.
A la découverte des ombres en CSS3

A la recherche de documentation sur les ccs j'ai découvert 3 pages très intéressantes qui peuvent être sources d'inspiration :

Edited on 06 février 2010 - 17:52 by Ben
 
Ben - 06 février 2010 - 17:51

Download geeklog

Last available version 2.1

Change language

Categories

Events

samedi 23-août -
dimanche 24-août

User Functions





Don't have an account yet? Sign up as a New User!

Lost your password?

Visual Theme Switcher

Test out available themes by selecting from one of the 4 available themes or give the Visual Switcher a try:

Annonces

En ligne

Guest Users: 10