Con CSS3, una gran cantidad de efectos de sombra de texto están disponibles para que juguemos. En este artículo, cubriremos algunos de los efectos que puede crear con relativamente poco código CSS.
Las sombras de texto CSS3 se pueden aplicar a cualquier texto de la página. La sintaxis de las sombras de texto es la siguiente:
text-shadow:xPosition yPosition blurSize color;Dónde:
Suponiendo que tuviéramos un párrafo con la clase “myText” dentro de nuestro HTML, podríamos aplicar una sombra de texto con el siguiente CSS:
p.myText { text-shadow:1px 1px 2px #f00; }Aquí le estamos pidiendo al navegador que cree una sombra de texto de 1 píxel en la parte inferior derecha del texto, con un desenfoque de 2 píxeles y un color rojo (que tiene el valor hexadecimal #ff0000, que se puede acortar a #f00). Y aquí está el efecto final:
Quizás el rojo no sea el mejor color. Aquí hay una versión en gris:
p.myText { text-shadow:2px 2px 2px #aaa; }
Aquí, hemos creado un efecto de sombra de texto más agradable que complementa la fuente.
Para los fanáticos de la tipografía, vale la pena señalar que, en algunos navegadores, el uso de la sombra de texto en realidad adelgaza ligeramente la fuente, ya que activa un método de suavizado diferente. En el siguiente ejemplo, el texto superior se representa sin sombra de texto, mientras que el texto inferior tiene una sombra de texto blanca y parece ligeramente más delgado.
Entonces, ¿qué navegadores admiten la sombra de texto? ¡Buenas noticias! ¡Bastante!
Lamentablemente, Internet Explorer no es compatible con las sombras de texto hasta la versión 10. Para los navegadores que no son compatibles con las sombras de texto, el texto seguirá apareciendo, pero faltará la sombra.
Con la sombra de texto CSS3, puede crear muchos efectos diferentes. Echemos un vistazo a algunos:
Usando valores negativos para xPosition e yPosition, podemos mover la sombra del texto hacia la parte superior izquierda.
p.myText { text-shadow:-2px -2px 2px #aaa; }Al configurar el color de fuente al mismo que el fondo, podemos crear un efecto de solo sombra.
p.myText { color:#fff; text-shadow:2px 2px 2px #000; }Tener una posición x y una posición y de 0 junto con un gran desenfoque crea este efecto.
p.myText { color:#fff; text-shadow:0 0 5px #000; }Establecer el color de la fuente en transparente crea este efecto que hace que el texto se vea borroso.
p.myText { color:transparent; text-shadow:0 0 5px #000; }Establecer el desenfoque en 0 nos da otro efecto.
p.myText { text-shadow:2px 2px 0 #aaa; }Al usar una coma, podemos especificar varias sombras de texto. Aquí hemos creado la primera sombra de texto con el mismo color que el fondo para dar un efecto semi-3D.
p.myText { text-shadow:1px 1px 0 #fff, 2px 2px 0 #000; }Tu sombra puede estar tan cerca o tan lejos del texto como quieras. Vigile los elementos con la propiedad de desbordamiento de CSS si la configura demasiado lejos, ya que pueden cortar la sombra.
p.myText { text-shadow:30px 10px 0 #aaa; }Puedes usar tantas sombras como quieras. Aquí he creado un hermoso efecto de arcoíris.
p.myText { color:#000; text-shadow:1px 1px 0 red, 2px 2px 0 orange, 3px 3px 0 yellow, 4px 4px 0 green, 5px 5px 0 blue, 6px 6px 0 indigo, 7px 7px 0 violet; }Al crear 4 sombras alrededor del texto, podemos crear un efecto de contorno.
p.myText { color:#fff; text-shadow:-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000; }Al usar un color de fuente rgba o hsla, podemos ver un valor de transparencia alfa que nos permite ver a través del texto y ver la sombra debajo.
p.myText { color:rgba(0,0,0,0.5); text-shadow:3px 3px 0 #aaa; }RGBA es una característica nueva para CSS3 que le permite establecer un valor de transparencia alfa para los colores RGB. Los valores de transparencia alfa pueden oscilar entre 0 y 1. Un valor alfa de 0 hará que el color sea completamente transparente, mientras que un valor de 1 garantizará que no haya transparencia. 0.5 y 0.8 funcionan bien para la mayoría de los efectos.
HSL y HSLA también son nuevos formatos de color para CSS3 y nos permiten definir colores en función del tono, la saturación y la luminosidad. El valor del tono comienza con el rojo en 0, con el verde en 120, el azul en 240 y vuelve al rojo en 360. La saturación y la luminosidad son porcentajes, y el 100 % proporciona el valor más saturado/más claro.
Si desea obtener más información sobre cada uno de los efectos de sombra de texto que se muestran aquí, he subido el código a JSFiddle.
En un artículo posterior, exploraremos @font-face y cómo le permite usar fuentes personalizadas como texto web. Hasta entonces, ¡diviértete usando estas sombras de texto!