Générateur d'ombres de boîte CSS

Le générateur d'ombres CSS Box est un éditeur visuel pour la propriété CSS Box-Shadow. Vous ajustez le décalage, le rayon de flou, le rayon d'étalement, la couleur et l'opacité avec les curseurs et voyez le rendu du résultat en direct sur un élément de prévisualisation, puis copiez le CSS exact. Au lieu de deviner les valeurs des pixels et de recharger la page, vous façonnez directement l'ombre et lisez le code qu'elle produit.

Ouvrez ce générateur d'ombre de boîte CSS et il démarre sur le préréglage de carte, deux couches qui copient comme une ombre de boîte : 0 px 4 px 6 px -1 px #000001 a, 0 px 2 px 4 px -2 px #000001 a ; Le curseur Opacity est cuit dans la couleur hexadécimale, donc 10 % devient le 1 a à la fin Cliquez sur le préréglage Intérieur et la déclaration passe à l'ombre de boîte : inset 0 px 2 px 4 px 0 x 0 x 4 px0.

La propriété Box-Shadow est trompeusement profonde. Une seule déclaration peut empiler plusieurs ombres, chacune avec ses propres décalages, flou, propagation, couleur et un mot-clé facultatif qui peint l'ombre à l'intérieur de l'élément plutôt qu'à l'extérieur. Les véritables ombres d'interface utilisent presque toujours deux ou plusieurs couches pour paraître naturels, ce qui est fastidieux à écrire à la main. Cet outil gère les couches pour vous et génère une déclaration Spec-Valid dans le bon ordre séparé par des virgules.

Tout se passe dans votre navigateur. Choisissez un préréglage, réglez les calques, basculez l'aperçu entre les arrière-plans clairs et sombres et copiez la propriété standard ou un bloc qui inclut également le préfixe -webkit-. Aucun compte, aucun téléchargement, et il continue de fonctionner hors connexion une fois la page chargée.

Les ombres sont peintes à l'extérieur de la boîte et ne prennent pas de place, donc elles ne poussent jamais les voisins et seront écrêtées par tout ancêtre avec le débordement caché La propagation est la valeur la moins comprise : elle grandit ou rétrécit la forme de l'ombre avant de se brouiller, donc une propagation positive avec le flou zéro donne un contour offset solide, c'est ainsi que les effets de bordure sont simulés sans affecter la disposition L'encart déplace l'ombre à l'intérieur de l'élément, utile pour les états enfoncés et les lueurs intérieures La superposition de plusieurs ombres avec un décalage et un flou croissants est la façon dont une grande profondeur convaincante est construite, puisqu'un seul grand flou lit comme brouillard plutôt que comme une ombre. Chaque couche coûte du temps de rendu, et des dispositifs plus faible.