Notice: wp_add_privacy_policy_content est appelée de la mauvaise manière. The suggested privacy policy content should be added only in wp-admin by using the admin_init (or later) action. Veuillez lire Débogage dans WordPress (en) pour plus d’informations. (Ce message a été ajouté à la version 4.9.7.) in /home/xavierbs/www/_blog/wp-includes/functions.php on line 4161
Ombres - Murviel Info

Ombres

Notez que cet article a été écrit pour la première fois il y a plus de 3 ans, mais n'est pas nécessairement obsolète.

Les ombres portées sont un peu passées de mode. Néanmoins, elles sont une utilisation particulièrement astucieuse des blocs :before et :after. En effet, grâce à ces deux blocs, on pourra montrer une seule partie d’une ombre et ainsi rendre un effet quelque peu bizarroïde, pas vraiment naturel.

Vous pouvez faire apparaître les blocs :before et :after pour mieux vous rendre compte de leurs rôles. Le bloc :before est vert, le bloc :after est rouge.

En cliquant sur le bloc, vous faîtes apparaître le code. Pour les 3 premiers blocs, aucune ombre externe. Pour les blocs suivants, seulement le CSS des blocs :before et :after est montré, il faut ajouter le code du bloc .bloc.

Si ces blocs sont contenus dans une div avec un background, leurs ombres risquent de ne pas apparaître. Dans ce cas, donner à cette div un z-index de 0 et une position relative: position: relative (ceci pour appliquer le z-index).

 

Bloc Simple
Bloc Simple

Bloc Simple

On définit une div avec une largeur, une hauteur et une couleur d’arrière-plan.

Gradient Intérieur
Gradient Intérieur

Bloc Simple

On définit un background-image en gradient linéaire. On ne garde la définition de background que pour les anciens navigateurs.

Ombre Douce
Ombrage doux

Bloc Simple

On définit box-shadow, la propriété supporte plusieurs définitions d’ombrage séparées par une virgule. inset définit une ombre interne.

Ombres verticales
Ombres verticales

Ombres verticales

On définit :before avec une propriété border-radius pour lui donner cette forme ovale sur les côtés. box-shadow possède en outre un paramètre spread (taille de l’ombre).

Ombres horizontales
Ombres horizontales

Ombres verticales

Même chose que l’ombre précédente, avec un dimensionnement et un ombrage différents.

Ombres horizontales & verticales
Ombres hori/verti

Ombres horizontales & verticales

On définit les deux blocs :before et :after. Ce sont les blocs définis précédemment pour les ombres respectivement verticales et horizontales.

Ombre unique horizontale haute
Ombre horizontale

Ombre unique horizontale haute

On ne définit que le bloc :before. On reprend la définition du bloc précedent en diminuant la taille pour ne faire apparaître que l’ombre haute.

Ombre unique horizontale basse
Ombre horizontale

Ombre unique horizontale basse

On reprend la définition du bloc précedent en changeant la définition top en bottom.

Ombre verticale unique gauche
Ombre verticale

Ombre verticale unique gauche

On ajoute au bloc :before une rotation pour ne faire apparaître que le haut de l’ombrage.

Ombre verticale unique droite
Ombre verticale

Ombre verticale unique droite

On change juste, par rapport au bloc précédent, la propriété left en right.

Ombres verticales double
Ombres verticales

Ombres verticales double

On place dans les blocs :before et :after chacune des propriétés des deux blocs précédents.

Ombres basses courbées
Ombres courbées

Ombres basses courbées

Vous avez compris le principe, on positionne et on dimensionne les blocs :before et :after. On effectue des rotations pour ne faire apparaître qu’une partie de l’ombre.

Ombre basse courbée unique gauche
Ombre courbée gauche

Ombre basse courbée unique gauche

Par rapport au bloc précédent, on ne conserve que le bloc :before.

Ombre basse courbée unique droite
Ombre courbée droite

Ombre basse courbée unique droite

Même principe que le précédent, on ne conserve que le bloc :after de la définition du bloc « Ombres basses courbées ».

Ombre basse courbée unique droite bis
Ombre courbée droite

Ombre basse courbée unique droite bis

On rapproche l’ombre du bord en « tordant » le bloc avec la propriété skew et en diminuant right.

Ce sujet a déjà été traité, j’apporte ici quelques changements au niveau des tailles et positions en pourcentage, pour pouvoir adapter ces styles à des blocs de taille quelconque. Je présente le code de façon détaillé, en ne prenant qu’une seule classe pour l’ombrage. J’espère que l’article est clair. Vous pouvez retrouver le tutoriel sur creativejuiz, et dans les articles de  Nimbupani et NicolasGallagher.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *