20 de junio de 2016

Añadir efectos de sombra al título de un blog

Efectos de sombra en el título del blog

Voy a seguir con la mejora visual de mi blog mejorando el aspecto de su título.

Resaltar el título de un blog aportándole sombras a su texto.


Entro en el blog y accedo a Plantilla-Personalizar.

Personalizar plantilla

A continuación vamos a Avanzado-Añadir CSS.

Añadir CSS en plantilla blog

Se abre la ventana y escribimos,
.header h1 {color:white; text-shadow:1px 1px 3px #E0FFFF; margin-left:5px; font-size:35px; font-family: Century Gothic; }


El resultado es el siguiente,

Título blog con sombra

He definido para el título de la cabecera,
  • un texto en color blanco (white) / color:white
  • al que he añadido un efecto de sombra en color azul claro (#e0ffff) / text-shadow:1px 1px 3px #e0ffff ......los dos primeros valores representan la longitud horizontal y vertical y el tercero un radio opcional de difuminado.Si queremos bordes duros se deja a cero el radio de difuminado o desenfoque.
  • fijando un margen izquierdo de 5px / margin-left:5px
  • con un tamaño de letra de 35px / font-size:35px
  • y por último el tipo de letra Century Gothic / font-family: Century Gothic