Cómo hacer callout SÓLO con css (sin imágenes)

kseso? · #1 (**permalink**) 21/10/2008, 15:01

Encontrado en http://www.dailycoding.com/Posts/pur..._callouts.aspx

Se trata de realizar callouts (

), o ese triangulito que señala al autor del comentario, exclusivamente con css, sin necesidad de utilizar imágenes.
Pero una imagen te lo aclara mejor:

Como siempre, no te conformes con verlo funcionar en tu navegador, métete con él y averigua qué hace qué.

Bueno, aquí los códigos:

Cita:

Cita:

<body>
<div class="divContainerMain">
<h3>
Up Side Callout</h3>
<div>
<a href="#">Ramesh Soni</a> Said</div>
<div class="calloutUp">
<div class="calloutUp2">
</div>
</div>
<div class="divContainerUp">
El detalle significativo de esta página es lograr UNICAMENTE con CSS el efecto triangular que señala al autor del comentario. Ese triángulo como verás, si echas un vistazo al código, no está logrado con ninguna imagen. Esta técnica ha sido encontrada en http://www.dailycoding.com/Posts/pur..._callouts.aspx
</div>
<br />
<br />
<h3>
Down Side Callout</h3>
<div class="divContainerDown">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt
turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus.
Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla
viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan
consectetuer.
</div>
<div class="calloutDown">
<div class="calloutDown2">
</div>
</div>
<div>
<a href="#">Ramesh Soni</a> Said</div>
</div>
</body>

Que te diviertas 'enredando' con él.

P.D.: Cuando lo vi había un comentario de que no funciona en ie6 :(

Mikmoro · #2 (**permalink**) 21/10/2008, 15:17

Otro aporte curiosísimo.

Desgraciadamente IE6 no entiende el dotted para el borde y por eso no funciona, pero es muy ingenioso de todas maneras.

Igual te tengo que hacer una sección en la página de recursos

kseso? · #3 (**permalink**) 21/10/2008, 15:27

Cita:

Iniciado por Mikmoro

Otro aporte curiosísimo.

Desgraciadamente IE6 no entiende el dotted para el borde y por eso no funciona, pero es muy ingenioso de todas maneras.

Igual te tengo que hacer una sección en la página de recursos

Esa era la razón aportada, que me callé para ponerte a prueba

A diferencia de usted que le da al 'coco', yo me limito a darle a 'buscar', pequeña diferencia pero significativa

Mikmoro · #4 (**permalink**) 21/10/2008, 15:39

Bueno, pues será la sección "búsquedas imposibles", o El buscón (Quevedo).

daPhyre · #5 (**permalink**) 22/10/2008, 11:14

Excelente aporte de verdad

Parece que de este foro va a salir una página de CSS en español con los aportes que logran entre ustedes (Y uno que otro que logra colarse

)

DragonX · #6 (**permalink**) 22/10/2008, 11:36

algo mas para tu site mik!

kseso? muy bueno!!!!!

Mikmoro · #7 (**permalink**) 22/10/2008, 11:58

Otra forma de hacerlo, que sí funciona en IE6:

http://www.araudi.net/forosdelweb/callout.html

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>callout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#caja {width: 200px; height: 100px;
border: solid 2px #000;
margin: 20px;
position: relative;
}
#caja span {font-family: verdana; font-size: 30px;
position: relative;
top: -20px;
background-color: #fff;
display: block;
width: 17px;
overflow: hidden;
text-indent: -4px;
left: 20px;}
</style>
</head>
<body>
<div id="caja"><span>^</span> Otra forma de hacerlo</div>
</body>
</html>

Aunque sólo funciona en blanco (o mismo fondo que color de caja)

kseso? · #8 (**permalink**) 22/10/2008, 12:15

^^uy ingenioso

America|UNK · #9 (**permalink**) 22/10/2008, 12:46

Flipante, me sorprende, aunque el css es más grande que el html :P.

Mikmoro · #10 (**permalink**) 22/10/2008, 16:42

Rizando el rizo:

http://www.araudi.net/forosdelweb/callout2.html

seoista · #11 (**permalink**) 23/10/2008, 23:55

Cita:

Iniciado por Mikmoro

Rizando el rizo:

http://www.araudi.net/forosdelweb/callout2.html

Magnífica aportación

Gracias.

Saludos

AnibalDiaz · #12 (**permalink**) 22/09/2011, 02:35

Otra forma mas sencilla y utilizando el primer ejemplo de este post, es cambiando la propiedad 'dotted' por 'dashed'.

es decir:

.calloutUp2
{
position: relative;
left: -10px;
top: 2px;
height: 0;
width: 0;
border-bottom: 10px solid #9999ff;
border-left: 10px dashed transparent;
border-right: 10px dashed transparent;
z-index: 11;
}
.calloutDown
{
height: 0;
width: 0;
border-top: 12px solid #ffffff;
border-left: 12px dashed transparent;
border-right: 12px dashed transparent;
left: 0px;
top: 0px;
margin-left: 20px;
z-index: 11;
}