Comunidad de diseño web y desarrollo en internet

Como se logra este efecto? con CSS?

Citar            
MensajeEscrito el 05 Mar 2012 03:28 pm
Hola, que tal? mi pregunta es la siguiente....

estaba navegando por el sitio de blackberry y vi...en el pie de la pagina....un icono que dice...Blackberry en facebook livestream....al pasar el mouse aparece el live stream.

He incluido livestream en mi web...pero de la forma que lo hacen en la pagina de blackberry me parece muy llamativo y ...queda cool :cool:

Estuve revisando el codigo fuente...pero no logro dar con el css..o el codigo que me de ese efecto :cry:

la pagina en cuestion es: http://ar.blackberry.com/


Si alguien me puede decir como se logra ese efecto :evil:


Desde ya muchas gracias

Por aces

11 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Mar 2012 06:48 pm
Puedes hacerlo con CSS o con jQuery.

Si te fijas tiene el iframe del livestream oculto y se ejecuta la acción de mostrarlo al hacer hover sobre el elemento "ftrFacebook".

Por Kinduff

Claber

3562 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 05 Mar 2012 08:50 pm
Gracias....llego hasta esta parte:

<li id="ftrFacebook" class="footerBg" style="display: none;"><a href="#" class="ftrLink"><span>&nbsp;</span>BlackBerry en Facebook Livestream<div>&nbsp;</div></a>

<div id="ftrFacebookNav"></div></li>


El resto del codigo donde esta?
Eso es lo que no encuentro: podrias darme una idea...con un ejemplo sencillo como se puede hacer....unas pocas lineas de codigos, te estaria eternamente agradecido.

Saludos

Por aces

11 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Mar 2012 09:31 pm
encontre en base.css esto:

#ftrFacebook{width: 230px;}
#ftrFacebook a span{
display: block;
width: 16px;
height: 16px;
background: url(/assets_refresh/images/footerFacebookIconSprite.png) no-repeat top left;
margin:-3px 4px 0 0;
float: left;
}
#ftrFacebook:hover span{
background-position: bottom left;
}

este el codigo que causa el efecto?.....no lo entiendo....

Por aces

11 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Mar 2012 09:36 pm
¿Qué tan agradecido? ¿Me depositarías dinero a mi cuenta?

Puedes revisar este demo que hice, te pego el código de todos modos:

Código :

<style>
body { height: 100%; }
#facebook { bottom: 0; position: absolute; }
#facebookstream { height: 300px; width: 275px; border: 1px solid red; position: absolute; bottom: 20px; overflow-y: scroll; display: none; }
#facebook:hover + #facebookstream, #facebookstream:hover  { display: block; }
</style>
<a href="#" id="facebook">Mostrar popup</a>
<div id="facebookstream">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed quam velit, id scelerisque odio. Suspendisse sagittis rutrum cursus. Morbi dictum metus nec justo porttitor a tincidunt diam accumsan. Pellentesque quis est orci. Nulla eleifend dolor sit amet tellus accumsan pellentesque. Duis id mollis eros. Donec malesuada sem mi. Proin mollis cursus iaculis. Maecenas tempus scelerisque molestie. Donec vel odio vel nunc convallis sagittis in id purus. Nunc sapien augue, aliquam vitae ultricies ac, elementum nec ante.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras lacinia justo at massa lacinia et ullamcorper neque aliquam. Proin aliquam aliquam feugiat. Morbi massa nibh, scelerisque non commodo faucibus, lacinia sit amet leo.</p>
</div>


Esa es la base en CSS, investiga un poco más acerca de como mostrar u ocultar contenedores con jQuery.

Suerte.

Por Kinduff

Claber

3562 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 05 Mar 2012 10:01 pm
Muchisimas gracias...me parece que ya encontre ...lo que causa el efecto:

$("#ftrFacebook").hover(function () {
if ($('#ftrFacebookNav iframe').length == 0) {
$('#ftrFacebookNav').html('<iframe src="http://www.facebook.com/plugins/likebox.php?' + rim.lang.facebook.id + '&width=292&connections=10&stream=true&header=false&height=455&locale='+rim.lang.facebook.locale+'" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:292px; height: 455px; background:#fff;"></iframe>');
}
$('#ftrFacebookNav').css({ display: 'block' });
}, function () {
$('#ftrFacebookNav').css({ display: 'none' });
});



Muchas gracias por tu tiempo

Por aces

11 de clabLevel



 

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.