box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;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.
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.
Choisissez une carte prédéfinie comme une carte, une hauteur ou une neumorphe pour obtenir un point de départ réaliste, ou commencez par un seul calque d'ombre par défaut et s'accumuler à partir de là.
Faites glisser les curseurs de décalage horizontal et vertical, de rayon de flou et de rayon de diffusion, définissez la couleur et l'opacité des ombres, et basculez l'insert pour déplacer l'ombre à l'intérieur de la boîte.
Ajoutez des couches d'ombre supplémentaires pour la profondeur - une ombre douce et large sous une ombre plus étroite, lue comme une élévation naturelle. Réorganisez ou supprimez les calques lorsque vous affinez le look.
Copiez la déclaration de l'ombre de la boîte ou le bloc préfixé pour les navigateurs plus anciens, puis collez-le directement dans votre feuille de style ou vos styles de composants.
Empilez n'importe quel nombre de couches d'ombres dans une seule déclaration, dans le bon ordre de peinture de haut en bas, c'est ainsi que la carte et l'élévation modale sont construites.
Curseurs pour décalage horizontal et vertical, rayon de flou et rayon d'étalement, ainsi qu'un sélecteur de couleurs, un contrôle d'opacité et un bouton de basculement incrusté de chaque partie de la grammaire.
Un élément de prévisualisation se met à jour instantanément au fur et à mesure que vous modifiez, et vous pouvez basculer son arrière-plan entre la lumière et l'obscurité pour vérifier comment l'ombre se lit dans les deux thèmes.
Des recettes pour des ombres subtiles, cartes, surélevées, flottantes, intérieures, lueurs, neumorphiques et nettes vous donnent un point de départ éprouvé au lieu d'une toile vierge
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
0 comments
No comments yet. Be the first to share your thoughts!