Le concepteur a envoyé un nouveau brouillon de conception d'interface utilisateur et je l'ai ouvert pour y jeter un œil : toutes sortes de belles cartes, boutons et fenêtres contextuelles, le tout avec des effets d'ombres douces. Ces détails donnent à l’interface un aspect superposé, moderne et sophistiqué.
Mais voici la question : Comment restaurer ces ombres ?
La difficulté d'ajuster manuellement les paramètres
Au début, je pensais que c'était très simple. N'est-ce pas juste
box-shadow ? J'ai commencé à ajuster les outils de développement du navigateur :
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
Enregistrer, actualiser, faux. Changez à nouveau :
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12);
Toujours faux. Après plus de vingt allers-retours, le créateur a déclaré : "Ça ne me semble toujours pas bien. Je dois le rendre plus doux..."
J'étais dévasté.
paramètre trap de box-shadow
box-shadow a 5 paramètres :
- décalage horizontal(décalage-x) — l'ombre se déplace vers la gauche ou la droite
- décalage vertical(décalage-y) — l'ombre se déplace vers le haut ou vers le bas
- rayon de flou(rayon de flou) — degré d'adoucissement de l'ombre
- rayon d'étalement(rayon d'étalement) — mise à l'échelle de l'ombre
- couleur(couleur) — La couleur de l'ombre prend en charge la transparence
Si chaque paramètre est légèrement modifié peu, l'effet sera complètement différent. Pire encore :
- Les valeurs positives et négatives ont des effets complètement opposés dans des directions différentes
- L'interaction entre le rayon de flou et le rayon de diffusion est difficile à comprendre intuitivement
- La transparence des couleurs doit être convertie au format RGBA
Une demi-heure s'est écoulée et j'étais encore en train d'ajuster la première ombre. Il y a plus de 20 effets d'ombre différents sur la page...
Résoudre le problème avec les outils visuels
J'ai ouvert le générateur d'ombres CSS de ToolMi.
L'interface est très intuitive :
- 5 curseurs pour contrôler divers paramètres
- Effet d'affichage de la zone de prévisualisation en temps réel
- Prise en charge de la commutation ombre intérieure/ombre extérieure
- Copiez le code généré en un clic
Premier essai
Le concepteur a déclaré : "L'ombre de cette carte est plus douce et a un sens de la hiérarchie."
Dans les outils, je :
- Faites glisser le rayon de flou sur 24 px
- Réglez l'opacité sur 15 %
- Ajustez le décalage vertical sur 8 px
La zone d'aperçu en direct a immédiatement montré l'effet : exactement l'ombre douce que je voulais !
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);
Cliquez sur copier, collez dans le code et actualisez la page. Le concepteur l'a regardé et a dit : "Oui, c'est ce que l'on ressent !"
Traitement par lots de toutes les ombres
Après le premier succès, je l'ai traité beaucoup plus rapidement :
- Ombre du bouton :
0px 2px 8px rgba(0, 0, 0, 0.1) - Ombre contextuelle :
0px 12px 32px rgba(0, 0, 0, 0.2) - Ombre de mise au point de la zone de saisie :
0px 0px 0px 3px rgba(66, 153, 225, 0.3)
Chaque ombre prend en moyenne 30 secondes, y compris l'aperçu et l'ajustement.
De 2 heures à 20 minutes
Laissez-moi calculer la comparaison d'efficacité :
| Méthode | Temps d'ombre unique | Temps total de 20 ombres | Précision |
|---|
| Réglage manuel | 5 minutes||~100 minutes | 60% | Outils de visualisation |
| 1 minute | ~20 minutes | 95% | Conseils pratiques |
1. Paramètres d'ombre couramment utilisés
Après de nombreuses périodes de pratique, j'ai résumé quelques paramètres courants :
Ombre de la carte douce :
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
- Ombre de la fenêtre contextuelle flottante :
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
- 2. L'utilisation de l'ombre intérieure
box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.2);
L'ombre intérieure peut créer un effet enfoncé :
Effet enfoncé de la zone de saisie
/3. Principe de hiérarchie des ombres/
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.06);
Plus l'élément est proche de l'utilisateur, plus l'ombre est forte (pop-up > carte > Bouton)
- Les éléments de même niveau ont une intensité d'ombre constante
- Évitez une intensité d'ombre excessive et maintenez l'unité visuelle
- 4. Notes sur les performances
Les ombres affecteront les performances de rendu. Recommandations :
Réduire l'utilisation des ombres sur les terminaux mobiles
- Éviter de changer l'ombre de la boîte pendant les animations
- Envisager d'utiliser des pseudo-éléments pour les ombres de grande surface
- Résumé de mon expérience
Après avoir utilisé l'outil de visualisation, mon flux de travail est devenu :
Ouvrir l'outil
- — Chargement de la page < 1 secondeAjuster les paramètres
- — Faites glisser le curseur et prévisualisez en temps réelCopier le code
- — Utilisez le copier-coller en un clicRéglage et optimisation
- — Affinez en fonction de l'effet réelL'ensemble du processus est fluide et naturel, et il n'y a plus la frustration de « cela ne fonctionne toujours pas après une longue période de modification ».
Vérification rapide des paramètres d'ombre
Effet
| offset-x | offset-y | flou | étalement | opacité | Légèrement flottant |
|---|
| 2px| ||8px | 0 | 10% | Carte souple | 0 | 24px |
| 15% | 0 | 8px | Couche flottante forte | 0 | 12px |
| 32px | 0 | 20% | Effet debossed | 0 | 4px |
| 6% (en médaillon) | 0 | 2px | Résumé | 0 | Le réglage des paramètres de CSS box-shadow ne devrait pas être un fardeau pour le développement. Avec l'outil de visualisation, je peux : |
⚡ Générer rapidement du code fantôme
👁️ Prévisualiser l'effet en temps réel
- 🎯 Contrôler avec précision chaque paramètre
- 📋 Copier et utiliser en un clic
- Effectuez tous les ajustements des ombres en 20 minutes, le concepteur est satisfait et je gagne beaucoup de temps. C’est la façon efficace de travailler.
- 📋 一键复制使用
20 分钟完成所有阴影调整，设计师满意，我也省了大量时间。这才是高效的工作方式。