Générateur d'ombrage via Box Shadow


La propriété box-shadow ajoute une ou plusieurs ombres à un élément. C'est une liste d'ombres séparées par des virgules. Pour chacune des 3 ombres proposées, vous pouvez sélectionner 4 longueurs, une couleur optionnelle et un style optionnel (inset?). Les valeurs négatives sont acceptées pour les offsets X et Y. Utilisez les onglets pour définir plusieurs ombres.

Effects
Options

Ici vous pouvez personnaliser l'apparance de la zone de visualisation des effets.

Enregistré!
Réinitialisé!


Code CSS à copier



Compatibilité des navigateurs

Pour aller plus loin

La propriété box-shadow vous permet d'ajouter un effet d'ombre à un élément html, sans avoir besoin d'utiliser d'images ou de hacks CSS.
Supposons que vous ayez un élement identifié MonDiv, et défini comme ci-dessous :

<div id="MonDiv"> </div>

La syntaxe box-shadow fonctionne de la façon suivante :

#MonDiv {
    box-shadow: inset 5px 5px 5px 2px rgba(0,0,0,0.7);
}

Le premier paramètre définit l'orientation de l'ombre, qui peut être vers l'intérieur ou vers l'extérieur de l'élément. Les deux paramètres suivants déterminent la position de l'ombre sur l'axe X (horizontal), et Y (vertival). Le quatrième paramètre permet d'ajouter un effet de flou, et le cinquième, de déterminer la distance. Enfin, le dernier paramètre défini la couleur de l'ombre. Utiliser une couleur rgba au lieu d'héxadécimal permet de définir l'opacité de l'ombre (4ème paramètre de la fonction rgba).

Aujourd'hui, un grand nombre d'utilisateurs utilisent des versions de navigateurs pour lesquelles la propriété box-shadow n'était pas standardisée. Pour une compatibilité maximale, il est très important d'ajouter des lignes avec les préfixes de navigateurs (comme -moz- pour Mozilla, -webkit- pour Chrome et Safari).

#MonDiv {
    -webkit-box-shadow: inset 5px 5px 5px 2px rgba(0,0,0,0.7);
    -moz-box-shadow: inset 5px 5px 5px 2px rgba(0,0,0,0.7);
    box-shadow: inset 5px 5px 5px 2px rgba(0,0,0,0.7);
}

Utiliser un générateur de CSS comme MakingCSS permet d'éviter de saisir chaque valeur pour chaque préfixe, et de visualiser en temps réel l'effet produit.



Laisser votre avis