Tutoriel CSS Box Shadow: Un guide étape par étape (+ Exemples)

Pourquoi la propriété CSS box-shadow mérite-t-elle son propre tutoriel ? Car, comme vous le verrez ci-dessous, c'est une des propriétés les plus complexes qui prend plusieurs valeurs en même temps. Cela pourrait rendre particulièrement difficile pour les débutants.

Si jusqu'à présent vous avez eu du mal à utiliser correctement box-shadow , vous êtes au bon endroit. Dans le guide ci-dessous, nous passerons en revue tout ce qu'il y a à savoir sur cette propriété CSS. Nous parlerons de ce qu'il fait, de la façon d'utiliser correctement sa syntaxe, de quelques exemples sympas box-shadow CSS et enfin de quelques outils générateurs qui facilitent son utilisation.

Qu'est-ce que CSS Box Shadow ?

Même si vous n'êtes pas au courant de la propriété CSS box-shadow jusqu'à présent, vous l'avez probablement déjà vue en action sur le Web.

Ci-dessus est un bon exemple de ce à quoi il ressemble dans la nature (même si je l'ai légèrement augmenté ici pour faire un point). box-shadow est essentiellement ce que son nom l'indique : il vous permet d'ajouter une ombre portée au cadre de presque tous les éléments. L'ombre adhère également à la forme de son ancre, qu'elle soit carrée, rectangulaire, ronde ou ovale. Cela est même vrai lorsque vous avez défini une propriété border-radius .

Sur le Web, les gens l'utilisent pour créer un certain nombre d'effets différents et nous verrons ci-dessous quelques exemples intéressants box-shadow . Pour l'instant, parlons de son fonctionnement au niveau le plus élémentaire.

Syntaxe de base de l'ombre de la boîte

Lorsque vous regardez un élément avec une ombre de boîte à l'aide des outils de développement de navigateur, vous trouverez un balisage comme celui-ci :

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

Ça a l'air un peu compliqué, non ?

Mais ne vous inquiétez pas, vous n'avez pas besoin de toutes ces déclarations tout le temps. De plus, une fois que vous comprenez comment ils fonctionnent, cela ne semble plus aussi déroutant qu'au début.

Comme vous pouvez le voir ci-dessus, box-shadow peut prendre jusqu'à six valeurs. Passons-les en revue un par un.

décalage-x

La première valeur est la distance horizontale entre l'ombre portée et le côté de son élément d'ancrage. Une valeur positive le déplace vers la droite, une valeur négative vers la gauche.

Vous pouvez utiliser tous les types de données CSS courants qui indiquent la longueur de cette valeur, comme px , em , vh , etc. Les plus couramment utilisés sont px et em .

décalage-y

Comme ci-dessus mais pour l'axe vertical. Les valeurs positives déplacent l'ombre sous l'élément, les négatives au-dessus.

rayon de flou

Cela définit le flou de l'ombre de la boîte. Plus la valeur est élevée, plus elle sera floue. blur-radius prend également toutes les dénominations de longueur CSS courantes, mais pas de valeurs négatives.

rayon de propagation

Celui-ci contrôle la propagation de l'ombre au-delà de la hauteur ou de la largeur de son élément. Plus la longueur est élevée, plus la propagation est grande. Vous pouvez également utiliser des nombres négatifs pour introduire un rétrécissement.

Couleur

Comme vous pouvez probablement le deviner, cela vous permet de définir la couleur de l'ombre de la boîte de toutes les manières habituelles. Il est le plus souvent indiqué en valeurs hexadécimales (par exemple #ededed ) ou rgba (par exemple rgba(46, 182, 142, 0.9) ). Ce dernier vous permet également de contrôler l'opacité, qui est couramment utilisée pour les ombres portées.

Notez que si vous ne définissez pas de couleur, le navigateur utilisera la couleur de texte actuellement utilisée.

encart

Enfin, vous pouvez éventuellement ajouter un inset au début de la déclaration. Cela change l'ombre d'une ombre portée à une ombre à l'intérieur de l'élément. Il apparaît à l'intérieur de la bordure, au-dessus de l'arrière-plan, mais en dessous du contenu de l'élément, de sorte qu'il ne couvrira aucun texte par exemple.

Utilisation des valeurs dans l'ordre

Voici l'ordre dans lequel les valeurs de la propriété box-shadow apparaissent.

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

Pour affecter une ombre de boîte, vous avez besoin d'au moins deux valeurs de longueur. Le navigateur utilisera automatiquement ceux pour offset-x et offset-y . Si vous en ajoutez un troisième, il sera interprété comme blur-radius , un quatrième comme spread-radius . l' inset et color sont facultatifs et peuvent apparaître à la fin ou au début et dans n'importe quel ordre. Le CSS ci-dessous aura tous le même résultat.

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

Attribuer plusieurs ombres de boîte

Ce que tout le monde ne sait pas, c'est que vous pouvez définir plusieurs ombres de boîte pour le même élément. Pour cela, fournissez simplement plus d'un groupe de valeurs et séparez-les par des virgules.

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

Le code ci-dessus ressemble à ceci :

Vous pouvez également l'utiliser pour créer des lignes autour des éléments. Pour cela, il vous suffit d'ajouter plusieurs ombres de couleurs différentes et de régler leurs décalages et leur flou à zéro.

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

Cela se traduit par des contours avec des couleurs différentes :

Notez que cela n'affecte pas les dimensions du modèle de boîte, de sorte que les ombres de boîte n'ajoutent pas à la taille globale d'un élément comme le feront la margin ou border .

Compatibilité du navigateur

La compatibilité du navigateur pour box-shadow n'est pas vraiment quelque chose dont vous devez vous soucier. C'est une propriété CSS très établie acceptée par pratiquement tous les navigateurs, y compris le balisage comme l' inset et les ombres multiples.

Afin de prendre en charge les anciennes versions de certains navigateurs, il est courant d'inclure les propriétés -webkit-box-shadow et -moz-box-shadow avec les mêmes valeurs. Cependant, pour les dernières versions des navigateurs les plus courants, cela n'est plus nécessaire.

Exemples d'ombre de boîte CSS

Ensuite, dans ce didacticiel box-shadow , nous souhaitons passer en revue quelques exemples d'ombres de boîtes CSS afin que vous puissiez voir ce qui est possible avec cette propriété. On va passer d'applications plutôt standards à des applications plus extraordinaires car, comme vous allez le voir, on peut faire des choses vraiment excitantes avec.

Ajouter une ombre à un bouton

Les boutons sont souvent un élément auquel une ombre de boîte est appliquée. C'est parce que c'est un bon moyen de les faire ressortir sur la page. Après tout, si vous incluez un bouton, vous voulez généralement que les gens cliquent dessus. Pour les inciter à le faire, voici un exemple simple sur la façon de le faire avec une ombre de boîte.

Le balisage qui l'accompagne ressemble à ceci :

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

Boîte souple Ombre

Si vous souhaitez créer une ombre de boîte CSS relativement douce, vous travaillez principalement avec le flou et la propagation tout en définissant les décalages sur 0 . De cette façon, l'ombre n'obtient pas une forme distincte mais apparaît simplement doucement sur les bords.

Pour obtenir l'effet ci-dessus, vous pouvez utiliser le balisage suivant :

 box-shadow: 0 0 50px 10px #999;

C'est également un excellent moyen de créer une ombre de boîte sur tous les côtés d'un élément. Si vous voulez le rendre plus distinct, augmentez simplement la propagation, atténuez le flou et utilisez une couleur plus foncée.

Ombres de boîtes multiples

Les derniers exemples d' box-shadow concernent l'utilisation de plusieurs ombres à la fois. Cela offre différentes possibilités. D'une part, vous pouvez introduire une ombre de boîte en plusieurs étapes à décoloration cool.

C'est étonnamment simple : il vous suffit d'empiler les ombres de la boîte les unes sur les autres avec des décalages croissants de manière uniforme tout en réduisant l'opacité en même temps. À propos, lorsque vous utilisez de nombreuses ombres de boîte, il est utile d'écrire les déclarations sur des lignes séparées plutôt que sur une longue déclaration. C'est beaucoup plus facile à comprendre.

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

Vous pouvez également aller plus loin en introduisant des ombres de boîte blanche avec une valeur de spread-radius négative entre les deux, ce qui donne l'illusion de plusieurs éléments les uns sur les autres.

Pourquoi la valeur de spread négative ? Parce que sinon, les ombres de la boîte blanche couvriraient celles en dessous d'elles. La valeur négative les rétrécit afin que la couleur derrière puisse transparaître. Vous trouverez ci-dessous le balisage dont vous avez besoin si vous souhaitez introduire un effet similaire sur votre propre site Web :

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

Le dernier exemple pour plusieurs ombres de boîte CSS est la méthode susmentionnée de réglage des décalages et du flou à 0 . Comme nous l'avons vu plus haut, il en résulte un élément ayant plusieurs contours, colorés dans ce cas. Cependant, cela ne fonctionne que parce que la valeur spread-radius augmente pour chaque ombre de boîte.

Si vous voulez essayer par vous-même, vous pouvez commencer par ceci :

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

Meilleurs générateurs d'ombre de boîte

Comme nous l'avons vu, box-shadow prend beaucoup de valeurs. Par conséquent, cela peut prendre un peu d'essais et d'erreurs jusqu'à ce que vous arriviez au type d'ombre que vous voulez.

Pour vous faciliter la tâche, il existe de nombreux outils générateurs d'ombre de boîte qui vous permettent de jouer avec leurs commandes, de voir les résultats immédiatement, puis de copier simplement le balisage une fois satisfait.

Voici les meilleures options pour les générateurs d'ombre de boîte :

• box-shadow.dev - Cet outil à usage unique possède toutes les fonctionnalités dont vous avez besoin et la meilleure interface utilisateur du groupe. Vous pouvez utiliser inset , créer plusieurs ombres de boîte, contrôler les décalages, le flou et la propagation via des curseurs et saisir les couleurs manuellement. Lorsque vous êtes satisfait, cliquez sur Afficher le code pour copier le balisage CSS. Le seul inconvénient est qu'il ne fournit pas de code pour les anciens navigateurs.
• CSSmatic Box Shadow CSS Generator - Similaire à ce qui précède. Vous permet de contrôler les propriétés de l' box-shadow via des curseurs et également d'entrer des nombres manuellement. Possède son propre contrôle d'opacité, ce qui est bien. D'un autre côté, il manque des fonctionnalités pour plusieurs ombres. Le balisage de code que vous obtenez inclut les anciens navigateurs.
• Box Shadow CSS Generator - Une option solide qui a également une capacité de sélection des couleurs et vous donne également du code pour les anciens navigateurs. Vous pouvez le copier d'un simple clic. Il a un contrôle d'opacité mais ne peut créer qu'une seule ombre portée.
• CSS3gen CSS3 Box Shadow Generator — Un autre générateur d'ombres portées. Une fonctionnalité intéressante ici est qu'au lieu des décalages x et y, vous pouvez sélectionner l'angle et la distance de l'ombre et l'outil fera le reste automatiquement. Pour une raison quelconque, spread-radius et l' inset ont leur propre menu. Le CSS que vous pouvez simplement copier et coller inclut également un balisage pour les anciennes générations de navigateurs.

Réflexions finales : CSS Box Shadow

La propriété box-shadow peut être écrasante au début. C'est l'une de ces propriétés qui prend beaucoup de valeurs, donc cela peut sembler plus compliqué qu'il ne l'est en réalité. Espérons que ce didacticiel CSS box-shadow a mis fin à ce sentiment.

Ci-dessus, nous avons expliqué ce qu'est CSS box-shadow et son fonctionnement. Nous avons expliqué la syntaxe, les valeurs et comment elles fonctionnent ensemble. De plus, nous avons passé en revue un certain nombre d'exemples sur la façon d'utiliser les ombres de boîte CSS dans la vie réelle, y compris le balisage que vous pouvez utiliser immédiatement. Enfin, pour ceux qui veulent un peu d'aide, nous avons répertorié un certain nombre de générateurs CSS box-shadow qui peuvent faire une grande partie du travail pour vous.

À présent, vous devriez vous sentir capable d'utiliser cette fonctionnalité CSS sur votre site Web. Nous avons hâte de voir ce que vous en ferez.

Comment utilisez-vous CSS box shadow sur votre site Web ? Des cas d'utilisation passionnants que nous n'avons pas couverts ci-dessus ? Faites-nous savoir dans les commentaires ci-dessous!