• 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 08/01/2018

Le côté obscur de nos éléments

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Ha, les ombres. Quel vaste sujet dans le domaine du webdesign !

Elles apportent un plus non négligeable et un certain cachet à nos pages : si elles sont bien utilisées, appliquer des ombres ajoute un effet de profondeur et un aspect professionnel.

Le plus souvent, les ombres sont affichées à l'aide d'images, ce qui demande donc au navigateur du visiteur de charger des ressources supplémentaires. Le défi étant par la suite de placer correctement ces images afin de ne pas rater cet effet d'ombrage...

Avec CSS3, ce temps est désormais révolu ! La nouvelle norme nous permet l'utilisation de propriétés permettant de créer des ombres automatiquement.

Aller, faisons toute la lumière sur les ombres !
(Oui, elle était facile celle-là :-° )

De l'ombre sur nos conteneurs

La propriété qui fait tout le travail à notre place s'appelle box-shadow. Pour l'utiliser, il est nécessaire de lui fournir cinq valeurs :

  • Le décalage de l'ombre sur l'axe des abscisses.

  • Le décalage de l'ombre sur l'axe des ordonnées.

  • Le rayon de flou.

  • La distance de l'ombre par rapport à l'élément (pour donner l'impression que ce dernier est plus ou moins éloigné de notre page).

  • La couleur de l'ombre.

Un petit schéma pour détailler ces valeurs : :)

Image utilisateur

La propriété box-shadow est donc très simple à utiliser. Faites juste attention à bien séparer chaque valeur par un espace !

Notez également que les valeurs définissant le rayon de flou et la distance de l'ombre sont facultatives : il est tout à fait possible de ne pas les renseigner du tout !

div
{
    /* Peu importe le reste du code */
    box-shadow: -25px -20px grey;
}

Essayer !

Le dernier paramètre de la propriété est une couleur. Jusque-là, on a utilisé grey mais, bien entendu, on peut utiliser n'importe quelle définition de couleur !
Un petit rappel du chapitre précédent, ça vous dit ? :D

div
{
    /* On peut utiliser n'importe quelle définition
    de couleur, y compris celles jouant avec l'opacité ! */
    box-shadow: 20px 10px 10px 0 hsla(180,80%,40%,0.8);
}

Essayez de vous représenter le résultat de ce code avant de l'essayer. ;)

Essayer !

Les possibilités de box-shadow sont déjà assez énormes, mais que diriez-vous si je vous apprenais qu'on peut lui préciser un autre paramètre ?

Ajouter le mot-clef inset juste après la définition de la couleur permet en effet de faire de l'ombre une ombre interne.
Dans le cas d'une ombre interne, le comportement des deux premiers paramètres change un peu :

  • Le premier paramètre indique alors la largeur de l'ombre du côté vertical. Si cette valeur est positive, elle sera collée contre le côté gauche de notre élément. Si elle est négative, elle sera contre le côté droit.

  • Le second paramètre indique la hauteur de l'ombre du côté horizontal. Si cette valeur est positive, l'ombre sera collée contre le côté du haut de l'élément. Sinon, elle sera contre le côté du bas.

div
{
    /* Une ombre interne présente sur les côtés
    gauches et bas de l'élément */
    box-shadow: 20px -20px 15px 0 hsla(0,0%,0%,0.5) inset;
}

Essayer !

Enfin, dernier point important, il est possible de spécifier plusieurs ombres pour un même élément. Pour cela, il nous suffit de répéter les valeurs de la propriété autant de fois que l'on veut d'ombres, en séparant chaque définition par une virgule :

div
{
    /* On ajoute deux ombres de même couleur
    pour entourer tout l'intérieur de l'élément */
    box-shadow: 15px 15px 10px 0 #e3e3e3 inset,
        -15px -15px 10px 0 #e3e3e3 inset;

}

Essayer !

Cela peut donner des effets intéressants, n'est-ce pas ? :D

Ombrons aussi notre texte !

box-shadow est donc une propriété bien pratique, mais elle possède malgré tout une grosse limitation : elle ne s'applique que sur les éléments en eux-mêmes, pas sur le texte !

Bon, ce n'est pas bien grave en soi, on peut s'en passer mais... Super CSS3 est arrivé et nous propose une solution pour ombrer nos textes ! :soleil:

Cette solution se nomme très originalement text-shadow et nous pose notre premier réel problème de compatibilité : en effet, Internet Explorer 9 ne l'interprète pas. Il faudra donc s'en passer pour le navigateur de Microsoft !

Excepté ce détail ennuyeux, text-shadow est très pratique car utilisable pratiquement de la même manière que box-shadow. Elle demande quatre valeurs :

  • Le décalage de l'ombre sur l'axe des abscisses.

  • Le décalage de l'ombre sur l'axe des ordonnées.

  • Le rayon de flou.

  • La couleur de l'ombre.

Ça ne doit pas trop vous dépayser, n'est-ce pas ? :)

Aller, un petit exemple quand même :

div
{
   /* Peu importe le
   reste du code CSS */
   text-shadow: 8px 8px 2px grey;
}

Essayer !

Toutes les règles vues avec box-shadow s'appliquent également avec text-shadow : il est ainsi possible de spécifier n'importe quel type de couleur pour les ombres. Nous pouvons également définir plusieurs ombres en même temps.

Tout ceci nous permet de réaliser quelques effets (plus ou moins) sympathiques : laissez tomber vos Photoshop ou autres Gimp, CSS3 est dans la place ! :soleil:

Une petite aura

En appliquant une ombre sans la décaler, on peut créer une aura autour du texte. De plus, en répétant plusieurs fois la même définition d'une ombre, on renforce son halo. Voici ce qu'on peut donc faire :

div
{
    text-shadow: 0 0 4px #f3f3f3,
        0 0 4px #f3f3f3,
        0 0 4px #f3f3f3;
}

Essayer !

Un texte enflammé

Le fait de pouvoir appliquer plusieurs ombres sur un même texte nous offre des possibilités incroyables.
On peut par exemple envisager de définir 3 à 4 ombres orangées de plus en plus floues et de plus en plus sombres... Simulant ainsi du feu !

div
{
    text-shadow: 0px -1px 3px yellow,
	0px -4px 5px orange,
	0px -7px 7px red,
	0px -11px 12px darkred;
}

Essayer !

Un effet de gravure

On l'a vu, les ombres permettent de donner un effet de profondeur. Cela sera d'autant plus vrai avec cette autre petite astuce !

Celle-ci consiste à écrire le texte dans une couleur légèrement plus sombre que celle du fond. En appliquant sur ce texte deux ombres très légèrement décalées nous donnons l'impression qu'il s'incruste dans la page :

div
{
    background-color: #e3e3e3;   
    color: #d3d3d3;
    text-shadow: 1px 1px #fff, -1px -1px #444;
}

Essayer !

Ces différents petits effets ne sont que des exemples de ce que nous permet cette formidable propriété qu'est text-shadow. Mais sachez que, en pratique, on préférera faire des choses bien plus sobres que toutes ces fantaisies.

Savoir le faire est une chose, mais n'en mettez par partout sur votre site au risque de le rendre illisible. ;)

Le cas Internet Explorer

Comme on l'a dit, Internet Explorer 9 interprète parfaitement box-shadow mais, curieusement, ne gère pas du tout text-shadow.

Une solution 100% CSS existe pourtant bel et bien pour ombrer nos textes sur ce navigateur : utiliser une propriété propre à Microsoft !

Ce dernier a en effet développé toute une série de filtres afin d'appliquer différents effets sur nos éléments rien qu'en CSS.
Parmi ces filtres se trouve un dédié aux ombres : c'est donc lui que nous utiliserons pour ombrer nos textes sur Internet Explorer.

Celui-ci est (légèrement) plus compliqué à utiliser que text-shadow : il faut utiliser la propriété CSS filter et lui appliquer une valeur (très) spécifique :

div
{
    filter: progid:DXImageTransform.Microsoft.Shadow(color='COULEUR', Direction=DIRECTION, Strength=PUISSANCE);
}

Ce n'est pas beaucoup plus complexe que text-shadow... Si ? :euh:

Bon, n'ayons pas peur de cette petite ligne et remarquons que trois paramètres n'attendent que d'être renseignés :

  • COULEUR : La couleur de notre ombre. Ici, seule la notation hexadécimale est acceptée, ou le nom de la couleur en anglais. Cependant, préférez utiliser l'hexadécimal, tous les noms de couleurs CSS n'étant pas interprétés par le filtre...

  • DIRECTION : Un nombre parmi les suivants :

    Nombre

    L'ombre se situera...

    0

    en haut

    45

    en haut à droite

    90

    à droite

    135

    en bas à droite

    180

    en bas

    225

    en bas à gauche

    270

    à gauche

    315

    en haut à gauche

  • PUISSANCE : Derrière ce nom pompeux se cache en fait le rayon de flou de l'ombre. N'indiquez pas une valeur trop élevée ou vous risquez d'avoir un résultat plutôt... spécial.

Voici donc un exemple d'utilisation :

div
{
    /* Pour tous les navigateurs */
    text-shadow: 8px 8px 2px grey;
    
    /* Pour IE */
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#333333', Direction=135, Strength=5);
}

Essayer !

Si vous avez essayé ce code avec Internet Explorer, vous avez pu constater que le résultat n'est pas folichon, mais malheureusement c'est le mieux que l'on puisse faire pour le moment si on ne veut utiliser que du CSS... :( Gageons que la dixième version du navigateur de Microsoft interprétera text-shadow !

CSS3 et les ombres commencent donc une belle histoire, et nous en sommes les témoins privilégiés !

Appliquer des ombres à nos pages Web n'a jamais été aussi facile, et nul doute que les prochains sites les utiliseront à la place d'images lourdes à charger.

Cela dit, attention de ne pas tomber dans l'excès : un site contenant des ombres à tout va risque d'être plus désagréable qu'autre chose !
Comme tout, il faut user et ne pas abuser.

La raison d'être d'une ombre est d'être discrète, et non envahissante. Souvenez-vous-en. ;)

Exemple de certificat de réussite
Exemple de certificat de réussite