Sombras para texto en CSS3

Ahora aprenderemos a poner sombras a textos con CSS3, aprenderemos a utilizar las propiedades CSS correspondientes con sus respectivos valores, al finalizar serás capaz de colocar sombras espectaculares a cualquier elemento de texto que tú quiere, aprenderemos a controlar y establecer las dimensiones de la sombra, la dirección, colores, desenfoque y mucho más. ¡Empezamos!

La propiedad text-shadow

Aplicar una sombra para textos en CSS3 es tan simple como establecer la propiedad tex-shadow y seguidamente indicar los valores de parámetros que conoceremos a continuación.

Parámetros y valores para poner sombra a textos en CSS

Para utilizar las sombras de texto usaremos la propiedad text-shadow, para controlar el aspecto de la sombra, usaremos valores para los siguientes parámetros

  • X-offset.- su valor indica cuanto de sombra en la dirección del eje X, dicho valor puede ser positivo ara sombras hacia la derecha y negativos para sombras a la izquierda, sus unidades de medida pueden ser px, em, pt, etc.
  • Y-offset.- este valor es numérico y puede tener unidades de distancia ya conocidas como los px, em, etc.  su valor indica el desplazamiento de la sombra en dirección Y, es decir verticalmente; el valor puede ser positivo para sombras que se desplazan hacia abajo y los valores negativos harán que la sombra se desplace hacia arriba.
  • Blur.- es un valor numérico expresado en px; este valor determina el desenfoque de la sombra, cuando mayor es el valor mayor desenfoque, cuanto menor su valor menor desenfoque. El desenfoque es como si fuera lo contrario a la nitidez, cuanto mayor la sombra es menos clara y cuanto menor la sombra es más clara y hasta puede llegar a ser un color sólido.
  • Color.- este valor es el color de la sombra, puedes usar palabras claves conocidas como: red (rojo), blue (azul), etc. o puedes expresar un color personalizado mediante los valores hexadecimales, si no estableces el color, por defecto será transparente, eso significa que la sombra no será visible.
Te recomendamos leer:  Filtros CSS3

Como poner sombra a los textos con CSS3

Poner una sombra a un elemento de texto con CSS3 es tan simple como establecer la propiedad text-shadow, seguidamente estableceremos el desplazamiento horizontal (X-offset), el desplazamiento vertical (Y-offset), el desenfoque (blur) y el color (color). En el orden mencionado para que funcione correctamente.

La sintaxis quedaría de la siguiente manera: Text-shadow: X-offset Y-offset blur color;

Mejor veamos algunos ejemplos a continuación para verla en acción.

Ejemplos de text-sadow

Ahora veamos varios ejemplos de sombras en diversas condiciones, con fines didácticos aplicaremos sombras bastante notorias para que puedas visualizar y diferenciar.

Ejemplo de sombra clásica

Ejemplo 1.- Se trata de un elemento de título h1, al que pondremos una sombra de color rojo.

<style>
#titulo {
font-size: 77px;
text-shadow: 20px 15px 7px red;
}
</style>
  
  <h1 id="titulo"> Este es un tiltulo </h1>
  
    

Sombra de texto totalmente horizontal

Ejemplo 2.- ahora crearemos una sombra horizontal de color azul

Sombra a la derecha

<style>
#titulo {
font-size: 77px;
text-shadow: 20px 0px 7px red;
}
</style>
  
  <h1 id="titulo"> Este es un tiltulo </h1>
  
  

Sombra a la izquierda

<style>
#titulo {
font-size: 77px;
text-shadow: -20px 0px 7px red;
}
</style>
  
  <h1 id="titulo"> Este es un tiltulo </h1>
  
  

Sombra de texto totalmente vertical

Ejemplo 3.- se trata de crear una sombra vertical

Sombra hacia abajo

<style>
#titulo {
font-size: 77px;
text-shadow: 0px 20px 7px red;
}
</style>
  
  <h1 id="titulo"> Este es un tiltulo </h1>
  
  

Sombra hacia arriba

<style>
#titulo {
font-size: 77px;
text-shadow: 0px -20px 7px red;
}
</style>
  
  <h1 id="titulo"> Este es un tiltulo </h1>
  
  

Múltiples sombras para texto

Para crear múltiples sombras para un mismo texto simplemente declararemos los estilos de cada sombra separándolos con simples comas (,) de esta forma podemos aplicar dos, tres, cuatro y más sombras a un texto, evidentemente tendremos que jugar con los valores para que el efecto final sea muy atractivo.

Te recomendamos leer:  Introducción a CSS3

Para ver cómo poner múltiples sombras a los elementos de texto, a continuación  veamos varios ejemplos aplicativos.

Ejemplos de múltiples sombras para texto

Ejemplo 1.-

<style>
#titulo {
font-size: 77px;
text-shadow: 
  -10px -5px 3px #4321bf, 
  -15px -10px 5px #42dd36, 
  -20px -15px 7px #dd7c31;
}
</style>
  
  <h1 id="titulo"> Este es un tiltulo </h1>
  
  

Ejemplo 2.-

<style>
#titulo {
font-size: 77px;
text-shadow: 
  5px 10px 1px red, 
  10px 15px 2px blue, 
  20px 20px 3px yellow, 
  30px 30px 4px green;
}
</style>
  
  <h1 id="titulo"> Este es un tiltulo </h1>
  
  

[popup_anything id=»5821″]

5/5 - (1 voto)

Deja un comentario

Desarrolladores web