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

2 comentarios:

  1. Hola, sabes cómo elegir el color de sombra? Gracias :D

    ResponderEliminar
  2. Hola Mark,

    Muchas gracias por tu comentario.

    En el ejemplo he añadido el color #e0ffff que es un tono azul claro. Puedes elegir el color en el enlace que te muestro a continuación http://www.rapidtables.com/web/color/RGB_Color.htm
    En el cuadro con la paleta de colores que está a la izquierda puedes moverte con el ratón hasta encontrar el color y tono que necesitas. Para cambiar de tonalidad te desplazas por la barra lateral a este cuadro, seleccionas el color deseado y en el cuadro buscas la tonalidad que más te guste. En el cuadro más pequeño que se encuentra a la derecha de la barra lateral podrás ver el resultado. Si es el que necesitas solo tienes que copiar el código que aparece abajo tras el signo # y ponerlo en text-shadow tal como se muestra en el ejemplo.

    Espero que te haya ayudado....si no es así no dudes en preguntarme! :)


    ResponderEliminar