|
28-abr-2013 | #1 |
Desarrollador HTML5 & CSS3 Ingreso: octubre-2011
Ubicación: Republica Dominicana, Punta Cana Bávaro
Mensajes: 157
Sexo: País: Signo:
Agradecido: +445
|
Burbujas para tooltip, súper fácil!
Saludos para todos, codeando me enteré de que hacer burbujas para tu tooltips ó lo que desees en tu sitio web es más fácil de lo que parece, empecemos..
Obviamente lo primero es nuestro html, como en todo proyecto Código:
<!doctype html> <html lang="es"> <head> <title>Practica Javascript</title> <meta charset="uft-8"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> </head> <body> <div id="container"> <div class="content"> <div class="avatar"> </div> <h3>James Poetrodriguez</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p> <div class="triangle"></div> </div> </div> </body> </html> Lo primero que hicismo fué crear una etiquta DIV para el contenedor de nuestro ejemplo en mi caso la llamé (container) antesediendole una almoadilla para poder llamarla desde los estilos CSS. después creo otro DIV para el content interno é hijo de container. OJO, el nombre es indiferente ya que cada quien puede nombrarla cómo deseen.. bueno y asi sucesivamente con los demás, todo va a depender de lo que queramos hacer obviamente aqui ya es cuestión de imaginación y creatividad de cada quien. Ahora si... ya creo que tenemos que entrar en materia.. bueno para empezar tenemos que aplicar algunas propiedades básica al body, (no se preocupen nada del otro mundo), son propiedades cómo margin, padding, font.-family, etc... seguido de ésto vamos al construir lo que venimos hacer aqui, una burbuja con css básico. este es el códido: Código:
body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; background: #666; } * { margin: 0; padding: 0; } a { text-decoration: none; } #container { width: 780px; margin: 40px auto; background: white; padding: 20px; overflow: auto; -webkit-box-sizing: border-box; } .content { width: 420px; background-color: #0072C6; padding: 10px; position: relative; border-radius: 6px; color: white; border: solid 2px #333; } .content .triangle { width: 0px; height: 0px; position: absolute; border-style: solid; border: solid 2px #333; border-width: 12px 0 12px 12px; border-color: transparent transparent transparent #0072C6; top: 20px; right: -12px } .content .avatar { width: 80px; height: 80px; background-color: #333; float: left; margin-right: 10px; z-index: 2; }
Y aquí viene el borde!!!! Código:
border-style: solid; border-width: 12px 0 12px 12px; border-color: transparent transparent transparent #0072C6;
Aqui el ejemplo: Última edición por Hectorsito20; 28-abr-2013 a las 13:56 Razón: Faltó la imagen del ejemplo :D |
Los siguientes 7 usuarios agradecen a Hectorsito20 por este mensaje: | ||
baduser (29-abr-2013), Francisco6812 (20-may-2013), Gabriel Go Ol (27-may-2013), Muga (28-abr-2013), tortex (28-abr-2013), Tururojo (10-may-2013), VJEVans (28-abr-2013) |
28-abr-2013 | #2 |
Erudito Ingreso: noviembre-2011
Ubicación: Loading...
Mensajes: 2.796
Sexo: País: Signo:
Agradecido: +3.174
|
Gracias por compartir tu conocimiento sobre el tema Hectorsito20. |
Los siguientes 2 usuarios agradecen a Muga por este mensaje: | ||
Hectorsito20 (28-abr-2013), tortex (28-abr-2013) |
28-abr-2013 | #3 |
MOD/Foro Ingreso: marzo-2010
Ubicación: A un costado del tomacorriente...
Mensajes: 7.002
Sexo: País: Signo:
Agradecido: +19.141
|
Gracias compañero...
"...Si hubiera más personas que amaran el hogar sobre el oro, el mundo sería un lugar más feliz..." Thorin
|
28-abr-2013 | #4 |
Erudito Ingreso: mayo-2010
Ubicación: Arequipa (Peru)
Mensajes: 6.935
Sexo: País: Signo:
Agradecido: +10.322
|
necesito aprender ....
gracias por la info compa !! |
28-abr-2013 | #5 |
Ayudante Frecuente Ingreso: octubre-2012
Ubicación: Venezuela, Maracay
Mensajes: 143
Sexo: País: Signo:
Agradecido: +136
|
Grazias poner manos ala hobra Html y Java y php
|
29-abr-2013 | #6 |
Banned Ingreso: julio-2009
Ubicación: Mexico City, Capital del Mundo
Mensajes: 33.485
Sexo: País: Signo:
Agradecido: +70.458
|
|
10-may-2013 | #7 |
Banned Ingreso: mayo-2012
Mensajes: 836
Sexo: País: Signo:
Agradecido: +3.237
|
muy buena info gracias!!!!!!!!
|
Etiquetas |
border, css, css3, html, transparent |
(0 miembros y 1 visitantes) | |
|
|
Temas Similares | ||||
Tema | Autor | Foro | Respuestas | Último mensaje |
.: Clasificacion de Malware - Amenazas Para Nuestra PC - Informacion :. | VJEVans | Seguridad | 16 | 29-jul-2012 21:52 |
GLOSARIO ... avi, Cine en Casa, videograbación, etc, etc ... | Eloy58 | Cine, TV & Videos Online | 15 | 23-jul-2012 08:57 |
Las más importantes Obras de la Música Clásica | Felina05 | Música | 9 | 05-ene-2012 14:32 |
Feria de Abril (Sevilla) | jchierro | Off-Topic | 6 | 24-abr-2010 19:21 |