La tipografía es el juguete favorito de todos en el diseño web. Una herramienta particularmente divertida que CSS te ofrece para jugar con tu tipo es sombra de texto, lo que parece bastante simple al principio pero puede usarse para crear algunos efectos notables con un poco de ingenio y creatividad.
Hoy vamos a correr a través de varios sombra de texto Ejemplos que puedes copiar y pegar para tu propio trabajo.
La sombra basica
los sombra de texto La propiedad es muy fácil de trabajar y funciona bien en todos moderno navegadores sin siquiera un prefijo de proveedor! Sin embargo, el uso de herramientas como Modernizr te ayudará a sacar efectos avanzados de CSS3 incluso en navegadores más antiguos, si necesitas soporte alternativo.
Sintaxis
La sintaxis para crear un sencillo. sombra de texto se muestra a continuación. Tienes cuatro variables con las que trabajar, las dos primeras establecen la posición de la sombra, la tercera establece la cantidad de desenfoque y la cuarta el color de la sombra.
Poniendo esto en práctica, aquí hay un ejemplo con una sombra que se ha movido hacia abajo dos píxeles y cuatro píxeles a la derecha con un desenfoque de tres píxeles y un color negro con una opacidad del 30%.
Aquí está el resultado de este código, una bonita sombra simple que es bastante atractiva por sí misma.
¿Por qué rgba?
Como nota rápida, no tiene que usar rgba para el color de su sombra, pero puede utilizar cualquiera de los métodos de color CSS. Sin embargo, encuentro que rgba es la configuración de color ideal para una sombra porque agrega otra dimensión con la que trabajar. No solo puede establecer la posición, el desenfoque y el color de la sombra, sino que también puede establecer su opacidad utilizando el valor alfa.
En realidad, esto es más fácil que trabajar con otros métodos de color, ya que es probable que tenga que buscar un acento decente para el color de fondo que es quizás un poco más oscuro o más claro. Con rgba puedes usar negro o blanco y reducir la opacidad para mezclarlo con el fondo.
Tipografía rápida y sucia
Lo bueno de sombras de texto es que realmente puedes hacer mucho más con ellos que tu sombra promedio. Por ejemplo, aquí hay un truco rápido para crear la ilusión de texto insertado.
Lo primero que debes hacer es configurar el color del texto en un tono ligeramente más oscuro que el color de fondo. A continuación, aplicar un ligero blanco. sombra de texto Con una opacidad reducida.
Como puede ver, utilicé un color de fondo del # 222 y luego configuré el texto en negro con una opacidad del 60%. Finalmente, mi sombra blanca se colocó ligeramente hacia abajo y hacia la derecha con una opacidad del 10%.
Sombra dura
Recuerda que no tienes que desenfocar tu sombra en absoluto. Debido a su naturaleza retro, las sombras de texto duro son realmente muy? Ahora mismo, siéntase libre de experimentar con ellos en sus diseños.
Doble sombra
La verdadera diversión comienza cuando te das cuenta de que no estás restringido a una sola sombra. Usando una coma para separar las declaraciones, ¡puedes aplicar tantas sombras como quieras!
Aquí está el esquema básico de la sintaxis. Observe que hay una coma después de las dos primeras sombras y un punto y coma después de la última sombra.
Poniendo esto en práctica, aquí hay un ejemplo con un tratamiento de texto que verá en toda la web ahora mismo. La idea es básicamente aplicar dos sombras, la primera de las cuales es del mismo color que el fondo.
El resultado es casi una sensación de periódico vintage.
Abajo y distante
Una vez que comienzas realmente en capas sobre las sombras, los resultados se vuelven cada vez más impresionantes. Es muy fácil comenzar a crear algunos efectos 3D falsos que los usuarios expertos en diseño web no creerán que sean textos en vivo.
Abajo utilicé cuatro sombras, todas apuntadas hacia abajo con distintos grados de distancia y desenfoque.
Cerca y pesado
Aquí hay otro ejemplo de la misma idea, esta vez con tres sombras que se han mantenido mucho más cerca de la fuente. El efecto hace que tu texto parezca un poco más pesado.
Un poco de ayuda
Mirando alrededor por lo que otros diseñadores han hecho, encontré dos técnicas excelentes que pensé que eran perfectas para este post. El primero viene de Mark Dotto y el segundo de Gordon Hall.
El texto en serio 3D de Mark Dotto
Aquí hay un ejemplo que siempre he pensado que se veía realmente impresionante. Viene de MarkDotto.com y utiliza doce impresionantes sombras separadas para lograr un efecto 3D muy creíble.
Texto de inserción verdadero de Gordon Hall
Note que en el ejemplo anterior llamé a mi técnica "rápida y sucia". efecto de tipografía. Esto se debe a que hay una forma mucho más compleja de crear un texto de inserción serio que es mucho más creíble.
Gordon usa un vudú CSS serio para obtener no solo una sombra exterior sino también una sombra interior genuina. Echa un vistazo a su blog para una explicación completa de la técnica.
Más sombras divertidas
Ahora que tienes una buena idea de la lógica detrás del código, aquí hay algunos ejemplos más que saqué sin las explicaciones aburridas. ¡Siéntete libre de robarlos y usarlos en tu trabajo!
Brillante
Superhéroe
Fuentes de luz múltiples
Relieve suave
Conclusión
Al igual que la mayoría de los efectos de CSS, las sombras de texto son extremadamente simples de implementar en una forma básica, pero pueden tomar una variedad de formas diferentes si realmente se pone algo de trabajo en ellas. Al usar comas como separador, puedes apilar las sombras de CSS una encima de la otra para agregar dramáticamente el interés y el realismo del efecto.