Souldhack
Souldhack necesita de nuestra ayuda! Por favor lee la siguiente nota! Necesitamos tu ayuda! Y apoyanos!

souldhack

Efecto redes sociales

Efecto con CSS3 en los botones de las redes sociales

Escrito por Administrador - 17/septiembre/2011


Me siento muy agusto de trabajar por primera vez con CSS3 en cuestion de efectos, y me llevo una buena experiencia ya que me agrado muchisimo todo los recursos que encuentro en el, y seria buena idea compartir con ustedes un efecto que en lo personal me llamo mucho la atencion ya que se ve de maravilla. Este efecto lo vamos a emplear en los botones/imagenes de las redes sociales.

Como ya lo habia mencionado de eso se tratara este articulo de poner los botones de las redes sociales pero con un efecto de iluminacion y presentacion al pasar el cursor sobre cada uno de los botones.

Voy a empezar poniendo los botones de las redes sociales mas conocidas que son Facebook, Twitter y Youtube sin duda en estas tres redes esta nuestra web, y al pasar el cursor los botones se iluminaran y aumentaran su tamaño para resaltar como se muestra a continuacion:











Y bueno lo primero que vamos a hacer es pegar es el efecto de resaltacion css3, recuerden que esto es un codigo css3 y lo deven pegar en CSS-CODE

.efectors{
display:block!important;
-webkit-transition:-webkit-transform 1s ease-out;
-moz-transition:-moz-transform 1s ease-out;
-o-transition:-o-transform 1s ease-out;
-ms-transition:-ms-transform 1s ease-out;
transition:transform 1s ease-out;
}

.efectors:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
 


Ya pegado el efecto css3, lo siguiente es pegar la iluminacion de los botones, para esto ulilizaremos una opacacion css, recuerden que esto es un codigo css y lo deven pegar en CSS-CODE

.opacity img {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;}

.opacity:hover img {
filter:alpha(opacity=110);
-moz-opacity: 1.1;
opacity: 1.1;
}


Y por ultimo... para poder usar esos efectos en los botones de las redes sociales utilizaremos dos "class" uno para iluminar y el otro para el efecto css3, incluyendo un margen y una flotacion en las imagenes justo asi: Recuerden que esto es un codigo HTML

<div class="opacity"><a target="_blank" href="URL DE TU FACEBOOK"><img class="efectors" style="float:left; margin:10px; width:128px; height:128px;" alt="" src="URL IMAGEN FACEBOOK" /></a></div>

<div class="opacity"><a target="_blank" href="URL DE TU YOUTUBE"><img class="efectors" style="float:left; margin:10px; width:128px; height:128px;" alt="" src="URL IMAGEN YOUTUBE" /></a></div>

<div class="opacity"><a target="_blank" href="URL DE TU TWITTER"><img class="efectors" style="float:left; margin:10px; width:128px; height:128px;" alt="" src="URL IMAGEN TWITTER" /></a></div>


Y asi nuestros botones se veran elegantes y a la vez con un efecto que se ve de maravilla, y lo mejor es que no utilizamos ningun script, asi que con eso nos damos cuenta que los efectos css3 estan dejando atras los scripts de diseño.





Acerca del autor
Manolo M./Administrador
Les cuento un poco sobre mi... soy un aficionado en todo lo relacionado con las paginas web, haora estoy enamorado de mi pagina web en la cual se comparten conocimientos, ideas... Leer mas

 


Algunas categorias
Interesante
Aqui hablaremos de articulos de interes y debate.

Interesante

Recursos
En esta categoria encontraras, recursos utiles para tener un buen desempeño web.

Recursos



Site5.com

Souldhack necesita tu ayuda!

Souldhack necesita nuestra ayuda!
Todos podemos ayudar a souldhack entrando al blog Souldhacko Y dandole click a la publicidad y anuncios de google que estan en dicho blog, de esta manera estaremos apoyando y agradeciendo a souldhack por toda su ayuda brindada hacia nosotros!, espero y todos nos apoyen, no saben lo agradecidos que estaremos con todos ustedes!, Recuerden que souldhack! esta echo por y para ustedes!.

¿Que pasa en souldhack y souldhacko?

Recuerda que se están escribiendo artículos recientemente en el blog, Souldhacko


Siguenos en Facebook!

Recent Posts

Cuadro ultimos tweets
Para todos los usuarios de twitter que tienes una web acargo en esencial...

Abril 14, 2012

 
Botones compartir articulos
Cuando un articulo es satisfactorio, o simplemente era lo que estabamos...

Febrero 18, 2012

 
Usar/Utilizar jQuery
Bueno en este tutorial explico como instalar y usar jquery ya sea en un diseño profecional...

Noviembre 13, 2011

 
Cambiar botones a Ice Blue
En este mi mas reciente video subido explico como cambiar los botones de los diseños...

Mayo 3, 2012

 

Chat

Los comentarios...

Los comentarios...

Mi video mas reciente

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=