Geeklog France

Open Source Content Management System

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 - 06:52 by ::Ben
 
::Ben - 06 février 2010 - 06:51

Trackback

Trackback URL for this entry: http://geeklog.fr/trackback.php/A-la-decouverte-des-ombres-CCS3

No trackback comments for this entry.

Catégories

GeekLog (26)
Plugins (29)
Thèmes (11)

User Functions

Download

Download Geeklog 1.6.1

Coming soon

jQuery plugin 1.0
Paypal plugin 1.1
FlashFader 1.0
Maps 1.0

On the air

Flickr 1.0

Twitter

  • Geeklog_Ben about 8 hours ago from API
    I updated the maps plugin demo page with the "Need directions?" feature. See this page http://geeklog.fr/staticpag...
  • Geeklog_Ben 03-08 12:31 from API
    Lot of new things or new versions to test for geeklog : twitter plugin, sitemap plugin, rrsaggregator, autoping, tinymce editor
  • Geeklog_Ben 03-08 10:26 from API
    I post from the twitter plugin v. 0.2.2 made by Mystrall-KK for Geeklog.
  • blainelang 03-06 22:38 from web
    Can't get Drupal.t() localization text to be searched by localization module or local client #drupal
  • Geeklog_Ben 03-03 16:39 from API
    Working on a coming Maps plugin for geeklog CMS. See demo page on http://geeklog.fr/staticpag...

En ligne

Guest Users: 7