Durante años mis sombras parecían falsas y no podía entender por qué. Yo escribiría box-shadow: 0 5px 10px black, consigue un halo gris fangoso, tonifícalo y sigue adelante sintiéndote vagamente insatisfecho. Parecía que la carta tenía un hematoma, no una sombra. Sólo cuando comencé a separar los sistemas de diseño que admiraba, aquellos en los que las cartas parecen flotar genuinamente, me di cuenta del truco. Nunca usan una sombra. Apilan dos o tres, cada uno haciendo un trabajo diferente, y el resultado se lee como una luz que se comporta de la misma manera que realmente se comporta la luz.
Me gano la vida construyendo interfaces en React y Tailwind, mantengo un tema de administración de WordPress en WP Adminify donde las sombras tienen gran parte de la jerarquía visual y construí el Generador de sombras de caja CSS en Toolz.dev porque me cansé de ajustar manualmente sombras multicapa en un editor de texto y recargarlas para ver el resultado. Esta guía es todo lo que he aprendido sobre box-shadow propiedad: qué hace cada valor, por qué funcionan las capas, cómo evitar las trampas comunes y cómo utilizar el generador para pasar de un elemento en blanco a un CSS de producción en un par de minutos.
TL;Dr: Un CSS
box-shadowtoma un desplazamiento X, un desplazamiento Y, un radio borroso, un radio extendido y un color, con un opcionalinsetpalabra clave. El desenfoque suaviza el borde; la extensión crece o reduce la sombra antes de desenfocarla. La elevación real proviene de apilar múltiples sombras separadas por comas, no de activar una sombra 's opacidad. Utilice negro de baja opacidad, un pequeño desplazamiento en Y, un desenfoque generoso y un ensanchamiento ligeramente negativo; luego copie el CSS directamente desde el generador.
¿qué hace realmente la propiedad de sombras de caja?
box-shadow pinta una o más sombras alrededor de un elemento 's cuadro fronterizo y la propiedad se especifica en Antecedentes y fronteras de CSS Nivel 3. La sintaxis de una sola sombra se ve así:
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
Se requieren compensaciones; el desenfoque, la dispersión y el color son opcionales pero casi siempre los configurarás. Esto es lo que controla cada uno, en la forma en que pienso sobre ellos al afinar:
Compensación X mueve la sombra horizontalmente. Los valores positivos lo empujan hacia la derecha y los negativos hacia la izquierda. Para la mayoría de las sombras de la interfaz, desea esto en cero o cerca de él, porque la luz en el mundo real generalmente proviene de arriba, proyectando sombras hacia abajo en lugar de hacia un lado.
Compensación Y mueve la sombra verticalmente. Los valores positivos lo empujan hacia abajo, que es lo que desea para un elemento que parece estar encima de la página. Este es el valor único que más controla cómo "high" el elemento se siente.
Radio borroso suaviza la sombra's borde. Un valor de cero da una sombra de bordes duros como una forma sólida; valores más grandes distribuyen la suavidad. Esto no puede ser negativo. Casi todas las sombras de aspecto natural utilizan un desenfoque varias veces mayor que su desplazamiento Y.
Radio de dispersión cambia el tamaño de la sombra antes de aplicar el desenfoque. La dispersión positiva hace que la sombra sea más grande en todas direcciones; la dispersión negativa la encoge. La dispersión negativa es el arma secreta para sombras de cartas apretadas y creíbles, porque atrae la sombra para que no se desangre más allá del elemento.
Color es cualquier color CSS válido. Las mejores sombras de interfaz usan negro o casi negro con baja opacidad, algo así como rgba(0, 0, 0, 0.1) - en lugar de un gris completamente opaco, porque un negro translúcido tiñe todo lo que hay detrás de él como lo hace una sombra real.
¿Por qué las buenas sombras utilizan más de una capa?
Esta es la idea que cambió mis sombras por completo, por lo que tiene su propia sección. Una sola sombra es una única mancha uniforme. Las sombras reales no son uniformes. Cerca del objeto la sombra es más oscura y nítida; más lejos es más claro y difuso. Te aproximas a esa caída apilando sombras.
Una receta clásica consta de dos capas: una sombra apretada y ligeramente más oscura que se asienta cerca del elemento y le da una base nítida, además de una sombra más suave, ancha y clara debajo que proporciona la difusión ambiental. Algo como:
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
El navegador pinta sombras separadas por comas en orden, con la primera encima. Cada capa es barata y dos o tres juntas se leen como profundidad genuina de una manera que ninguna sombra puede hacerlo, sin importar cómo la sintonice. Esta es exactamente la razón por la que el generador se construye alrededor de capas en lugar de un solo conjunto de controles deslizantes: el Generador de sombras de caja CSS se envía con ajustes preestablecidos como Tarjeta, Elevado y Flotante, todos de varias capas, por lo que comienzas desde una base realista en lugar de una masa solitaria.
El modelo mental que uso: piensa en los niveles de elevación. Una carta en reposo se encuentra baja con una sombra pequeña y apretada. Un menú desplegable o emergente se ubica más alto con uno más grande y suave. Un modal se encuentra más alto de todos. Aumentar la elevación significa aumentar el desplazamiento de la Y y desenfocar todas las capas juntas, no solo oscurecer una sombra.
¿Cómo creo una sombra interior?
los inset la palabra clave voltea una sombra dentro del elemento 's caja de relleno en lugar de proyectarla hacia afuera. Agregar inset al frente de una declaración de sombra y pinta dentro del elemento:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
Las sombras internas son la forma en que se hace que un control parezca presionado, empotrado o tallado. Una entrada de texto a menudo se lee mejor con una sutil sombra insertada que sugiere un pozo en el que se encuentra el texto. Un estado de botón presionado puede cambiar su sombra exterior por una interior para sentirse físicamente deprimido. Y toda la tendencia del neumorfismo se basa en combinar un recuadro de luz de una dirección con un recuadro oscuro de la otra. En el generador, el recuadro es un solo interruptor por capa, por lo que puedes mezclar sombras insertadas y iniciales en el mismo elemento, que es exactamente lo que necesitan las superficies neumórficas.
¿cómo uso el generador Box Shadow?
El flujo está diseñado para adaptarse a cómo realmente trabajo. Abra el Generador de sombras de caja CSS y aterrizas en un elemento de vista previa con un ajuste preestablecido de tarjeta realista ya aplicado, por lo que nunca estás mirando un lienzo en blanco.
Elija un ajuste preestablecido para acercarse a lo que desea: Sutil, Tarjeta, Elevado, Flotante, Interior, Resplandeciente, Neumórfico o Afilado. Cada uno carga su pila de capas completa. Luego seleccione una capa y sintonícela con los controles deslizantes: desplazamiento X, desplazamiento Y, desenfoque y dispersión, cada uno tiene su propio control, además de un selector de color, un control deslizante de opacidad y el interruptor insertado. Las actualizaciones de vista previa se transmiten a medida que arrastras, por lo que estás dando forma a la sombra directamente en lugar de editar números e imaginar el resultado.
Si necesitas más profundidad, agrega una capa. Si una capa no hace nada útil, retírala. Hay un interruptor de fondo que cambia la vista previa entre claro y oscuro, lo cual importa porque una sombra que se ve perfecta en una tarjeta de luz puede desaparecer o convertirse en un feo anillo gris en una oscura. Comprobar ambos antes de realizar el envío ahorra un viaje de ida y vuelta.
Cuando estés contento, copia el CSS. Puedes agarrar el simple box-shadow declaración, o un bloque que también incluye el -webkit-box-shadow prefijo si tiene que admitir compilaciones WebKit muy antiguas. Péguelo en su hoja de estilo, su componente de estilo o su valor arbitrario de Tailwind y listo.
Como todas las herramientas del sitio, se ejecuta completamente en su navegador. No se carga nada y sigue funcionando sin conexión una vez cargado, que es el mismo enfoque del lado del cliente que describo en Guía de privacidad de datos.
Casos de uso del mundo real
Construcción de una escala de elevación para un sistema de diseño
Cuando configuro un nuevo proyecto, defino un conjunto fijo de niveles de elevación en lugar de dejar que cada componente invente su propia sombra. Por lo general, eso es cuatro o cinco pasos desde " tarjeta de descanso" hasta "modal." Construyo cada uno en el generador, copio el CSS y lo coloco en mis tokens de diseño como valores nombrados. Cada tarjeta, menú y cuadro de diálogo hace referencia a un nivel, por lo que todo el producto comparte un modelo de iluminación consistente. Hacer esto a mano en un editor de texto es miserable; hacerlo con una vista previa en vivo toma unos minutos.
Hacer que una tarjeta realmente flote
El instinto predeterminado es una única sombra oscura, que parece pegada. La solución es la receta de dos capas: una capa ajustada con un pequeño desplazamiento en Y y una extensión negativa para anclar la tarjeta, y una capa más ancha y suave debajo para obtener luz ambiental. Comience desde la tarjeta o el ajuste preestablecido elevado, ajuste los valores al gusto y obtendrá una tarjeta que se lee como elevada en lugar de delineada.
Diseño de estados prensados y enfocados
La retroalimentación interactiva a menudo vive en la sombra. Un botón puede perder la mayor parte de su sombra exterior y obtener una pequeña inserción al presionarlo para sentirse presionado físicamente. Una entrada puede llevar un recuadro sutil permanente para que parezca un pozo. Estos se crean rápidamente mediante el prototipo alternando el recuadro y viendo la vista previa, y agregan mucho pulido percibido para muy poco código.
Superficies neumórficas
Si opta por el aspecto de interfaz de usuario suave, necesita dos sombras en el mismo elemento que apunten en direcciones opuestas: una oscura a la derecha y otra clara a la izquierda, para que la superficie aparezca extruida del fondo. El ajuste preestablecido Neumorphic configura esto y afina el color, la opacidad y el desenfoque para que coincidan con su fondo específico. Solo funciona en fondos que no son ni blanco puro ni negro puro, que el interruptor de fondo oscuro te ayuda a verificar.
sombra de caja versus filtro: sombra de caída
Una pregunta que recibo a menudo: ¿cuándo debo utilizarla filter: drop-shadow() en vez de box-shadow? Se parecen pero se comportan de manera diferente y elegir mal provoca errores reales.
| ráfaga | sombra de caja | filtro: sombra caída() |
|---|---|---|
| Sigue | La caja de borde rectangular | Los píxeles visibles (no transparentes) reales |
| mejor para | Tarjetas, botones, paneles, entradas | Logotipos, iconos, PNG con transparencia, formas irregulares |
| Admite recuadro | sí | prohibido |
| Apoya la propagación | sí | prohibido |
| Múltiples sombras | Sí, separados por comas | Sí, encadenando filtros |
| Afecta el diseño | prohibido | prohibido |
La versión corta: para un elemento rectangular normal, utilice box-shadow - es más capaz, admite spread e inset, y es lo que produce este generador. Alcance para drop-shadow() sólo cuando necesitas que la sombra trace una forma transparente o irregular, como un logotipo o un ícono recortado, donde una sombra rectangular se vería mal.
Consejos y trampas avanzados
Algunas cosas por las que me han quemado. Primero, las sombras pasan overflow: hidden sobre un antepasado. Si tu hermosa sombra se corta misteriosamente, un antepasado la recorta, ya sea dale espacio a la sombra o muévela overflow gobierna en otra parte. Porque box-shadow nunca afecta el diseño, no empuja los elementos vecinos, lo cual es una característica, pero también significa que una sombra puede extenderse silenciosamente debajo de un hermano.
En segundo lugar, los enormes desenfoques en muchos elementos pueden costar el rendimiento de la pintura, especialmente cuando están animados. Si animas una sombra al desplazarse o pasas el cursor sobre una lista larga, observa la velocidad de fotogramas; a veces es más barato animar la opacidad en un pseudoelemento que contiene una sombra estática. Una vez finalizado su CSS, ejecútelo a través del Minifiero CSS reduce los bytes adicionales que agregan las sombras detalladas de varias capas.
En tercer lugar, no olvide que el color de las sombras puede ser más que negro. Una sombra muy sutilmente teñida, una versión oscura de su superficie y un tono negro puro, a menudo parece más rica que el gris neutro, porque las sombras reales captan el color ambiental. Es un pequeño movimiento con una recompensa desproporcionada.
Si está ensamblando un kit de herramientas CSS más amplio, el Guía del kit de herramientas para desarrolladores web cubre dónde encaja el trabajo de sombras entre las otras utilidades basadas en navegador y, una vez que sus sombras hayan terminado, Generador de gradiente y selector de colores complete el estilo de la superficie. Si tiene en mente la accesibilidad, combínelo con Revisador de contraste de color por lo tanto, el contenido que se encuentra en sus tarjetas sombreadas sigue siendo legible.
preguntasrán el
¿Qué es la propiedad de la caja de CSS?
box-shadow agrega una o más sombras alrededor de un marco de elemento 's. Cada sombra toma un desplazamiento horizontal, un desplazamiento vertical, un radio borroso opcional, un radio extendido opcional y un color, con una palabra clave insertada opcional para dibujar la sombra dentro del cuadro. Varias sombras están separadas por comas y pintadas con la primera en la parte superior.
¿Cuál es la diferencia entre desenfoque y difusión?
El radio borroso suaviza el borde de la sombra, por lo que un valor mayor lo hace más difuso. El radio de dispersión cambia el tamaño de la sombra 's antes de difuminarse: una extensión positiva lo hace crecer en todas direcciones, mientras que una extensión negativa lo reduce, que es como se mantiene una sombra metida firmemente debajo de una tarjeta en lugar de sangrar más allá de sus bordes.
¿Cómo creo una sombra interior en CSS?
Agregue la palabra clave insertada a la sombra. el recuadro dibuja la sombra dentro del elemento 's caja de relleno en lugar de afuera, lo cual es útil para botones presionados, pozos de entrada y superficies neumórficas. Al alternar el interruptor de inserción en el generador, se agrega automáticamente a la capa seleccionada.
¿Puedo usar varias sombras de caja en un elemento?
Sí. Puede enumerar varias sombras en una única declaración de sombras de cuadro separadas por comas, y el navegador las pinta en orden con la primera encima. Colocar capas de una sombra suave y ancha debajo de una más pequeña y oscura es la forma estándar de hacer que la elevación parezca realista en lugar de pegada.
¿Por qué se corta mi sombra de caja?
Una sombra se corta cuando un antepasado se desborda: oculta o cuando el elemento se asienta en el borde de un contenedor de recorte. Dale espacio a la sombra o mueve el desbordamiento: regla oculta a un elemento diferente. Debido a que la sombra de caja no afecta el diseño, nunca empuja los elementos vecinos, por lo que también puede extenderse silenciosamente debajo de un hermano.
¿Cuál es la diferencia entre la sombra de caja y el filtro: sombra de caída?
box-shadow sigue el cuadro de borde rectangular de element's, por lo que ignora las áreas transparentes dentro de un PNG o una forma irregular. filtro: drop-shadow() rastrea los píxeles visibles reales, lo que se adapta a logotipos e íconos con transparencia. Para tarjetas y botones rectangulares estándar, box-shadow es la opción correcta y admite una extensión e inserción que drop-shadow no lo hace.
¿Todavía necesito el prefijo -webkit- para caja-sombra?
Para los navegadores modernos, no. box-shadow no tiene prefijo y es ampliamente compatible desde hace muchos años. El bloque con prefijo que el generador puede generar solo es útil si debe admitir compilaciones WebKit muy antiguas, y para la mayoría de los proyectos la propiedad estándar de sombras de cuadros por sí sola es suficiente.
¿Este generador de sombra de caja envía mis datos a alguna parte?
prohibido . La vista previa y la salida CSS se generan completamente en su navegador con JavaScript. No se cargan ni almacenan valores, y la herramienta continúa funcionando sin conexión de red una vez que la página se ha cargado.
