A punta de la herramienta en los enlaces de CSS
He aquí cómo crear burbujas de información en el CSS. Estas burbujas tienen el mismo estilo que las de websnapr Este sitio web toma capturas de pantalla de solicitudes que recibe, y luego los almacena en una base de datos . Tienen una altura fija y anchura, lo que limita el número de caracteres a insertar.
Un ejemplo de estas burbujas
¿Qué es un cadáver exquisito gráfica es una composición gráfica que sigue y nunca se sabe lo que quiere. ?
Esto es lo que la imagen PNG para crear esta burbuja de información que parece. Esta visión fue capturado directamente en photoshop.
Haga clic aquí para descargar la imagen real
Ahora aquí está el código para crear esta burbuja de información
El HTML
<a href="votreDestination" class="info"> El nombre del enlace <span> descripción de su vínculo con un máximo de 130 carácter en este caso si </ span> </ a>
El CSS
position :relative ; /* Très important */ background :none ; /* Important pour le fonctionnement sur IE */ z-index : 10 ; } a .info :hover { z-index : 20 ; } a .info span { display :none ; } a .info :hover span { /*la tag SPAN apparaitra avec l'effet hover*/ display :block ; position :absolute ; top : 18px ; left : 10px ; /* Éléments pour positionner le texte dans la bulle */ /* Vous pouvez aussi utiliser le padding:24px 8px 5px 25px; */ padding-left : 25px ; padding-top : 24px ; padding-bottom : 5px ; padding-right : 8px ; width : 205px ; height : 45px ; /* Style du character dans la bulle */ font-family :Arial , Helvetica, sans-serif ; font-weight :normal ; font-style :italic ; font-size : 10px ; color : # 999999 ; text-decoration :none ; text-align :justify ; } /* Pour avoir un beau background de bulle avec PNG a. info {position: relative; / * Muy importante * / fondo: none; / * Importante para el funcionamiento de IE * / z-index: 10;} a. info: hover {z-index: 20;} a. lapso info {display: none;} a. info: hover gen {/ * la etiqueta SPAN aparecerá con el efecto de activación * / display: block; position: absolute; top: 18px; izquierda: 10px; / * elementos de la posición de la texto de la burbuja * / / * También puede utilizar el relleno: 24px 25px 5px 8px * / padding-left: 25px; padding-top: 24px; padding-bottom: 5px; padding-right: 8px, ancho: 205px; height: 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; texto -decoration: none; text-align: justify;} / * Para un hermoso fondo de burbujas con PNG ; } sizingMethod = "cosecha");}
Bueno, espero que con este tutorial, será capaz de crear esta burbuja a 2,0. Si usted tiene alguna pregunta, no dude en preguntar en nuestro foro . ¡Buena suerte!
Tags: info burbuja , CSS , enlaces , Tutorial
09 de febrero 2008 a las 0:07
Interesantes, doy las gracias a marcar el tubo!
09 de febrero 2008 a las 0:09
Super cómodo este tutorial ... yo esta noche la prueba!
Si funciona, le agrega una marca (tutmarks.com) tan pronto
09 de febrero 2008 a las 0:10
Lástima que la altura no tiene en cuenta el contenido, lo que limita el uso de este consejo amigable desde el punto de vista del diseño.
09 de febrero 2008 a las doce y once
Está bien para ajustar la altura, según el texto, pero se trata de más línea de código para ello. 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
Esto es bueno para un objeto para ser utilizado por muchas personas como sea posible, se debe restringir lo menos posible (es 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
es realmente maravilloso tutorial gracias beaucaup el autor ha
09 de febrero 2008 a las doce y cuarto
Excelente, gracias.
28 de marzo 2008 a las 8:12
Perfecto!
El único problema para mí es que incluso con text-decoration: none; que el contenido de la burbuja que se destaca por un golpe de el mismo color que el enlace (visitado o no)
28 de marzo 2008 a las 12:39
Prueba de un border: 0px; o poner a! importante línea de text-decoration: none ...
Ejemplo:
text-decoration: none importante;
29 de marzo 2008 a las 9:35
No es ninguna de las dos propuestas no funcionan, sobre la burbuja se corta en el borde de mi contenedor, incluso con un z-index de 20 en la burbuja y 2 del recipiente.
29 de marzo 2008 a las 20:50
¿Me puede dar la dirección URL para que pueda ver su código?
30 de marzo 2008 a las 6:59
El sitio normalmente sólo localmente, sino que me puse una versión truncada en línea: xttp: / / xxxxxxx.xxx / siniestro /
Hace clic directamente en "conexión", luego a la izquierda en "asegurado", entonces tienes un ejemplo de la burbuja en la página de la derecha en el enlace del teléfono.
Gracias por tu ayuda;)
31 de marzo 2008 a las 15:30
Miré el problema de la información sobre herramientas en su problema de CSS está causando el desbordamiento de Y: auto; en la clase principal.
Yo lo borré y parece que funciona bien, si usted pone un desbordamiento, lo único que se encuentra en la etiqueta no se desbordará y el resultado final será ocultado.
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 imagen en un globo? Lo intenté, pero la descripción se pone en la imagen, mientras que encaje en la parte inferior derecha ... ¿Es esto posible?
Gracias
20 de octubre 2008 a las 11:25
Hola, super tutau, pero he hecho una barra de menú con ul y li, etc y que quería utilizar la punta de la herramienta, pero se corta cuando aparece! Por lo que se ve una pequeña parte!
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 la otra dirección) sobre el texto del enlace, como Facebook en la barra en la parte inferior, por favor?
Gracias ...
Heve
06 de noviembre 2008 a las 12:48
coooooooooooool! gracias
17 de diciembre 2008 a las 12:06
(Tema - burbuja de pantalla)
¡Hola
¿Es posible poner el enlace en un mapa de imagen?
gracias y el tutorial impresionante!
buen día!