El diseñador envió un nuevo borrador de diseño de interfaz de usuario y lo abrí para echarle un vistazo: todo tipo de hermosas tarjetas, botones y ventanas emergentes, todos con suaves efectos de sombra. Estos detalles hacen que la interfaz parezca en capas, moderna y sofisticada.
Pero aquí surge la pregunta: ¿Cómo restaurar estas sombras?
El dolor de ajustar manualmente los parámetros
Al principio, pensé que era muy simple. ¿No es solo
box-shadow? Comencé a ajustar las herramientas de desarrollo del navegador:
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
Guardar, actualizar, incorrecto. Cambiar de nuevo:
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12);
Todavía estoy equivocado. Después de ir y venir más de veinte veces, el diseñador dijo: "Aún no se siente bien. Necesito hacerlo más suave..."
Estaba devastada.
trampa de parámetros de box-shadow
box-shadow tiene 5 parámetros:
- desplazamiento horizontal(offset-x) — la sombra se mueve hacia la izquierda o hacia la derecha
- desplazamiento vertical(offset-y) — la sombra se mueve hacia arriba o hacia abajo
- radio de desenfoque(radio de desenfoque) — grado de desvanecimiento de la sombra
- radio de extensión(radio de extensión) — escala de sombra
- color(color) — El color de la sombra admite transparencia
Si cada parámetro se cambia a poco, el efecto será completamente diferente. Peor aún:
- Los valores positivos y negativos tienen efectos completamente opuestos en diferentes direcciones
- La interacción del radio de desenfoque y el radio de difusión es difícil de entender intuitivamente
- La transparencia del color debe convertirse al formato RGBA
Pasó media hora y todavía estaba ajustando la primera sombra. Hay más de 20 efectos de sombra diferentes en toda la página...
Resolviendo el problema con herramientas visuales
Abrí el generador de sombras CSS de ToolMi.
La interfaz es muy intuitiva:
- 5 controles deslizantes para controlar varios parámetros
- Efecto de visualización del área de vista previa en tiempo real
- Admite cambio de sombra interior/sombra exterior
- Copie el código generado con un clic
Primer intento
El diseñador dijo: "La sombra de esta tarjeta es más suave y tiene un sentido de jerarquía".
En las herramientas I:
- Arrastro el Radio de desenfoque a 24px
- Establezco la opacidad al 15%
- Ajusto el desplazamiento vertical a 8px
El área de vista previa en vivo mostró inmediatamente el efecto: ¡exactamente la sombra suave que quería!
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);
Haga clic en copiar, pegar en el código y actualizar la página. El diseñador lo miró y dijo: "¡Sí, eso es lo que se siente!"
Procesamiento por lotes de todas las sombras
Después del primer éxito, lo procesé mucho más rápido:
- Sombra de botón:
0px 2px 8px rgba(0, 0, 0, 0.1) - Sombra emergente:
0px 12px 32px rgba(0, 0, 0, 0.2) - Sombra de enfoque del cuadro de entrada:
0px 0px 0px 3px rgba(66, 153, 225, 0.3)
Cada sombra tarda un promedio de 30 segundos en completarse, incluida la vista previa y el ajuste.
De 2 horas a 20 minutos
Permítanme calcular la comparación de eficiencia:
| Método | Tiempo de sombra única | 20 sombras tiempo total | Precisión |
|---|
| Ajuste manual | 5 minutos||~100 minutos | 60% | Herramientas de visualización |
| 1 minuto | ~20 minutos | 95% | Consejos prácticos |
1. Parámetros de sombra de uso común
Después de muchas prácticas, he resumido algunos parámetros comunes:
Sombra de tarjeta suave:
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
- Sombra de ventana emergente flotante:
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
- 2. Uso de sombra interior
box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.2);
La sombra interior puede crear un efecto hundido:
Efecto hundido del cuadro de entrada
/3. Principio de jerarquía de sombras/
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.06);
Cuanto más cerca esté el elemento del usuario, más fuerte será la sombra (emergente > tarjeta > Botón)
- Los elementos en el mismo nivel, tienen una intensidad de sombra constante
- Evite una intensidad de sombra excesiva y mantenga la unidad visual
- 4. Notas de rendimiento
Las sombras afectarán el rendimiento del renderizado. Recomendaciones:
Reducir el uso de sombras en terminales móviles
- Evitar cambiar la sombra del cuadro durante las animaciones
- Considere usar pseudoelementos para sombras de áreas grandes
- Resumen de mi experiencia
Después de usar la herramienta de visualización, mi flujo de trabajo se convirtió en:
Abrir la herramienta
- — Cargando página < 1 SegundosAjustar parámetros
- — Arrastre el control deslizante y obtenga una vista previa en tiempo realCopiar código
- — Usar copiar y pegar con un clic Ajuste y optimización
- — Ajuste de acuerdo con el efecto real Todo el proceso es fluido y natural, y ya no existe la frustración de "todavía no funciona después de un largo tiempo de modificación".
Comprobación rápida del parámetro de sombra
Efecto
| offset-x | offset-y | desenfoque | spread | opacidad | Ligeramente flotante |
|---|
| 2px| ||8px | 0 | 10% | Tarjeta blanda | 0 | 24px |
| 15% | 0 | 8px | Capa flotante fuerte | 0 | 12px |
| 32px | 0 | 20% | Efecto grabado | 0 | 4px |
| 6% (inserto) | 0 | 2px | Resumen | 0 | El ajuste de parámetros de CSS box-shadow no debería ser una carga para el desarrollo. Con la herramienta de visualización, puedo: |
⚡ Generar rápidamente código de sombra
👁️ Vista previa del efecto en tiempo real
- 🎯 Controlar con precisión cada parámetro
- 📋 Copiar y usar con un clic
- Complete todos los ajustes de sombras en 20 minutos, el diseñador queda satisfecho y ahorro mucho tiempo. Esta es la forma eficiente de trabajar.
- 📋 一键复制使用
20 分钟完成所有阴影调整，设计师满意，我也省了大量时间。这才是高效的工作方式。