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.

6 opinaron:

Graciela

Me encantó Jessi, ya lo pondré!

Te dejo besos, las mejores ondas :P

Responder
G

El efecto está hermoso; lo aplicaré a mi blog

Responder
squirrel

Me gusta cómo se ve. Esta entrada va a favoritos!!!

Besos

Responder
Marian

Hola. Yo no tengo "post h3" en mi blog. Tengo un plantilla de las nuevas de blogger. ¿Que código tengo que buscar?
Gracias

Jéssica YK

» Marian:
En el caso de tu blog, deberás buscar esta línea:

h3.post-title, h4 {

Antes de hacer algún cambio, descarga una copia de tu plantilla.
Si tienes alguna duda, no dudes en escribirme.

S@lu2

Responder
K. Crazy Cullen

Hola, me encantan tus tutoriales, son geniales.
Ya coloqué las estrellitas y el post con la sombra y el mouseover. ME ENCANTAN!

Gracias! ;D

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio