Staff en línea

Página 1 de 2. 1, 2  Siguiente

[widget] Iconos sociales con tooltip circular
Tema iniciado por y Añadir a favoritos

[widget] Iconos sociales con tooltip circular 
el Jue Ene 01, 2015 7:41 pm
staff
[codebox][widget]  Iconos sociales con tooltip circular GSET4Mq

¿Que son los tooltips? Un tooltip (tambien llamada descripcion emergente) es una herramienta de ayuda visual, que funciona al situar el cursor sobre algun elemento grafico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra. Pues en este caso, esta aplicado mediante CSS3 a estos tres iconos (Google+, Twitter y Facebook) para que les de un efecto circular al pasar el cursor sobre ellos. Ya puedes ponerlos en la sidebar de tu blog (o donde quieras) para que enlacen con tus redes sociales.

Para ponerlo en tu blog o web, tan solo tienes que copiar este codigo y añadirlo a un widget.

Probado por: Dosh
Función: Destacar redes sociales
Fuente: Aqui.[/codebox]

[hidecode]
Código:
<ul class="md2-wrapper">
<li><a target="_blank" class="md2-gplus" href="URL GOOGLE+"><span>Google+</span></a></li>
<li><a target="_blank"class="md2-twitter" href="URL TWITTER"><span>Twitter</span></a></li>
<li><a target="_blank"class="md2-facebook" href="URL FACEBOOK"><span>Facebook</span></a></li>
</ul>


<style type="text/css">.md-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md-wrapper li{float:center;}.md-wrapper ol,ul{list-style:none;}.md-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;position:relative;}.md-wrapper li .md-gplus{background-position:0px 0px;}.md-wrapper li .md-twitter{background-position:-68px 0px;}.md-wrapper li .md-facebook{background-position:-204px 0px;}.md-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:4px solid #fff;background:rgba(255,255,255,0.3);text-indent:0px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;pointer-events:none;bottom:100px;opacity:0;/*box-shadow*/-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.1);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md-wrapper li a span:before,.md-wrapper li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1);}.md-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff;}.md-wrapper li a:hover span{opacity:0.9;bottom:70px;}.md2-wrapper{padding:0;width:230px;height:70px;margin:80px auto 30px auto;}.md2-wrapper li{float:left;}.md2-wrapper ol,ul{list-style:none;}.md2-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;position:relative;z-index:2;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;}.md2-wrapper li .tt-gplus{background-position:0px 0px;}.md2-wrapper li .md2-twitter{background-position:-68px 0px;}.md2-wrapper li .md2-facebook{background-position:-204px 0px;}.md2-wrapper li a span{width:80px;height:80px;line-height:80px;padding:10px;left:50%;margin-left:-55px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:5px solid #fff;background:rgba(255,255,255,0.5);text-indent:0px;position:absolute;pointer-events:none;/*border-radius*/-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:-40px;opacity:0;/*box-shadow*/-webkit-box-shadow:0px 3px 8px rgba(0,0,0,0.1);-moz-box-shadow:0px 3px 8px rgba(0,0,0,0.1);box-shadow:0px 3px 8px rgba(0,0,0,0.1);/*transform*/-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md2-wrapper li a:hover span{opacity:0.9;bottom:50px;/*transform*/-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}.md3-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md3-wrapper li{float:left;}.md3-wrapper ol,ul{list-style:none;}.md3-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;position:relative;z-index:2;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;}.md3-wrapper li .md3-gplus{background-position:0px 0px;}.md3-wrapper li .md3-twitter{background-position:-68px 0px;}.md3-wrapper li .md3-facebook{background-position:-204px 0px;}.md3-wrapper li a span{width:80px;height:auto;padding:10px;left:50%;margin-left:-55px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:5px solid #fff;background:rgba(255,255,255,0.5);text-indent:0px;position:absolute;pointer-events:none;bottom:-40px;opacity:0;/*box-shadow*/-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.1);box-shadow:0px 1px 2px rgba(0,0,0,0.1);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;/*transform*/-webkit-transform:rotate(0deg) scale(0);-moz-transform:rotate(0deg) scale(0);-ms-transform:rotate(0deg) scale(0);-o-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);}.md3-wrapper li a:hover span{opacity:0.9;bottom:100px;/*transform*/-webkit-transform:rotate(-90deg) scale(1);-moz-transform:rotate(-90deg) scale(1);-ms-transform:rotate(-90deg) scale(1);-o-transform:rotate(-90deg) scale(1);transform:rotate(-90deg) scale(1);}.md4-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md4-wrapper li{float:left;}.md-wrapper ol,ul{list-style:none;}.md4-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(http://2.bp.blogspot.com/-l81k5DdhS4c/TztjSugibrI/AAAAAAAACn0/8TZqmQbHxg0/s1600/%255Bwww.gj37765.blogspot.com%255D_social_gunman_icons.png) no-repeat top left;text-indent:-9000px;position:relative;}.md4-wrapper li .md4-gplus{background-position:0px 0px;}.md4-wrapper li .md4-twitter{background-position:-68px 0px;}.md4-wrapper li .md4-facebook{background-position:-204px 0px;}.md4-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#719DAB;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:4px solid #fff;background:rgba(255,255,255,0.3);text-indent:0px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;bottom:70px;opacity:0;visibility:visible;pointer-events:none;/*box-shadow*/-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.1);/*transform*/-webkit-transform:translate(35px) rotate(25deg) scale(1.5);-moz-transform:translate(35px) rotate(25deg) scale(1.5);-ms-transform:translate(35px) rotate(25deg) scale(1.5);-o-transform:translate(35px) rotate(25deg) scale(1.5);transform:translate(35px) rotate(25deg) scale(1.5);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md4-wrapper li a span:before,.md4-wrapper li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1);}.md4-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff;}.md4-wrapper li a:hover span{visibility:visible;opacity:0.9;/*transform*/-webkit-transform:translate(0px) rotate(0deg) scale(1);-moz-transform:translate(0px) rotate(0deg) scale(1);-ms-transform:translate(0px) rotate(0deg) scale(1);-o-transform:translate(0px) rotate(0deg) scale(1);transform:translate(0px) rotate(0deg) scale(1);}</style>
[/hidecode]
Dosh
Dosh

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1700


Puntos :

2460


Me gusta :

468


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


http://www.telefoneros.com/

Volver arriba Ir abajo


Es lo que habéis incorporado al foro, ¿no?
Tao
Tao

¿Que estoy pensando? :

La cuarta dimensión [table class=fecha_up][td]Se modifico:8/09/16 - 23:52 hrs.[/td][/table]


Banner en temas :

http://coverjunction.s3.amazonaws.com/2012/131/6a42e7a0-25f2-4bac-8398-5a75a0eaf17f.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #333


Mensajes :

271


Puntos :

347


Me gusta :

54


ingreso :

04/01/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


http://lacuartadimension.foroactivo.com/

Volver arriba Ir abajo

staff
Dosh, como hago para que me salgan los toltips de Goodreads, Pinterest, Twiter y Facebook. Esas son las redes que uso para mi foro.
RinC
RinC

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1149


Me gusta :

200


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

staff
Vale, ya sé como. Tengo que agregarlo en el HTML y el CSS.
Gracias por el aporte!
RinC
RinC

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1149


Me gusta :

200


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

staff
Disculpa la tardanza pero por fin vuelvo a tener Internet, si como dices hay que agregarlos pero tendrás que buscar las mismas imágenes o cambiarlas todas...
Dosh
Dosh

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1700


Puntos :

2460


Me gusta :

468


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


http://www.telefoneros.com/

Volver arriba Ir abajo

staff
Como no te entiendo [tag]Tao[/tag]
Dosh
Dosh

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1700


Puntos :

2460


Me gusta :

468


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


http://www.telefoneros.com/

Volver arriba Ir abajo

¿Cómo se hace para ver y decirte si es a lo que me refiero?

(El juego de los circulos en el avatar)

Aunque no será, porque al parecer es válido sólo para los 3 iconos que menciona.

:roll:
Tao
Tao

¿Que estoy pensando? :

La cuarta dimensión [table class=fecha_up][td]Se modifico:8/09/16 - 23:52 hrs.[/td][/table]


Banner en temas :

http://coverjunction.s3.amazonaws.com/2012/131/6a42e7a0-25f2-4bac-8398-5a75a0eaf17f.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #333


Mensajes :

271


Puntos :

347


Me gusta :

54


ingreso :

04/01/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


http://lacuartadimension.foroactivo.com/

Volver arriba Ir abajo

staff
Síp, las imagenes son correlativas una de otras, están en la misma img.png, así que hay que agregar todo el CSS y el HTML de las que se quieran poner.
RinC
RinC

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1149


Me gusta :

200


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

@Tao si te refieres al efecto que pasa en los temas al momento de pasar el mouse sobre el post, eso es un hover y se agrega a través de CSS agregando ":hover" al final de lo que quieras editar.

[widget]  Iconos sociales con tooltip circular 4oAyE

Ese es un ejemplo de "Tooltip" ;)
AlvaroX™
AlvaroX™

¿Que estoy pensando? :

TW [table class=fecha_up][td]Se modifico:23/12/15 - 21:40 hrs.[/td][/table]


Banner en temas :

http://www.atozfbcovers.com/wp-content/uploads/63-halo.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

38


Puntos :

96


Me gusta :

30


ingreso :

29/01/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

staff
@tao no esto es un widgets no tiene nada que ver con el efecto que a creado chalo en el avatar del usuario si lo deseas pues es cosa que se lo pidas...
Dosh
Dosh

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1700


Puntos :

2460


Me gusta :

468


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


http://www.telefoneros.com/

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.