Título de los post con sombra y efecto Mouseover

Hoy vamos a ver cómo agregar un efecto bonito para darle un poco de dinamismo a los títulos de los post. Para ello, agregaremos una sombra y el efecto mouseover a los títulos.

( ↪ Ver DEMO)

1.§ Vamos a Diseño - Edición de HTML y buscamos .post h3 {

2.§ Entre llaves, debajo de .post h3 { veremos un código y una llave de cierre } antes de esa llave de cierre, dentro de .post h3 { pegaremos el siguiente código:

border-left:7px solid #666;
border-right:7px solid #666;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 4px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 4px #666;

Lo que está en negrita es el color de la sombra; podemos reemplazarlo por otro color, pero debe ser el mismo en los cinco casos en que se repite. También podemos modificar el ancho de la sombra.

3.§ Antes de .post h3 { pegaremos lo siguiente, que es el código para darle el efecto Mouseover:

.post h3:hover {
font-style:italic;
border-left:7px solid #FF133F;
border-right:7px solid #FF133F;
box-shadow:0px 0px 4px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 4px #FF133F;
}

Igual que en el caso anterior, podemos reemplazar lo que está en negrita por otro color. Ese será el color de la sombra cuando pasemos el cursor por encima del título del blog. Para ver el efecto en funcionamiento puedes pasar el cursor encima de los títulos de mi blog de pruebas.

4.§ Damos click en Guardar.