5 de agosto de 2017

Tutorial: Sombra en los textos

Una de mis comentaristas me ha pedido que le enseñe como hacer que un texto tenga sombra. A decir verdad es un truco muy fácil, solo se tiene que saber que atributo CSS utilizar. En nuestro caso: text-shadow. 

Sombra solida

h1{
text-shadow: 3px 2px #ccc;
}
Así estaríamos modificando los textos de encabezados de nivel 1, estos contendrían una sombra sólida. Los valores que estamos indicando en la sombra son:
  • 1px: Desplazamiento de la sombra a la derecha .
  • 2px: Desplazamiento de la sombra hacia abajo.
  • #ccc: Color de la sombra.
En el caso de que querer que la sombra esté más a la izquierda o más arriba, solo agrega un - (menos) delante del número, es decir: text-shadow: -3px -2px #ccc; 

Sombra desenfocada

De esta forma es más realista el efecto sombra. 
h1{
text-shadow: 3px 3px 2px #ccc;
}
  • 2px: Difuminado o desenfoque 
Resultados

Sombras sobre sombra

Esto no es algo que quedaría bien en un texto común [en un párrafo], pero si es un encabezado o un enlace, agregan varias sombras quedaría muy bien.
h1{
text-shadow: 10px 8px #B7F9E5, -10px 12px #F4F9B7, -8px -12px #B7BFF9, 12px -5px #F9B7E5;
}
Algo de lo que me percate durante las pruebas para este tutorial, es que para los efectos de sombra sobre sombra es mejor utilizar colores pasteles, o claros. Si utilizamos colores oscuros, desde mi punto de vista, no quedara bien. 

   El texto de la imagen de arriba tiene cuatro sombras, puedes quitarle o agregarle más, todo según tu gusto.

Gracias a desarrolloweb.com por algunas explicaciones.

Sombra en efecto hover

Si quieres que tu texto tenga sombra sobre el cuando sé pase el cursor sobre él,  tienes que añadir el atributo text-shadow a su línea de hover.
  • El ejemplo más común: los enlaces.

La personalización de nuestros link son definidos con:
a:link {
estilos
}
Por lo que entonces para agregar efectos hover sobre ellos, se utiliza:
a:hover {
estilos que aparecen solo al pasar el cursor
En el caso de a:hover, antes del cierre } añadiríamos la sombra
a:hover {
text-shadow: -10px 12px #F9DDFC, 12px -5px #DDF7FC;
}
Para que no aparezca muy bruscamente la sombra, te recomiendo que antes del cierre } de a:link { agregues:  transition:all 0.3s ease;

Resultado

Para ver un ejemplo en vivo de las sombras y el efecto hover, dirígete a mi >>BLOG DE PRUEBAS<<, ahí he modificado la fuente y los colores para que estén más de acuerdo con el diseño de la página por lo que no esta tan en sintoniza con las imágenes de los ejemplo...

Y eso es todo por los momentos, espero les guste esta nuevo tutorial.
Besos!


Les envió muchos besos. Si quieren un tutorial en especifico solo pídanlo en los comentarios o llenen ESTE FORMULARIO...

3 comentarios: