Les ombres avec le CSS3

Pour éviter les images décoratives et les découpes intempestives qui alourdissent la taille de votre site et gaspillent votre temps en intégration, il existe des propriétés comme box-shadow et text-shadow qui permettent la création d’ombrages sur les différents éléments de votre site. Cependant, certains anciens navigateurs ne reconnaissent pas encore ces propriétés nécessitant ainsi des adaptations personnalisées.

La propriété box-shadow

Dans le module « borders » de CSS3, la propriété CSS box-shadow a été incluse afin de permettre la génération d’une ombre portée sur tous les éléments HTML de votre page tel qu’il soit.
Ainsi, il vous est possible d’indiquer le décalage vertical, horizontal ainsi que la force du dégradé.

Bien évidemment, vous pourrez désigner la couleur.
Notant que box-shadow ne s’applique pas sur la bordure de l’élément, mais sur sa boîte, et que l’ombrage obtenu n’affecte en rien la taille de la boîte de l’élément.

Au niveau de la compatibilité, la propriété box-shadow ne peut être utilisé que sur les navigateurs modernes à savoir Chrome 10+, Firefox 4+, Internet Explorer 9+, Opera 10.5+ ,ainsi que sa version mobile 11+ et enfin Safari 5.1+. Pour les anciennes versions des navigateurs, la propriété doit être préfixée par -moz- pour les versions antérieures de Firefox 4, -webkit- pour les versions antérieures de Chrome 10, Safari 5.1 et Android.

avion

La propriété text-shadow

Concernant la propriété text-shadow, vous l’aurez sans doute deviné qu’il s’agisse d’ombrage au niveau d’un texte. Comme pour box-shadow, vous pourrez définir les décalages de l’ombrage ainsi que la couleur et la zone de flou.
Ces effets s’appliqueront dans l’ordre indiqué et pourront ainsi se recouvrir sans pour autant recouvrir le texte. L’ombrage obtenu avec text-shadow n’influe pas sur la taille de la boîte de texte.

Au niveau de la compatibilité,text-shadow, contrairement à sa consœur box-shadow n’est pas reconnue par Internet Explorer et même la version 8 qui ne reconnait pas un bon nombre de propriétés.
Cependant, la propriété s’adapte correctement sur Opera à partir de sa version 9.5. également.

Contrairement à box-shadow, text-shadow est une propriété finalisée donc ne nécessitant pas de préfixes.

text shadow

Voir les dégradés en CSS3

Répondre