Encart CSS Box Shadow - Code prêt à l'emploi
Créez visuellement du code CSS box-shadow : curseurs pour le décalage, le flou, la répartition, la couleur avec opacité, le mode incrustation et jusqu'à quatre calques avec un aperçu en direct.
Résultat
Cette page ouvre le générateur d'ombre de boîte avec la case d'encart déjà cochée, de sorte que l'ombre est dessinée à l'intérieur de l'élément plutôt que derrière lui. La carte d'aperçu montre immédiatement l'effet enfoncé et chaque curseur continue de mettre à jour la ligne CSS en direct.
Les ombres incrustées sont la manière dont CSS simule la profondeur vers l'intérieur : les états des boutons enfoncés, les champs de recherche et les puits de saisie, les creux de la barre de progression et les panneaux gravés en dépendent tous. Étant donné que l'ombre épouse le bord intérieur, le flou et la propagation se comportent légèrement différemment de ceux d'une ombre portée normale. Les curseurs ici vous permettent de ressentir immédiatement cette différence.
Lorsque l'aspect enfoncé est correct, copiez la ligne d'ombre de la boîte dans votre feuille de style. Vous pouvez également combiner un calque en incrustation avec des calques externes réguliers : ajoutez un deuxième calque et décochez l'encart dessus pour mélanger les deux dans une seule déclaration.