box-shadow |
Boite d'ombrage |
|---|---|
| CSS3 |
Syntaxe
| box-shadow: h-shadow v-shadow blur spread color |inherit|initial|inset|none; |
Paramètres
| Paramètre | Description |
|---|---|
| h-shadow | Ce paramètre obligatoire permet d'indiquer la position de l'ombrage horizontale. |
| v-shadow | Ce paramètre obligatoire permet d'indiquer la position de l'ombrage verticale. |
| blur | Ce paramètre optionnel permet d'indiquer la distance de l'ombrage. |
| spread | Ce paramètre optionnel permet d'indiquer la taille de l'ombrage. |
| color | Ce paramètre optionnel permet d'indiquer la couleur de l'ombrage. |
| inherit | Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial | Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
| inset | Ce paramètre optionnel permet d'indiquer que l'ombrage d'une ombre extérieure à ombrage interne. |
| none | Ce paramètre permet d'indiquer qu'il ne faut pas afficher d'ombrage. C'est la valeur par défaut. |
Description
Cette propriété permet d'attacher une ou plusieurs ombrages à un élément.
Remarques
- Création de profondeur et d'éléments visuels : La propriété `box-shadow` est idéale pour ajouter de la profondeur et des effets 3D subtils aux éléments de votre design. Elle peut simuler des ombres portées, donnant une apparence de relief aux boîtes ou autres conteneurs. Utilisez des ombres légères pour des designs modernes et épurés ou des ombres plus fortes pour des effets plus dramatiques.
- Syntaxe flexible pour plusieurs ombres : Avec `box-shadow`, vous pouvez appliquer plusieurs ombres à un seul élément en les séparant par des virgules. Cela permet de créer des effets complexes comme des ombres colorées, superposées ou des halos autour de l'élément. Toutefois, assurez-vous que ces ombres n'alourdissent pas visuellement votre interface.
- Impact sur les performances : Les ombres générées par `box-shadow` sont calculées par le navigateur, ce qui peut affecter les performances sur des éléments multiples ou animés. Les effets complexes ou les transitions fréquentes impliquant `box-shadow` peuvent ralentir le rendu, surtout sur des appareils moins puissants. Utilisez-les avec modération, en particulier dans des animations.
- Coordonnées et étendue de l'ombre : La syntaxe de `box-shadow` inclut les décalages horizontal et vertical, le flou et l'étendue de l'ombre. Des décalages négatifs permettent de créer des ombres se déplaçant vers le haut ou la gauche de l'élément. Jouer avec ces paramètres peut produire des effets variés, mais testez toujours pour garantir la cohérence visuelle.
- Effets réalistes avec des couleurs et des opacités : Pour créer des ombres réalistes, utilisez des couleurs légèrement transparentes avec `rgba()`. Par exemple, une ombre noire avec une opacité de 20% (`rgba(0, 0, 0, 0.2)`) produit un effet subtil et naturel. Évitez les ombres entièrement noires (#000) pouvant paraître artificielles et écrasantes dans un design moderne.
- Compatibilité avec les arrière-plans transparents : `box-shadow` fonctionne bien même lorsque l'arrière-plan de l'élément est transparent ou semi-transparent. Cela permet de créer des effets intéressants, comme des ombres flottantes autour d'éléments non opaques. Assurez-vous toutefois que l'ombre ne perturbe pas la lisibilité du contenu ou l'équilibre du design.
- Utilisation pour des bordures simulées : La propriété `box-shadow` peut être utilisée pour simuler des bordures sans utiliser la propriété `border`. Par exemple, un `box-shadow` avec une valeur de décalage de 0 crée un effet de bordure douce. Cette technique est utile si vous voulez des bordures floues ou pour éviter de modifier la taille totale de l'élément.
- Interaction avec les arrière-plans et les contextes : Les ombres définies par `box-shadow` peuvent être masquées si l'élément parent a une propriété `overflow: hidden`. Dans ces cas, l'ombre ne sera pas visible en dehors des limites du conteneur parent. Testez toujours vos ombres dans le contexte de votre mise en page pour éviter des résultats inattendus.
Dernière mise à jour : Dimanche, le 20 décembre 2015