Les ombres en CSS3 avec box-shadow

Ombre CSS3 box-shadow

Cet article a été écrit en 2010. Le web évoluant vite, il est possible que certains points soient maintenant obsolètes !

Ce tutoriel a pour but de détailler l'utilisation de la nouvelle propriété CSS3 box-shadow. Cette puissante propriété permet des réaliser de très beaux effets de volume ou de creux tout en conservant un code d'un poids minimal pour la page, et sans utiliser la moindre image.

Avant de commencer

Afin d'exploiter les possibilités de la propriété CSS3 box-shadow, nous allons tout d'abord créer un simple div : Avec les styles suivants : Nous allons appliquer la propriété box-shadow à cet élément. Cependant, afin de ne pas alourdir le code au fil de cet exemple, je n'utiliserai pas les préfixes propres à chaque navigateur, c'est à dire que les exemples seront écrits avec box-shadow, et non pas -moz-box-shadow, ni -webkit-shadow. Ce qui signifie que si vous voulez tester ces propriétés dans un navigateur particulier, vous devrez les rajouter.

Sur ce point, il est important de préciser qu'il y a un ordre à respecter lorsque vous utilisez ces préfixes. Comme la finalité des navigateurs est d'implémenter ces propriétés sans préfixes, si vous souhaitez que votre design soit stable pour les années à venir, vous devez également ajouter la propriété non-préfixée à la suite des propriétés préfixées.

C'est à dire que toutes vos propriétés CSS3 doivent être écrites sous la forme : Lorsque les propriétés CSS3 en questions seront parfaitement supportées, vous pourrez n'écrire que : C'est donc sous cette forme que les exemples suivants seront écrits.

Les différents paramètres

Commençons tout d'abord par analyser les différents paramètres que l'on doit fournir à box-shadow afin qu'elle fonctionne correctement.

border-radius

"Et si j'ai appliqué un border-radius sur mon élément, l'ombre sera arrondie aussi ?"

Et oui ! La forme de l'ombre est calculée à partir de la forme de l'élément, donc si les coins de cet élément sont arrondis, l'ombre le sera également. Si cette particularité n'est pas très intéressante dans le cas des ombres extérieures (sans inset), elle est en revanche essentielle dans le cas d'une ombre intérieure, afin que celle-ci épouse bien la forme de l'élément. Ombre CSS3 box-shadow

Ombres multiples

Il est possible d'appliquer plusieurs ombres sur un même élément. Pour cela il suffit de les séparer par des virgules.

Par exemple : Le fait de pouvoir combiner différentes ombres permet de produire d'excellentes illusions de volume. La prochaine partie vous apprendra à réaliser les deux effets les plus courants. Ombre CSS3 box-shadow

Effet de volume

Un effet de volume se réalise avec 2 ombres : Ombre CSS3 box-shadow Il est également efficace d'utiliser une couleur différente pour l'intérieur de l'élément. Dans le cas de cet effet de volume, on veut que l'élément ressorte, et qu'il soit donc plus exposé à la lumière. Une couleur plus claire est donc plus appropriée.

Les ombres peuvent avoir un décalage horiontal, mais je préfère personnellement lorsqu'il n'y en a pas, ce qui correspond davantage à un design moderne épuré.

Voici le code qui permet de réaliser cet effet :

Effet de creux

Un effet de creux se réalise avec 2 ombres : Ombre CSS3 box-shadow Pour cet effet on utilisera pour l'intérieur de notre élément une couleur plus foncée, puisqu'en toute logique, un creux est moins exposé au soleil. Encore une fois je préfère ne pas utiliser de décalage horizontal.

Voici le code de cet effet : Vous pouvez retrouver une démonstration de ces effets ici : Démonstration de la propriété box-shadow en CSS3.

Enfin, pour les flemmards, sachez qu'il existe de très nombreux générateurs de code CSS3 qui gèrent la propriété box-shadow. En voici quelques-uns : Cela dit, cette propriété est réellement simple à utiliser, et utiliser des générateurs dans ce cadre, je trouve ça un peu dommage. Dans tous les cas j'espère que ce tutoriel aura éveillé votre créativité !

Posted on