Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Cómo hacer callout SÓLO con css (sin imágenes) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/10/2008, 16:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Cómo hacer callout SÓLO con css (sin imágenes)

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:
<style type="text/css">
.calloutUp
{
height: 0;
width: 0;
border-bottom: 12px solid #ffffff;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
left: 0px;
top: 0px;
margin-left: 20px;
z-index: 10;
}
.calloutUp2
{
position: relative;
left: -10px;
top: 2px;
height: 0;
width: 0;
border-bottom: 10px solid #9999ff;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
z-index: 11;
}
.calloutDown
{
height: 0;
width: 0;
border-top: 12px solid #ffffff;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
left: 0px;
top: 0px;
margin-left: 20px;
z-index: 11;
}
.calloutDown2
{
position: relative;
left: -10px;
top: -12px;
height: 0;
width: 0;
border-top: 10px solid #9999ff;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
z-index: 10;
}
.divContainerUp
{
background-color: #9999ff;
border: solid 1px #ffffff;
position: relative;
top: -1px;
z-index: 9;
width: 500px;
padding: 4px;
}
.divContainerDown
{
background-color: #9999ff;
border: solid 1px #ffffff;
position: relative;
top: 1px;
z-index: 3;
width: 500px;
padding: 4px;
}
.divContainerMain
{
background-color: #ccccff;
padding: 8px;
}
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 :(
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #2 (permalink)  
Antiguo 21/10/2008, 16:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

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
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 21/10/2008, 16:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

Cita:
Iniciado por Mikmoro Ver Mensaje
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 21/10/2008, 16:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

Bueno, pues será la sección "búsquedas imposibles", o El buscón (Quevedo).
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 22/10/2008, 12:14
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

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 )
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #6 (permalink)  
Antiguo 22/10/2008, 12:36
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

algo mas para tu site mik!

kseso? muy bueno!!!!!
  #7 (permalink)  
Antiguo 22/10/2008, 12:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

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)
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 22/10/2008, 13:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

^^uy ingenioso
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 22/10/2008, 13:46
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 11 años
Puntos: 56
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

Flipante, me sorprende, aunque el css es más grande que el html :P.
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #10 (permalink)  
Antiguo 22/10/2008, 17:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

Rizando el rizo:

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

__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 24/10/2008, 00:55
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

Cita:
Iniciado por Mikmoro Ver Mensaje
Magnífica aportación

Gracias.

Saludos
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
  #12 (permalink)  
Antiguo 22/09/2011, 03:35
Avatar de AnibalDiaz  
Fecha de Ingreso: junio-2011
Mensajes: 65
Antigüedad: 6 años, 6 meses
Puntos: 5
Respuesta: Cómo hacer callout SÓLO con css (sin imágenes)

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;
}
__________________
Si he podido ayudarte, dale al 'Me gustó, ¡gracias!'...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:24.