sábado, agosto 23, 2014

Efecto en titulo del post > Incresing & reducing


Ohaiiio sekai ok ok este tuto si es para los blog, ¿pero como? si si ya se, yo no se de estas cosas pero como diria el doctor que hizo a frankenstein "¡esta vivo! ¡esta vivo!" y como muchos de los tutos este fue un resultado que no esperaba, pura chiripada, yo hice una cosa pero salio esta y el resultado es muy bueno me gusto y pues despues de fijarme en los codigos vi como lo hice y les traigo un tuto 100% mio para que vean el efecto denle click aca.... Previa
Ya vieron el efecto del texto al pasar el mouse sobre el, para conseguir este efecto lee mas abajito
Primero vamos a nuestra plantilla > editar htm > buscas el siguiente codigo
h3.post-title {


Te saldra algo como esto, parecido ok
Bueno en la captura ya estan editados esos codigos pero lo explico, como te daras cuenta en el codigo 1 y 3 el font-size o el tamaño de la letra, es igual, eso siempre debe de aplicar lo unico que editaras sera el tamaño entre mas grande el numero mas grande la letra.
En el codigo 2 es el tamaño de letra normal, este debe ser menor al que pusiste en los codigos 1 y 3 igual entre mas grande el numero mas grande la letra.
Ahora si tu quieres que el efecto sea contrario solo debes de poner los codigos 1 y 3 menores al codigo 2.
Y taran asi sucedieron las cosas
h3.post-title {
background: #fff;
border-bottom: 3px dotted #FFA6B2;
font-family: Delius;
font-size: 25px;
text-align: center;
font-weight: normal;
padding: 1px;
}
h3.post-title a {
font-family: 'Sniglet', cursive;
font-size: 29px;
color: #60C1C0;
}
h3.post-title a:hover {
background:  #fff;
font-family: Delius;
font-size: 25px;
text-align: center;
font-weight: normal;
padding: 1px;}
Eso seria todo
cuidense
bye bye




8 comentarios:

  1. *^* muchas gracias por el tuto!
    hace mucho que no paso por tu blog :3 me encanta el diseño
    Saludos~

    ResponderEliminar
    Respuestas
    1. me alegro que te guste tanto el tuto como el diseño y bueno espero te siga viendo por aqui

      Eliminar
  2. Muy buen tutorial! Quizás lo utilice en alguna plantilla ^^
    Saludoos!

    ResponderEliminar
    Respuestas
    1. HI me gustaria ver como queda tu plantilla luego, y que sea de utilidad

      Eliminar
  3. Ohayo!! ( * w * )/

    LOL QUE BUEN TUTO!! EXPLICAS MUY BIEN n__________n arigato :)

    ResponderEliminar
    Respuestas
    1. Ohaiiiio gracias y que bueno que soy clara explicando !!! a veces me lo pregunto :)

      Eliminar