12 divertidas sombras de texto CSS que puedes copiar y pegar

La tipografía es el juguete favorito de todos en el diseño web. Una herramienta especialmente divertida que CSS te ofrece para jugar con tu tipografía es sombra de texto que, a primera vista, parece sencillo, pero que puede utilizarse para crear efectos extraordinarios con un poco de ingenio y creatividad.

Hoy vamos a repasar varios sombra de texto ejemplos que puede copiar y pegar para su propio trabajo.

Ver más

La sombra básica

En sombra de texto es muy fácil trabajar con él y funciona bien en todos los sitios. moderno Sin embargo, el uso de herramientas como Modernizr te ayudará a conseguir efectos CSS3 avanzados incluso en navegadores más antiguos, si necesitas soporte fallback.

Sintaxis

La sintaxis para crear un sombra de texto 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 acción, aquí hay un ejemplo con una sombra que se ha movido hacia abajo dos píxeles y a la derecha cuatro píxeles con un desenfoque de tres píxeles y un color de negro al 30% de opacidad.

Aquí está el resultado de este código, una bonita y simple sombra que es bastante atractiva por sí misma.

¿Por qué rgba?

Como nota rápida, usted no tiene que utilizar rgba para el color de su sombra, sino que puede utilizar cualquiera de los métodos de color CSS. Sin embargo, me parece que rgba es la configuración de color ideal para una sombra, ya que añade otra dimensión para trabajar. No sólo se puede establecer la posición, el desenfoque y el color de la sombra, 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 normalmente tendría que ir a la caza de un acento decente para el color de fondo que es tal vez un poco más oscuro o más claro. Con rgba sólo tiene que utilizar negro o blanco y reducir la opacidad para mezclarlo con el fondo.

Tipografía rápida y sucia

Lo mejor de sombras de texto Por ejemplo, aquí tienes un truco rápido para crear la ilusión de un texto insertado.

Lo primero que debe hacer es establecer el color del texto en un tono ligeramente más oscuro que el color de fondo. A continuación, aplique un ligero toque de blanco. sombra de texto con una opacidad reducida.

Como puede ver, utilicé un color de fondo de #222 y luego puse el texto en negro con una opacidad del 60%. Por último, mi sombra blanca se colocó ligeramente hacia abajo y a la derecha con una opacidad del 10%.

Sombra dura

Recuerda que no tienes que difuminar la sombra en absoluto. Debido a su naturaleza retro, las sombras de texto duras están muy de moda ahora mismo, así que no dudes en experimentar con ellas en tus diseños.

Doble sombra

Lo realmente divertido empieza cuando te das cuenta de que no estás limitado a una sola sombra. Utilizando una coma para separar las declaraciones, ¡puedes aplicar tantas sombras como quieras!

Este es el esquema básico de la sintaxis. Observa 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í tienes un ejemplo con un tratamiento de texto que verás por toda la web ahora mismo. La idea es básicamente aplicar dos sombras, la primera de las cuales es del mismo color que tu fondo.

El resultado es casi una sensación de periódico antiguo.

Abajo y lejos

Una vez que empiezas a crear capas de sombras, los resultados son cada vez más impresionantes. Es muy fácil empezar a crear bonitos efectos de imitación 3D que los usuarios expertos en diseño web no creerán que es texto real.

Abajo utilicé la friolera de cuatro sombras, todas apuntando directamente hacia abajo con distintos grados de distancia y desenfoque.

Cercano y pesado

Aquí tienes 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 el texto parezca un poco más pesado.

Un poco de ayuda

Echando un vistazo a lo que han hecho otros diseñadores, he encontrado dos técnicas excelentes que me han parecido perfectas para este post. La primera es de Mark Dotto y la segunda de Gordon Hall.

Texto seriamente tridimensional de Mark Dotto

Este es un ejemplo que siempre me ha parecido realmente impresionante. Procede de MarkDotto.com y utiliza la impresionante cantidad de doce sombras distintas para conseguir un efecto 3D muy creíble.

El verdadero texto de Gordon Hall

En el ejemplo anterior, he llamado a mi técnica efecto tipográfico "rápido y sucio", porque hay una forma mucho más compleja de crear un texto insertado serio y mucho más creíble.

Gordon utiliza un auténtico vudú CSS para conseguir no sólo una sombra exterior, sino también una auténtica sombra interior. Echa un vistazo a la entrada de su blog para obtener una explicación completa de la técnica.

Más sombras divertidas

Ahora que ya te has hecho una idea de la lógica que hay detrás del código, aquí tienes unos cuantos ejemplos más que he preparado sin las aburridas explicaciones. Siéntete libre de robarlos y utilizarlos en tu trabajo.

Brillante

Superhéroe

Múltiples fuentes de luz

Relieve suave

Conclusión

Como la mayoría de los efectos CSS, las sombras de texto son extremadamente sencillas de implementar de forma básica, pero pueden adoptar una gran variedad de formas diferentes si realmente les dedicas un poco de trabajo. Utilizando comas como separador, puedes apilar sombras CSS unas sobre otras para aumentar drásticamente el interés y el realismo del efecto.