341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
Créez des ombres CSS visuellement
Une ombre CSS se règle avec cinq valeurs, deux décalages, un flou, une extension et une couleur, et le seul moyen fiable de trouver la bonne combinaison est de la voir. Cet outil affiche un aperçu qui suit les curseurs et rend la déclaration correspondante. Il gère aussi l'ombre intérieure, celle qui creuse l'élément au lieu de le soulever. Une ombre réussie se remarque à peine : décalage vertical léger, flou généreux, couleur très transparente. Les ombres marquées et grises datent, les ombres actuelles sont douces et teintées.
Le flou adoucit le bord de l'ombre sans changer sa taille ; l'extension agrandit ou rétrécit l'ombre avant le flou. Une extension négative avec un flou important donne une ombre resserrée sous l'élément, l'effet le plus courant sur les cartes.
En décalant vers le bas seulement, comme une lumière venue d'en haut, avec un flou de deux à trois fois le décalage et une couleur très transparente. Superposer deux ombres, une courte et marquée, une longue et diffuse, donne une profondeur bien plus crédible qu'une seule.
À creuser plutôt qu'à soulever : un champ de saisie enfoncé, une barre de progression, une zone de dépôt de fichier. Elle sert aussi à signaler un état pressé sur un bouton, là où l'ombre extérieure disparaît.
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr