Menú horizontal

20 de junio de 2016

Añadir un borde bajo el título del blog

Decorar el título del blog con bordes con imágenes



Siguiendo con la mejora en la cabecera de mi blog, voy a añadir ahora un borde en color que separe el título de la descripción del blog.


Resaltar la cabecera de un blog añadiendo un borde bajo el título


Como en la entrada anterior Añadir efectos de sombra al título de un blog en la que se explica como crear un efecto de sombra al título del blog,  vamos de nuevo a Plantilla-Personalizar-Avanzado-Añadir CSS.

A continuación de la línea que escribimos para la configuración del título con el efecto sombra, escribimos,

.title {font-size:15px; border-bottom:4px solid orange }


Título blog resaltado con borde

Con esta línea nueva he añadido un borde en color naranja bajo el título del blog que también se ha añadido al título de la etiqueta de "Buscar en este blog".
    Estilos bordes CSS
  • font-size:15px _ define el tamaño de letra de la etiqueta "Buscar en este blog"
  • border-bottom:4px _ define el grosor del borde
  • solid orange _ define el color del borde. He añadido el atributo solid pero podemos usar los relacionados en la imagen.













Edición de la plantilla - HTML


Podemos añadir CSS directamente en la plantilla del blog.

Primero hacemos una copia de seguridad.
A continuación nos dirigimos al menú de Blogger:
Tema (antes Plantilla) → Editar HTML.

Con CTRL + F buscamos ]]</b:skin>  y encima pegamos el código CSS anterior,

.title {
font-size:15px; 
border-bottom:4px solid orange
 }



Añadir una imagen al título del blog


Si en lugar de una línea queremos decorar el título del blog con una imagen seguimos los mismos pasos anteriores y añadimos el código CSS correspondiente.

Imagen bajo el título del blog


La imagen que voy a utilizar es la siguiente:



Añadir una imagen bajo el título del blog

.title {
padding-bottom: 20px;                                        /*relleno inferior*/
background-image: url(URL de la imagen);   /*imagen que se utiliza como borde del título*/
background-position: 10px 55px;                 /*posición de la imagen en el título*/
background-repeat: repeat-x;                     /*la imagen se repite horizontalmente*/
background-size: 25px 25px;                    /*tamaño de la imagen*/
width: 680px;                                           /*ancho*/
}



Imagen de fondo en el título del blog


La imagen que voy a utilizar es la siguiente,



Propiedad background-size: Valor contain


Imagen de fondo en título del blog (valor contain)

.title {
padding: 5px;
background-image: url(URL de la imagen);
background-size: contain;
width: 680px;


El valor contain para la propiedad background-size indica al navegador que la imagen se escala conservando su aspecto original y mismas proporciones hasta el tamaño más grande de tal forma que tanto en ancho como en altura pueda encajar dentro del área de posicionamiento del fondo. En este caso, como las dimensiones de la imagen no coinciden con las del área de posicionamiento del fondo, se escala la imagen en altura para que encaje en el área y se repite la imagen horizontalmente para poder cubrir por completo esta área.



Propiedad background-size: Valor cover


La imagen es la misma del punto anterior (de valor contain).

Imagen de fondo en título del blog (valor cover)

.title {
padding: 5px;
background-image: url(URL de la imagen);
background-size: cover;
width: 680px;


El valor cover para la propiedad background-size indica al navegador que se muestre la imagen en sus mismas dimensiones aunque esto implique que la imagen no se muestre completamente o queden zonas sin cubrir del área de posicionamiento del fondo. Como el área de la imagen es mayor que la destinada al fondo solo se muestra parcialmente.



Propiedad background-size: Valor 100% 100%


Mantengo la misma imagen (de valor contain y valor cover).

Imagen de fondo en título del blog (valor 100% 100%)

.title {
padding: 5px;
background-image: url(URL de la imagen);
background-size: 100% 100%;
width: 680px;


El valor 100% 100% indica al navegador que la imagen se muestre completamente para que cubra  toda el área de posicionamiento del fondo [100% (altura) y 100% (ancho)]. 
En este ejemplo la altura del área destinada al fondo es inferior a la de la imagen y el ancho del fondo es mayor que el ancho de la imagen, por lo tanto la imagen se encoge en altura y se estira en el ancho para cubrir completamente el área destinada al fondo.