JMiur [E]

Algunos ejemplos de burbujas para contener textos, realizadas utilizando sólo CSS3, creados por Nicolas Gallagher. La página con demos tiene muchos más y el archivo de estilo que contiene las definiciones tiene muchos comentarios que las explican.

Duis quis urna nunc, sit amet tincidunt lectus.

Duis quis urna nunc, sit amet tincidunt lectus.

Duis quis urna nunc, sit amet tincidunt lectus.



.triangle-border {
background: #FFF;
border: 5px solid #5A8F00;
color: #333;
margin: 1em 0 3em;
padding: 15px;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.triangle-border:before {
border: 20px solid transparent;
border-top-color: #5A8F00;
bottom: -40px;
content: "\00a0";
display: block;
height: 0;
left: 40px;
position: absolute;
width: 0;
}
.triangle-border:after {
border: 13px solid transparent;
border-top-color: #FFF;
bottom: -26px;
content: "\00a0";
display: block;
left: 47px;
position: absolute;
height: 0;
width: 0;
}

.triangle-border.top:before {
border: 20px solid transparent;
border-bottom-color:#5A8F00;
bottom: auto;
left: auto;
right: 40px;
top: -40px;
}
.triangle-border.top:after {
border: 13px solid transparent;
border-bottom-color:#FFF;
bottom: auto;
left: auto;
right:47px;
top: -26px;
}

.triangle-border.left {
margin-left: 30px;
}
.triangle-border.left:before {
border-width: 15px 30px;
border-style: solid;
border-color: transparent #5A8F00 transparent transparent;
bottom: auto;
left: -60px;
top: 10px;
}
.triangle-border.left:after {
border-width: 9px 21px;
border-style: solid;
border-color: transparent #FFF transparent transparent;
bottom: auto;
left: -42px;
top: 16px;
}

Nulla quis eros dolor, eget tincidunt velit. Nam ultrices magna vitae eros accumsan vestibulum. Morbi quis dui ac justo volutpat sagittis a eget sapien.




.example-right {
background: #5A8F00;
background: -moz-linear-gradient(top, #b8db29, #5A8F00);
background: -o-linear-gradient(top, #b8db29, #5A8F00);
background: linear-gradient(top, #b8db29, #5A8F00);
border-radius: 10px;
color: #FFF;
margin: 0;
padding: 15px 30px;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.example-right + p {
margin: 15px 0 2em 85px;
font-style: italic;
}
.example-right:after {
border-width: 0 20px 50px 0px;
border-style: solid;
border-color: transparent #5a8f00;
bottom: -50px;
content: "\00a0";
display: block;
left: 50px;
height: 0;
position: absolute;
width: 0;
}

Aliquam scelerisque cursus ante, et lobortis orci elementum in. In commodo ipsum nec leo malesuada aliquet.



.oval-thought-border {
background: #FFF;
border:10px solid #C81E2B;
color: #333;
margin: 1em auto 80px;
padding: 70px 30px;
position: relative;
text-align:center;
-webkit-border-top-left-radius: 240px 140px;
-webkit-border-top-right-radius: 240px 140px;
-webkit-border-bottom-right-radius: 240px 140px;
-webkit-border-bottom-left-radius: 240px 140px;
-moz-border-radius: 240px / 140px;
border-radius: 240px / 140px;
}
.oval-thought-border:before {
background: #FFF;
border: 10px solid #C81E2B;
bottom: -40px;
content: "\00a0";
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.oval-thought-border:after {
background: #FFF;
border: 10px solid #C81E2B;
bottom: -60px;
content: "\00a0";
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}

11 comentarios:

[@nimes]  

Buenos estilos css ;) jejeje sorprendente, soy el primero en comentar :X

Responder
Joan Irazu  

Ü me gusta ;)

Responder
YABE  

ESTAN MUY LINDOS,ME GUSTARIA SABER DONDE SE COLOCAN PARA PODER PONERLOS EN BLOGSPOT,POR FAVOR SI PUEDES DAR LA EXPLICACION COMPLETA PASO A PASO,YO SE LO BASICO DEL BLOG PERO ESTO TAN LINDO NO LO PUEDO HACER,MUCHAS GRACIAS,UN ABRAZO

Responder
@rielCastellanos  

Excelentes muy buenos. Seguro cuando sepa en que lo puedo usar en mi blog regreso y los aplico. Muchas Gracias

Responder
Mario  

Excelente!
Solo veo las burbujas en Firefox, en IE 7 me muestra un cuadro con los bordes de lo que deberia ser la burbuja.

Responder
Unknown  

Una 'bonitura' total!
Las bellezas que logran con el Css es increíble :)

Hoy tienes 9 grados por allí, aquí 3, pero está maravilloso!

Responder
Anónimo  

Me gusta :):) Y tan solo con CSS!!

Responder
La hormiguita  

Si se ve feito con el IE, todos los bordes son cuadrados no hay degrade y el redondo se ve cuadrado :( . que lástima!!!! Pero están muy buenos. Gracias.

Responder
JMiur  

Estas cosas no son para usar, en Internet Explorer no se verán en absoluto ya que aún no soporta estas nuevas propiedades CSS así que, más vale abstenerse. Sólo son experimentos para mostrar lo que vendrá ... en poco tiempo :D

Responder
stuart  

hola
JMiur

ah..se me habia olvidado agradecerte
la ayuda que me diste con
LightWindow
...
bueno pss pude hacer que el efecto fucionara pero
yo le puse una imagen y me fije que en tus videos
tu pones un cuadro..y en el cuadro dice "ver" que es el boton
que activa el efecto
LightWindow..
bueno pss me podrias ayudar a
poner ese dicho cuadro ...

saludosssss

Responder
JMiur  

El "cuadro" no es otra cosa que una imagen (una miniatura de YouTube). El botón "ver" es simplemente el enlace apra que se abra LightWindow. El resto, es un script personal que por ahora, no está explicado en ninguna entrada.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR