19 feb. 2014

Iconos Sociales con Efecto de Agrandar en Css.




¡Buenas, buenas! ¿Como han amanecido? ¡espero que bien!, en esta entrada veremos un tutorial de Iconos Sociales con Efecto de Agrandar en Css lo cuál me parece interesante.

Vista previa:

agrégame en google+
síguenos en twitter
estamos en facebook
feed rss
suscríbete por e-mail

(Ojo qué, vienen uno al lado del otro, y al colocar el mause sobre uno de ellos se agrandará)



Bueno primero que nada, haz una copia de seguridad de la plantilla de tu blog. Luego agregamos lo siguiente  en añadir un gadget html/javascript.



agrégame en google+síguenos en twitterestamos en facebookfeed rsssuscríbete por e-mail

Debes llenar los datos que se encuentran con letras mayúsculas, tal como la dirección de tu página de Google + , etc. si no tienes puedes borrar esa parte y simplemente no se verá.

Luego iremos a plantilla, edición de html y ante de ]]>
, agregamos los siguientes estilos, los cuales dan el efecto de agrandar.

/* -- social connect widget -- */.social-connect-widget img{-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-o-transform:scale(0.9);-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;}.social-connect-widget img:hover{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;}.social-connect-widget{text-align:right;margin:20px 20px ;}.social-connect-widget img{vertical-align:middle} 
Si quisieras agrandar aún mas los íconos, prueba cambiando los valores en scale(1) a scale(1.2)  por ejemplo. Comprobamos en vista previa que todo luce bien y guardamos.

¡Muchos besos, qué tengan un buen día!

Créditos a: Creando Blogs.

2 comentarios:

asiriyaku dijo...

¡Hola! Soy Asiriyaku de Besos de murciélago. Tu blog me encanta y tu diseño me ha enamorado *-*. Ya te sigo. Besos.

Cªren∞≈ﻩ dijo...

Hola, muchas gracias^^, y tu blog también es genial ;3 ¡Besos!.

Vuelve el blog a tu Idioma