TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer des ombres de boîte avec CSS ?

31

La propriété CSS "box-shadow" vous permet de créer des effets d’ombre simples sur les éléments de votre page. Vous pouvez utiliser cette propriété pour créer de belles boîtes avec un effet d’ombre en haut, en bas, à droite et à gauche. Dans ce tutoriel, nous utiliserons: avant le pseudo élément pour créer différents styles d’effet d’ombre dans une zone de texte.

Connexe : Comment convertir l’icône géniale de la police en image ?

Syntaxe de la propriété CSS box-shadow

La syntaxe de la propriété box-shadow est la suivante :

box-shadow: horizontal offset | vertical offset | blur | spread | color | direction

Ci-dessous un exemple lorsque le box-shadow: 10px 10px 10px 10px green inset ; est utilisé avec un élément div :

Boîte Ombre avec Incrustation

La valeur d’encart indique que la direction de l’ombre doit être à l’intérieur de l’élément. Vous pouvez utiliser le début pour créer l’effet d’ombre à l’extérieur de l’élément.

Comment créer des effets d’ombre avec CSS ?

Passons à la création d’un effet d’ombre à l’aide du pseudo-élément CSS. Créez d’abord une boîte en utilisant le code CSS ci-dessous. Nous laissons la case sans définir les dimensions, si vous souhaitez utiliser des valeurs de hauteur et de largeur spécifiques.

.box { background-color:#CDDC39; color: #333333; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: 1px solid #cccccc; margin: 20px; padding: 15px; font-size: 18px; }

Ensuite, créez une ombre avec le CSS ci-dessous :

.shadow { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .shadow:before { position: absolute; z-index: -1; display: block; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); content: ""; }

Nous afficherons l’ombre sur le côté gauche et ajusterons la position en utilisant les valeurs en bas et à gauche.

.left-shadow:before { bottom: 25px; left: 20px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); }

Semblable à l’ombre gauche, définissez des styles séparés pour l’ombre droite, inférieure et simple comme ci-dessous.

.right-shadow:before { right: 20px; bottom: 25px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } .bottom-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .simple-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; }

HTML pour les effets d’ombre

Afin de créer une zone d’ombre, nous devons utiliser l’une des trois classes CSS ci-dessus avec HTML.

  • classe de boîte
  • classe d’ombre
  • choisissez l’un des styles d’ombre – ombre gauche, ombre droite, ombre inférieure ou ombre simple

Par exemple ci-dessous est le code HTML pour ajouter une ombre gauche à un élément div :

<div class="box shadow left-shadow"> This is a text box with left shadow. The text inside the box is aligned with "height: 100px; width: 70%; margin: 20px; padding: 15px; font-size: 18px;". The shadow in the left is aligned with "bottom: 25px; left: 20px; width: 60%; height: 20px;". </div>

Démo des effets d’ombre CSS

Vous pouvez ajuster le CSS et créer des effets d’ombre droite, d’ombre inférieure et d’ombre unie. Vous trouverez ci-dessous quelques-unes des démos avec des effets d’ombre CSS.

Effet d’ombre du côté gauche

Ceci est une zone de texte avec une ombre à gauche. Le texte à l’intérieur de la boîte est aligné avec « hauteur : 100 px ; largeur : 70 % ; marge : 20 px ; remplissage : 15 px ; taille de police : 18 px ; ». L’ombre à gauche est alignée avec "bas : 25px ; gauche : 20px ; largeur : 60 % ; hauteur : 20px ;".

Effet d’ombre du côté droit

Ceci est une zone de texte avec une ombre à droite. Le texte à l’intérieur de la boîte est aligné avec « hauteur : 100 px ; largeur : 70 % ; marge : 20 px ; remplissage : 15 px ; taille de police : 18 px ; ». L’ombre à droite est alignée avec "droite : 20px ; bas : 25px ; largeur : 60 % ; hauteur : 20px ;".

Effet d’ombre CSS inférieur

Ceci est une zone de texte avec une ombre en bas. Le texte à l’intérieur de la zone est aligné avec « hauteur : 100 px ; largeur : 70 % ; marge : 20 px ; remplissage : 15 px ; taille de police : 18 px ; ». L’ombre en bas est alignée avec "right : 20px ; bottom : 0; left : 20px; height : 30px;".

Boîte d’ombre CSS simple

Ceci est une zone de texte avec une ombre simple. Le texte à l’intérieur de la boîte est aligné avec « hauteur : 100 px ; largeur : 70 % ; marge : 20 px ; remplissage : 15 px ; taille de police : 18 px ; ». L’ombre est alignée avec "droite : 20px ; bas : 0 ; gauche : 20px ; hauteur : 30px ;".

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails