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:  La regla @ font-face de 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:  Transiciones en 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>
  
  
Curso css3 - temas
0 0 votos
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos