Sombras, degradados, bordes redondeados y efectos de vidrio son cosas que se escriben en CSS con una sintaxis que hay que memorizar. El generador de NEUBOX te deja ajustarlos con controles y ver el resultado en el momento, y luego te da el código.
Herramienta: Generador de efectos CSS
Cinco efectos, cinco pestañas
- Sombra: la más útil de todas. Sirve para separar una tarjeta del fondo.
- Degradado: transiciones de color para fondos y botones.
- Vidrio: el efecto translúcido con desenfoque de lo que hay detrás.
- Neumorfismo: el relieve suave, como si el elemento saliera del fondo.
- Bordes: control fino de cada esquina.
Ajusta con los controles, mira la vista previa, y cuando te guste copia el código y pégalo en tu hoja de estilos.
Cómo hacer una sombra que se vea bien
Es el efecto que más se usa y el que más se hace mal. Tres reglas:
- La luz viene de arriba. La sombra va hacia abajo, con desplazamiento horizontal cero o casi. Una sombra hacia arriba se ve rara sin que sepas por qué.
- Suave y con poca opacidad. Un negro al 10 o 15% con bastante desenfoque se ve profesional. Un negro sólido se ve de plantilla de los dos mil.
- Entre más “levantado” el elemento, más grande y más difusa la sombra. Una tarjeta lleva sombra chica; una ventana emergente, una grande.
Dos advertencias sobre los efectos vistosos
El efecto de vidrio necesita contraste. Se ve espectacular sobre una foto colorida, y el texto encima se vuelve ilegible. Si lo usas, comprueba que el texto se lea con el fondo real, no con el de la vista previa.
El neumorfismo tiene un problema de fondo: el relieve es tan sutil que muchas veces no se distingue un botón de una etiqueta. Se ve bonito en una captura y confunde en uso real. Úsalo con cuidado, y nunca como la única señal de que algo se puede tocar.
Dónde va el código
Lo que copias es un conjunto de propiedades. Van dentro de la regla del elemento al que quieres aplicárselas, en tu hoja de estilos.
En WordPress, en Apariencia, Personalizar, hay una sección de CSS adicional donde se puede pegar sin tocar los archivos del tema.
Un consejo de orden: define tus dos o tres sombras y reutilízalas, en vez de generar una distinta para cada elemento. Un sitio con quince sombras diferentes se ve descuidado aunque cada una, por separado, esté bien.
Herramientas que se usan junto con esta
- Generador de paletas de color, para que los colores de los efectos salgan de tu paleta.
- Minificador de código, cuando vayas a publicar.
En la página de la herramienta está la guía completa, con ejemplos de sombra por caso de uso.