Una ilusión de información en los enlaces en CSS
He aquí cómo crear burbujas de información en CSS. Estas burbujas tienen el mismo estilo que los websnapr Este sitio web toma capturas de pantalla de solicitudes que recibe, entonces las poblaciones de una base de datos . Ellos tienen una altura fija y anchura, lo que limita el número de caracteres a insertar.
Un ejemplo de estas burbujas
¡Qué deliciosa composición corporal es un cuadro gráfico que sigue y nunca se sabe lo que quiere. ?
Esto es lo que la imagen PNG para la creación de esta burbuja de información parece. Esta vista previa se realizarán directamente en photoshop.
Haga clic aquí para descargar la imagen real
Ahora, aquí está el código para crear esta información burbuja
El código HTML
href="votreDestination" <a class="info"> El nombre de su enlace <span> descripción de su vínculo con un máximo de 130 carácter en este caso si </ span> </ a>
El CSS
fue. info ( position: relative; / * * Muy importante / de fondo: ninguno; / * Importante para el funcionamiento de IE * / z-index: 10; ) { se. Info: hover ( z-index: 20; ) fue. span info ( display: none; ) span { /*la tag SPAN apparaitra avec l'effet hover*/ se. Info: hover span (/ * etiqueta SPAN aparecerá con el efecto "hover * / display: block; position: absolute; top: 18px; izquierda: 10px; / * Elementos para colocar el texto en la burbuja * / / * También se puede utilizar el relleno: 24px 25px 5px 8px; * / padding-left: 25px; padding-top: 24px; padding-bottom: 5px; padding-right: 8px; ancho: 205px; altura: 45px; / * Estilo de carácter en la burbuja * / ; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-style: italic; font-size: 10px; ; color: # 999999; text-decoration: none; texto justify; ) / * Para tener un hermoso fondo de las burbujas con la transparencia PNG * / >span { se. Info: hover span> ( images/bgInfo .png ) ; -Image: url (/ images BGInfo. Png de fondo); ) span { se. Info: hover span ( ( src= "/images/bgInfo.png" , filtro: progid: DXImageTransform. Microsoft. AlphaImageLoader (src = "/ images / bgInfo.png" ; sizingMethod = 'cosecha'); )
Bueno, espero que con este tutorial podrás crear este efecto de las burbujas a 2,0. Si usted tiene alguna pregunta, no dude en preguntar en nuestro foro . ¡Buena suerte!
Etiquetas: Bubble Información , CSS , enlaces , tutoriales
09 de febrero 2008 a las 0:07
Interesante, te doy gracias marcador la manguera!
09 de febrero 2008 a las 0:09
Super conveniente este tutorial ... lo estoy tratando esta noche!
Si funciona, te agregue una marca (tutmarks.com) inmediatamente
09 de febrero 2008 a las 0:10
Lástima la altura no tiene en cuenta el contenido y la limitación del uso de este globo de un punto de vista de diseño simpático.
09 de febrero 2008 a las doce y once
Es genial para ajustar la altura de acuerdo con el texto, pero que requiere más líneas de código para eso. El código es tan simple como sea posible. Pero tengo la intención de hacer una versión más compleja con ajuste automático.
09 de febrero 2008 a las doce y trece
Es una buena cosa para un objeto para ser usado por tanta gente como sea posible, se debe controlar en lo más mínimo posible (más fácil decirlo que hacerlo:)).
Bravo por tu trabajo
09 de febrero 2008 a las doce y trece
muy bonito, muy claro, muy bien
09 de febrero 2008 a las doce y cuarto
tutorial es realmente hermoso gracias beaucaup su autor
09 de febrero 2008 a las doce y cuarto
Maravilloso, gracias.
28 de marzo 2008 a las 8:12
¡Perfecto!
El único problema para mí es que incluso con text-decoration: none; que dentro de la burbuja que se destaca por un golpe de el mismo color que el vínculo (visitado o no)
28 de marzo 2008 a las 12:39
Pruebas de una frontera: 0px; o hacer uno! Importante línea en el text-decoration: none ...
Ejemplo:
text-decoration: none! importante;
29 de marzo 2008 a las 9:35
No cualquiera de las dos propuestas no está funcionando, más de la burbuja se corta en el borde de mi contenedor, incluso con un z-index de 20 en la burbuja y 2 en el envase.
29 de marzo 2008 20:50
¿Me puedes dar la dirección para que pueda ver el código?
30 de marzo 2008 a las 6:59
El sitio es normalmente sólo localmente, sino que puse una versión truncada en línea: xttp: / / xxxxxxx.xxx / reclamaciones /
Hace clic directamente en "conexión", luego a la izquierda en "garantizada", entonces tienes un ejemplo de la burbuja en el enlace de la página derecha del teléfono.
Gracias por tu ayuda;)
31 de marzo 2008 a las 15:30
Miré el problema de su información de herramientas en su problema de CSS que está causando el desbordamiento-y: auto; en la clase. Casa
Se lo quité y parece funcionar bien, si pones un desbordamiento, lo único que se encuentra en la etiqueta no se desborde y se encuentra oculto.
Espero que mi respuesta a su problema.
Buenos días!
17 de julio 2008 a las 7:55
Genial el tutorial, pero es posible poner esta información sobre herramientas en una imagen? Lo intenté, pero la punta de la herramienta se queda en la foto, así que quiero que se enganche en la parte inferior derecha ... ¿Es eso posible?
Gracias
20 de octubre 2008 a las 11:25
Hola, tutau super, pero hice un menú de bar con ul li y por lo que quería usar la burbuja de información, pero se corta cuando aparece! De pronto no veo un juego!
26 de octubre 2008 a las 15:04
gracias
30 de octubre 2008 a las 8:14
¡Hola
cómo poner la burbuja (con otra burbuja en el otro sentido) sobre el texto del vínculo, la forma en facebook en la barra en la parte inferior, por favor?
Gracias ...
Heve
06 de noviembre 2008, 12:48
coooooooooooool! gracias
17 de diciembre 2008 a las 12:06
(Tema - burbuja de pantalla)
¡Hola
¿Es posible poner el enlace a un mapa de imagen?
gracias a usted ya la gran tutorial!
buen día!