Las famosas burbujas solo con css3 (novedad css3)

**Hectorsito20** · 18-dic-2011

Que tal amigos en esta entrega les muestro algo de verdad es muy divertido y que ami personalmente me gusta mucho, y es la capacidad que tiene css3 de crear cajas de tipo busbujas...

Código html
<body>
<h2>burbujas-Intercambiosas!</h2>
<div class="burbuja01">
Intercambios Virtuales <span>Intercambisos</span>
<div class="burbujaShadow"></div>
<div class="burbujaBorder"></div>
</div>
<p class="credit">Creado por Hectorsito20, para <a href="#">Intercambios Virtuales</a></p>
</body>

Código css
<style type="text/css">
h2{

font-family:Tahoma;
font-size:30px;
}
.burbuja01 {
background-color: #ccc;
border: 2px solid #000;
color: #fff;
display: inline-block;
font-size: 36px;
font-family:Tahoma;
line-height: 1.3em;
margin: 0 0 0 10px;
padding: 10px;
position: relative;
text-align: center;
width: auto;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px #FFF;
-webkit-box-shadow: 0 0 5px #FFF;
box-shadow: 0 0 5px #FFF;
}
.burbujaShadow {
border-color: #000 transparent transparent transparent;
border-style: solid;
border-width: 10px;
bottom: -22px;
height: 0;
left: 30px;
position: absolute;
width: 0;
}
.burbujaBorder {
border-color: #ccc transparent transparent transparent;
border-style: solid;
border-width: 10px;
bottom: -19px;
height: 0;
left: 30px;
position: absolute;
width: 0;
}
.burbuja01 span {
color: darkred;
font-family: Verdana;
text-shadow: 1px 4px 1px #ABC;
}
.credit{
font-family:Tahoma;
font-size:11px;
margin-top:70px;
}
</style>

Resultado!

**VJEVans** · 18-dic-2011

exelente ... gracias Hector ...

**Hectorsito20** · 18-dic-2011

De nada compañero

baduser · 19-dic-2011

**felcon** · 19-dic-2011

excelente a poner a prueba esto

**Eloy58** · 19-dic-2011

**cramercaba** · 21-dic-2011

**GenuiWorld** · 21-dic-2011

18-dic-2011	#1
Hectorsito20 Desarrollador HTML5 & CSS3 Ingreso: octubre-2011 Ubicación: Republica Dominicana, Punta Cana Bávaro Mensajes: 157 Sexo: País: Signo: Agradecido: +445	Las famosas burbujas solo con css3 (novedad css3) Que tal amigos en esta entrega les muestro algo de verdad es muy divertido y que ami personalmente me gusta mucho, y es la capacidad que tiene css3 de crear cajas de tipo busbujas... Código html <body> <h2>burbujas-Intercambiosas!</h2> <div class="burbuja01"> Intercambios Virtuales <span>Intercambisos</span> <div class="burbujaShadow"></div> <div class="burbujaBorder"></div> </div> <p class="credit">Creado por Hectorsito20, para <a href="#">Intercambios Virtuales</a></p> </body> Código css <style type="text/css"> h2{ font-family:Tahoma; font-size:30px; } .burbuja01 { background-color: #ccc; border: 2px solid #000; color: #fff; display: inline-block; font-size: 36px; font-family:Tahoma; line-height: 1.3em; margin: 0 0 0 10px; padding: 10px; position: relative; text-align: center; width: auto; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 5px #FFF; -webkit-box-shadow: 0 0 5px #FFF; box-shadow: 0 0 5px #FFF; } .burbujaShadow { border-color: #000 transparent transparent transparent; border-style: solid; border-width: 10px; bottom: -22px; height: 0; left: 30px; position: absolute; width: 0; } .burbujaBorder { border-color: #ccc transparent transparent transparent; border-style: solid; border-width: 10px; bottom: -19px; height: 0; left: 30px; position: absolute; width: 0; } .burbuja01 span { color: darkred; font-family: Verdana; text-shadow: 1px 4px 1px #ABC; } .credit{ font-family:Tahoma; font-size:11px; margin-top:70px; } </style> Resultado!

19-dic-2011	#6
Eloy58 VIP ZONE Ingreso: abril-2009 Ubicación: Madrid (España) Mensajes: 18.695 Sexo: País: Signo: Agradecido: +48.479	Aprende lo que puedas y enseña lo que sepas, el conocimiento es patrimonio de TODOS

21-dic-2011	#7
cramercaba Erudito Ingreso: noviembre-2009 Mensajes: 9.213 Sexo: País: Agradecido: +11.824	La vida es lo que pasa mientras se instalan las actualizaciones de Windows

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
[App] JLOJCH: Listado Oficial de Juegos Compatibles con HDL,OPL,USB,ESR by Tapia	nokiajavi	Software	17	25-jun-2015 15:59
Horóscopo para 2011	Eloy58	Off-Topic	6	09-ene-2011 05:06

Los siguientes 7 usuarios agradecen a Hectorsito20 por este mensaje:
cramercaba (21-dic-2011), dreamfox (19-dic-2011), Eloy58 (19-dic-2011), GenuiWorld (21-dic-2011), Hunted (19-dic-2011), Orpheus96 (19-dic-2011), VJEVans (18-dic-2011)

18-dic-2011	#2
VJEVans Erudito Ingreso: mayo-2010 Ubicación: Arequipa (Peru) Mensajes: 6.935 Sexo: País: Signo: Agradecido: +10.322	exelente ... gracias Hector ...

Los siguientes 4 usuarios agradecen a VJEVans por este mensaje:
baduser (19-dic-2011), cramercaba (21-dic-2011), Hectorsito20 (18-dic-2011), Orpheus96 (19-dic-2011)

19-dic-2011	#4
baduser Banned Ingreso: julio-2009 Ubicación: Mexico City, Capital del Mundo Mensajes: 33.485 Sexo: País: Signo: Agradecido: +70.458

Usuarios que han agradecido este mensaje de baduser
cramercaba (21-dic-2011)

19-dic-2011	#5
felcon Ayudante Experto Ingreso: junio-2010 Ubicación: @fcontrerax Mensajes: 637 Sexo: País: Signo: Agradecido: +1.734	excelente a poner a prueba esto

Los siguientes 2 usuarios agradecen a felcon por este mensaje:
baduser (19-dic-2011), cramercaba (21-dic-2011)

Usuarios que han agradecido este mensaje de Eloy58
baduser (19-dic-2011)

Usuarios que han agradecido este mensaje de cramercaba
Hectorsito20 (21-dic-2011)

21-dic-2011	#8
GenuiWorld Ayudante Frecuente Ingreso: julio-2011 Ubicación: Donde Todo Es Diferente. Mensajes: 150 Sexo: País: Agradecido: +358

(0 miembros y 1 visitantes)

Los siguientes 2 usuarios agradecen a GenuiWorld por este mensaje:
cramercaba (22-dic-2011), Hectorsito20 (21-dic-2011)