Box Shadow Generator
Generate box shadows
Generate box shadows S'exécute localement dans votre navigateur
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
Le Box Shadow Generator crée une ombre à partir du décalage, du flou, de la propagation, de la couleur et de l'opacité, avec un aperçu en direct et le CSS. Les deux paramètres que les gens confondent sont le flou et l'étalement : le flou adoucit le bord vers l'extérieur et l'intérieur de la forme de l'ombre, tandis que l'étalement augmente ou réduit la taille de l'ombre avant qu'un flou ne se produise. La propagation négative est ce qui empêche une ombre douce de ressembler à un halo, c'est pourquoi les valeurs par défaut utilisent ici une petite valeur négative.
Where people use the
- Construire une échelle d'élévation pour les cartes, les modaux et les menus.
- Créer un état pressé ou focalisé avec une ombre incrustée.
- Adoucir une bordure sans ajouter de véritable bordure.
- Vérifier à quoi ressemblent réellement les valeurs d'ombre d'une spécification de conception.
How to use the
- 1
Définir les décalages
Le décalage X déplace l'ombre vers la droite, le décalage Y la déplace vers le bas. Les valeurs négatives le déplacent dans l'autre sens.
- 2
Définir le flou et la propagation
Le flou adoucit le bord. La propagation élargit l'ombre avant de la rendre floue ; utilisez un petit écart négatif pour une ombre située sous l'élément plutôt qu'autour de celui-ci.
- 3
Choisissez la couleur et l'opacité
Le noir pur à pleine opacité semble dur. Une faible opacité, comprise entre 8 et 20 pour cent, se lit comme de la profondeur plutôt que de la saleté.
- 4
Cochez encadré si vous souhaitez une ombre intérieure
Inset dessine l'ombre à l'intérieur de l'élément plutôt que derrière, ce qui convient aux états et aux puits enfoncés.
- 5
Copiez le CSS
La règle inclut la couleur rgba, elle peut donc être collée directement dans une feuille de style.
Conseils et bonnes pratiques
- Deux ombres superposées sont bien meilleures qu’une seule épaisse.
- Gardez la source de lumière cohérente : si une carte est projetée vers le bas, toutes les cartes devraient le faire.
- Surveillez les ombres coupées par un parent avec un débordement masqué.
Questions fréquemment posées
Quelle est la différence entre flou et propagation ?
Spread modifie la taille de la forme de l'ombre avant tout adoucissement, positif pour s'agrandir et négatif pour rétrécir. Le flou adoucit ensuite le bord du rayon donné. Pour obtenir une ombre serrée sous une carte, vous souhaitez un petit flou et un écart légèrement négatif.
Pourquoi mon ombre semble-t-elle grise et sale ?
Parce qu'il s'agit d'un noir pur avec une opacité élevée. Utilisez un alpha faible, entre 0,08 et 0,2, et envisagez de teinter l'ombre vers la teinte d'arrière-plan, qui se lit beaucoup plus naturellement.
Puis-je avoir plus d’une ombre ?
Oui. Séparez plusieurs ombres par des virgules dans la même déclaration ; ils s'empilent d'avant en arrière, donc le premier est en haut. Les ombres superposées permettent de créer une élévation douce et réaliste.
Une ombre de boîte affecte-t-elle la mise en page ?
Non. Les ombres sont peintes à l'extérieur de la boîte de l'élément et ne prennent pas de place. Elles peuvent donc être découpées par un parent avec un débordement caché ou par un conteneur étanche.
Est-ce qu'animer une ombre de boîte coûte cher ?
Oui, relativement. La modification du flou ou de la propagation oblige le navigateur à repeindre l'ombre à chaque image. Pour un mouvement fluide, animez l'opacité ou transformez-la à la place, ou effectuez un fondu enchaîné entre deux ombres pré-rendues.