CSS box-shadow property with 9 Solid Examples

Propriété CSS box-shadow avec 9 exemples solides

Si vous êtes un développeur Web, vous devez probablement avoir lu des tonnes de didacticiels sur la propriété CSS box-shadow .

De nombreux tutoriels vous apprennent à utiliser la propriété box-shadow de CSS. Mais ne vous dites jamais le pouvoir ultime de box-shadow.

Dans ce tutoriel, vous apprendrez le CSS box-shadow avec des exemples et des visuels complets . Ainsi, vous n’aurez plus jamais besoin de consulter un autre didacticiel.

À la fin de ce guide, vous aurez toutes les informations dont vous avez besoin pour créer une boîte-ombre CSS efficace pour votre prochain projet.

Syntaxe

css-box-shadow-property-exemples

Il est important d’apprendre la syntaxe avant de se plonger dans des exemples de projets.

Décomposons les valeurs que nous pouvons utiliser dans box-shadow :

boîte ombre:

  • X-offset : signifie dans la direction x (horizontal)
  • y-offset : signifie dans la direction y (verticale)
  • Blur-radius : force du flou (facultatif)
  • spread-radius : agrandissez ou augmentez le rayon de l'ombre (facultatif)
  • color : la couleur de l'ombre de la boîte (facultatif)

décalage-x et décalage-y

css-box-shadow-property-exemples-bouton d'enregistrement

Écrivez une ombre de boîte CSS pour le bouton d'enregistrement. Il devrait ajouter l'ombre sombre dans la direction x et y .

 <a href="#"class="btn btn--1">Register</a>
 .btn--1{
 box-shadow: 5px 5px #000;
 }

CSS box-shadow dans la direction opposée

css-box-shadow-property-exemples-bouton de connexion

Écrivez un code box-shadow pour le bouton de connexion.

Il doit ajouter l'ombre sombre dans les directions x et y, mais elle doit être dans la direction opposée avec des valeurs négatives .

 <a href="#" class="btn btn--2">Login</a>
 box-shadow: -5px -5px #000;

Remarque : Parfois, les développeurs CSS écrivent du bruit supplémentaire comme :

ombre de la boîte : 5px 5px 0 #000 ;

le rayon de flou est facultatif . Si nous ne l'utilisons pas, nous devrions l'ignorer.

Ombre de boîte CSS avec effet de flou

css-box-shadow-property-flou-rayon-effet

Ajoutez le rayon de flou pour le bouton Inscription.

 <a href="#" class="btn btn--3">Signup</a>
 box-shadow: 5px 5px 10px #000;

Ombre de boîte CSS avec rayon de propagation

css-box-shadow-property-spread-rayon-effet

Ajouter un rayon de propagation pour le bouton d'inscription

 <a href="#" class="btn btn--4">Signup</a>
 box-shadow: 0px 0px 5px 15px #000;

Ombre de boîte CSS multiple

effet de propriété-ombre-css-box-multiple

Créez un bouton S'inscrire maintenant avec plusieurs ombres de boîte.

 <a href="#" class="btn btn--5">Enroll Now</a>
 box-shadow: 5px 5px 2px #000, 10px 10px 3px #fff;

Ombre de boîte CSS multiple avec effet de calque transparent

css-box-shadow-propriété-transparent-effet

Ajoutez un effet transparent pour inscrire le bouton maintenant en ajoutant la même couleur d'arrière-plan que la couleur d'arrière-plan du bouton parent pour la première ombre de boîte, puis pour la seconde, ajoutez la couleur souhaitée.

 <a href="#" class="btn btn--6">Enroll Now</a>
 box-shadow: 0 0 0 10px #FF5757, 0 0 0 20px #fff;

encart css box-shadow

css-intérieur-boîte-ombres

Écrivez un code pour ajouter une ombre intérieure CSS pour le bouton "Créer maintenant".

 <a href="#" class="btn btn--7">Create Now</a>
box-shadow: inset 0 0 20px 0 #000;

Définir la transparence dans la boîte-ombre CSS

css-box-shadow-transparence

Vous pouvez utiliser les couleurs rbga() pour ce faire.

 <a href="#" class="btn btn--8">Run Daily</a>
 box-shadow: 5px 5px 10px rgba(0,0,0,0.5);

Bas de l'ombre de la boîte CSS uniquement

bordure-ombre-de-boîte-en bas uniquement

 <a href="#" class="btn btn--9">My Job</a>
 box-shadow: 0 10px 10px -10px #000;

Maintenant, cela devrait être facile pour vous. Nous ne voulons pas ajouter d'ombre dans la direction x :

ombre de la boîte : 0 10px #000 ;

Prenons cet exemple un peu plus loin. Le bouton devrait ressembler à un soulignement ombré de boîte

ombre de la boîte : 0 10px 10px -10px #000 ;

Remarque : mettez simplement la valeur du rayon de propagation dans la valeur négative du rayon de flou.

Générateur d'ombre de boîte CSS

Il existe plusieurs outils différents pour générer box-shadow , mais voici le lien vers l'un d'entre eux, qui vous plaira certainement.

Je veux que vous jouiez avec, avec les connaissances que vous avez acquises, cela vous aidera à affiner vos compétences plus en profondeur.

Maintenant, à titre d'exemple, créez un effet comme ajouter les ombres de la boîte à tous les éléments sauf le premier enfant. Eh bien, vous pouvez le faire avec la combinaison de :not css selector .

C'est assez pour aujourd'hui, j'espère que vous avez trouvé cet article utile et que vous avez appris une nouvelle valeur ou approche.

Et si vous voulez voir les exemples en action, visitez notre code-pen : CSS box-shadow avec des exemples

De la même manière, nous apportons beaucoup plus de contenu sur CSS.

Nos guides de codage :