Des couleurs à accorder, un dégradé ou une grille CSS à écrire, une maquette de post à montrer : ces outils rendent un résultat prêt à copier ou à télécharger, sans compte et sans logiciel.
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.
CSS
box-shadow: 4px 6px 12px 0px #00000033;
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