Maison > interface Web > tutoriel CSS > Maîtriser box-shadow en CSS : un guide rapide

Maîtriser box-shadow en CSS : un guide rapide

WBOY
Libérer: 2024-09-03 11:43:31
original
1123 Les gens l'ont consulté

Mastering box-shadow in CSS: A Quick Guide

La propriété box-shadow en CSS sert de mécanisme efficace permettant aux développeurs d'introduire de la profondeur et de la dimension aux éléments HTML. En incorporant des ombres dans les éléments, on peut améliorer le réalisme et l'attractivité visuelle de l'interface utilisateur. Cet article approfondira les principes fondamentaux de box-shadow et proposera des exemples pour vous aider à maîtriser son application.

Comprendre les bases

La propriété box-shadow se compose de plusieurs valeurs qui définissent la façon dont l'ombre apparaîtra. Voici la syntaxe de base :

box-shadow: offset-x offset-y blur-radius spread-radius color;
Copier après la connexion
  • offset-x : Ce paramètre définit le déplacement horizontal de l'ombre. Les valeurs positives déplacent l'ombre vers la droite, les valeurs négatives la déplacent vers la gauche.
  • offset-y : Ce paramètre indique le déplacement vertical de l'ombre. Les valeurs positives déplacent l'ombre vers le bas, les valeurs négatives l'élèvent.
  • rayon de flou (facultatif) : Ce paramètre régule la douceur de l'ombre. Une valeur plus élevée entraîne une ombre plus diffuse. Si ce paramètre n'est pas spécifié, la valeur par défaut est 0, ce qui produit une ombre distincte.
  • spread-radius (facultatif) : Ce paramètre affecte les dimensions de l'ombre. Les valeurs positives augmentent la taille de l'ombre, les valeurs négatives la réduisent.
  • color : Cet attribut définit la couleur de l'ombre. Il peut s'agir de n'importe quelle représentation de couleur CSS valide, telle que #000, rgba(0,0,0,0.5) ou hsl(0, 0%, 50%).

Exemple : Ombre de boîte de base

Voyons un exemple simple d'ombre de boîte appliquée à un bouton :

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
Copier après la connexion

Dans ce cas, l'ombre est décalée de 5px horizontalement et verticalement, a un rayon de flou de 10px et est colorée en noir avec 0,3 de opacité.

Exemple : ombres incrustées

box-shadow prend également en charge le mot-clé inset, qui place l'ombre à l'intérieur de l'élément, lui donnant un effet en retrait.

div {
  box-shadow: inset 0 0 10px #000;
}
Copier après la connexion

Ici, l'ombre est placée à l'intérieur du div, créant un effet comme si le contenu était poussé vers l'intérieur.

Conseils avancés

  • Vous avez la possibilité de créer plusieurs ombres en délimitant chaque spécification box-shadow par une virgule. Cette technique permet de créer des effets d’ombres complexes et superposés.
box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;
Copier après la connexion
  • Les effets d'ombre sont fréquemment utilisés pour produire des interactions de survol, améliorant ainsi l'interactivité des boutons ou des cartes.
button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}
Copier après la connexion

Pour ceux qui préfèrent une approche plus visuelle, consultez le générateur CSS Box-Shadow. Cet outil vous permet de créer des effets d'ombre de boîte personnalisés sans effort, sans écrire de code ni enregistrer de préréglages.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal