|
La propriété CSS `box-shadow` ajoute des effets d'ombre autour d'un élément. Cela peut être utilisé pour ajouter de la profondeur et de la dimension à un élément, ou pour le faire ressortir du reste du contenu d'une page.
La propriété `box-shadow` prend jusqu'à quatre valeurs, qui spécifient le décalage, le flou et la propagation de l'ombre, ainsi que la couleur de l'ombre.
1. Décalage :Les valeurs de décalage spécifient la distance horizontale et verticale de l'ombre à l'élément. Les valeurs positives déplacent l'ombre vers la droite et vers le bas, tandis que les valeurs négatives déplacent l'ombre vers la gauche et vers le haut.
2. Flou :La valeur de flou spécifie la quantité de flou appliquée à l'ombre. Une valeur de flou plus élevée créera une ombre plus douce, tandis qu'une valeur de flou plus faible créera une ombre plus nette.
3. Propagation :La valeur de propagation spécifie la quantité de propagation appliquée à l'ombre. Une valeur d'étalement plus élevée créera une ombre plus large, tandis qu'une valeur d'étalement plus faible créera une ombre plus étroite.
4. Couleur :La valeur de couleur spécifie la couleur de l'ombre. Vous pouvez utiliser n'importe quelle valeur de couleur CSS valide, telle qu'une couleur nommée, une valeur hexadécimale ou une valeur RVB.
Voici quelques exemples d'utilisation de la propriété `box-shadow` pour créer différents types d'ombres :
- Ombre de base :
```css
boîte-ombre :5px 5px 5px #888888 ;
```
Cela créera une ombre décalée de 5 pixels dans les directions horizontale et verticale, avec un flou de 5 pixels et étalée sur 5 pixels. L'ombre sera une nuance de gris.
- Incruster une ombre :
```css
box-shadow :encart 5px 5px 5px #888888 ;
```
Cela créera une ombre encastrée, ce qui signifie que l'ombre sera dessinée à l'intérieur de l'élément plutôt qu'à l'extérieur. L'ombre aura la même taille et la même forme que l'élément, et ce sera une nuance de gris.
- Ombres multiples :
```css
boîte-ombre :5px 5px 5px #888888, 10px 10px 10px #444444 ;
```
Cela créera deux ombres, l’une avec un décalage et un flou plus importants que l’autre. Les ombres seront toutes deux des nuances de gris, mais la deuxième ombre sera plus sombre que la première.
Vous pouvez utiliser la propriété « box-shadow » pour créer une grande variété d'ombres, qui peuvent être utilisées pour ajouter de la profondeur et de la dimension à vos conceptions. Expérimentez avec différentes valeurs pour voir quels effets vous pouvez créer.
|
