Las ventanas flotantes, son aquellas que aparecen por lo general en algún extremo de la página, sobresale una pequeña viñeta y cuando pasas el mouse sobre ésta, se despliega la información de la ventana.

Para lograr este efecto era común utilizar algunos conceptos de programación y un script que por lo general es Javascript. Hoy, veremos cómo lograr el efecto utilizando un par de propiedades de CSS3. Antes que nada ¿por qué no ves el demo aquí?  Como IE9 no reconoce transiciones, se verá bien, pero no como en Chrome, Safari, Firefox u Opera.

Y ahora, el tutorial:

Imagen de previsualización de YouTube

3 comentarios en “Crea una ventana Flotante con CSS3

  1. Hey compadre.!!
    a pesar de que este video es de hace un buen tiempo, me sirvio para poder aplicarlo ami proyecto, y funciono a la perfeccion.! muchas gracias, excelente tutorial y lo mejor, que esta muy bien explicado..

    Felicidades, saludos desde chile.!
    🙂

  2. Hola, siento no saber cual es tu nombre, pero me alegra haber encontrado tu video, yo soy Pako, vivo en Alemania y me gustaria que pudieras ayudarme.
    Me ha encantado la idea de crear una ventana flotante, pero no tengo mucha idea de css3, podrias enviarme el codigo para pegarlo en mi web? es posible que que la ventana flotante sea una imagen alojada en un servidor? Donde pego el codigo? Yo tengo mi web alojada en Jimdo, creo que se coloca en el HEAD, cierto?
    Bueno, espero que puedas ayudarme, de antemano te doy las gracias.
    Un amigo desde los Alpes Alemanes.

  3. Hola, muy bueno y útil el video.
    Tengo una duda, me gustaría saber como puedo crear una ventana flotante de cual quier tamaño q al hacer clic sobre él o un botón q este en la misma venta, este se desaparezca o cambie a otra posición y tenga la misma transición del ejemplo tuyo al moverse o desaparecer. De antemano gracias por tu ayuda.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar