Títulos con subrayado animado deslizante con CSS


Espero que su semana esté transcurriendo de lo mejor. Hoy les traigo un tutorial que seguro les va a gustar porque se trata de agregar un vistoso subrayado al título de nuestras entradas. El tutorial no es nada complicado y el resultado es muy bueno.

animated, sliding, underline, tutorial, subrayado, animado, deslizante, CSS

El efecto consiste en un subrayado animado deslizante que funciona al pasar el cursor sobre el título del post, como pueden ver en este ejemplo y también en mi blog de pruebas.

( Ver DEMO)
animated, sliding, underline, tutorial, subrayado, animado, deslizante, CSS
Ahora sí, vamos con el tutorial

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código de la plantilla y presionamos la combinación de teclas CTRL+F. Dentro de la casilla de búsqueda escribemos la etiqueta ]]></b:skin> y damos Enter para la búsqueda.

3.§ Encima de ]]></b:skin> pegaremos el siguiente código CSS:
/* Subrayado título */
h3.post-title {
display: inline-block;
}
h3.post-title:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
h3.post-title:hover:after {
width: 100%;
background: #1198cc;
}
Para cambiar el ancho del subrayado, cambiamos el valor de height: 3px por el ancho que queramos; para cambiar el color del subrayado, cambiamos el código hexadecimal de background: #1198cc por otro color. Aquí les dejo una cartilla de colores para que puedan elegir un color.

4.§ Finalmente, damos clic en Guardar plantilla y eso sería todo. Como ven, agregar este efecto es muy sencillo, pero si tienen alguna duda o si desean que haga un video de este tutorial, escríban en los comentarios. Que pasen una bonita semana.

1 opinaron:

Ana Itzel Alcocer Gochi

:D lo usare cuando haga mi blogg de periodismo ¡Saludos!

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