Text Shadow Generator
CSS text shadow
CSS text shadow Se ejecuta localmente en su navegador
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
El Generador de sombras de texto establece el desplazamiento, el desenfoque, el color y la opacidad de una sombra detrás del texto, con una vista previa en vivo y CSS. A diferencia de box-shadow, no tiene valor de dispersión, lo que sorprende a la gente: la única forma de hacer que una sombra de texto sea más pesada es apilar varias sombras en una sola declaración. Es más útil para la legibilidad, poniendo una sutil sombra oscura detrás del texto claro en una fotografía, y nunca debe ser lo que hace que el texto sea legible, porque desaparece en el momento en que cambia el fondo.
Where people use the
- Agregar una sombra sutil para que se lea un título sobre una fotografía.
- Realización de un efecto de título prensado o grabado.
- Producir un tratamiento de texto retro o neón.
- Probar qué tan pesada debe ser una sombra antes de que parezca barata.
How to use the
- 1
Establecer las compensaciones
El desplazamiento X se mueve hacia la derecha, el desplazamiento Y se mueve hacia abajo. Un desplazamiento de uno o dos píxeles se lee como profundidad; cualquier cosa más grande comienza a parecer una sombra paralela.
- 2
Establecer el desenfoque
El desenfoque suaviza el borde. Zero ofrece una copia impresa del texto, que es como se crean los contornos y los efectos retro.
- 3
Elige color y opacidad
El texto oscuro sobre fondos claros necesita una sombra clara y viceversa. Mantenga la opacidad baja a menos que desee un efecto obvio.
- 4
Copia el CSS
La regla incluye el color rgba, listo para pegar.
- 5
Apila sombras si necesitas más peso.
Agrega una segunda sombra separada por una coma en tu hoja de estilo. Ésta es la única manera de espesar la sombra del texto, ya que no se extiende.
Consejos y mejores prácticas
- Menos es más: uno o dos píxeles con baja opacidad superan a un desenfoque intenso.
- Nunca confíe únicamente en una sombra para la accesibilidad; arregla el contraste debajo.
- Recuerde que la propiedad se hereda, así que aplíquela al elemento al que se refiere.
Preguntas frecuentes
¿Por qué no hay valor de diferencial?
Porque text-shadow no lo admite. Su sintaxis es desplazamiento X, desplazamiento Y, desenfoque y color únicamente. Para simular la extensión, apila varias sombras idénticas con desplazamientos ligeramente diferentes.
¿Puedo usarlo para hacer que el texto sea legible sobre una imagen?
Sólo como complemento. Una sombra ayuda en los márgenes pero falla en áreas concurridas y no cuenta para la relación de contraste WCAG, que se mide con respecto al color de fondo. Agregue una malla o un panel sólido si la legibilidad realmente importa.
¿Cómo delineo el texto?
Apila cuatro sombras en más y menos un píxel en cada dirección sin desenfoque. Eso produce un efecto de contorno sin necesidad de -webkit-text-stroke, que no se admite en todas partes.
¿Ralentiza la página?
Una sola sombra estática no cuesta casi nada. Animar una sombra de texto o aplicar una gran sombra borrosa a una gran cantidad de texto es donde aparece el costo de repintar.
¿Se hereda por elementos secundarios?
Sí. La sombra del texto se hereda, por lo que establecerla en un contenedor la aplica a cada descendiente con texto, lo que en ocasiones resulta sorprendente.