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.

Tarjeta de Año Nuevo » Tutorial Photoshop

Qué tal! Espero que se encuentren muy bien. Estamos ya a dos días de acabar el año. Si no nos fue muy bien este año, hay que animarnos, ya que el próximo será mejor. Siendo sincera, este año no me fue tan bien, no pude concretar algunas metas que tenía en mente, pero estoy segura que el 2017 lo podré hacer.
Y bueno, volviendo al tema del post, hoy quiero compartir con ustedes un tutorial para realizar una postal o tarjeta navideña.

card, new, year, free, download, gratis, 2017, tarjeta, postal

El tutorial está muy detallado, pueden pausarlo o retroceder para realizar cada paso y también pueden personalizarlo, elegir otros colores, elegir otro tamaño para su postal, etc. También les dejo el link con todos los materiales que necesitarán para la tarjeta.

Espero que les guste y si hacen sus postales, pueden subirlas a instagram o a mi facebook y etiquetarme para verlas. Nos vemos el próximo año con más tutoriales.

DESCARGAR MATERIALES

inicio