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
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
É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
É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
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
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
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
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
É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
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
<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.
