SummArg | Cursos y recursos para webmasters

22/01/2012

¿Cómo elaborar un cuadro de dialogo o viñeta sólo con CSS?

Excelente explicación de MrColes que intentaremos retransmitirles aquí en donde el resultado final del ejercicio es una caja de diálogo con un triángulo indicando el autor del texto como el que sigue:

Breve introducción

Para lograr formas triangulares con propiedades CSS2, basta con observar lo que sucede en un cuadro si colocamos un borde de cada color luego procedemos a aumentar el ancho de cada una.

border-left:1px solid red;
border-top: 1px solid green;
border-right:1px solid blue;
border-bottom: 1px solid yellow;

Interesante efecto logrado, cierto? Con un poco de imaginación podemos experimentar con diferentes colores y con diferentes anchos.

El autor propone utilizar border-color: transparent, el cual es soportado por casi todos los navegadores. Para el caso de IE6 propone un pequeño hack y lo aplica de la siguiente manera:

.notch {
    border-top: 10px solid #000;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 0;
    _border-right-color: pink;
    _border-left-color: pink;
    _filter: chroma(color=pink);
}

Así que entonces primero definimos el HTML:

<div class="callout border-callout">
    This is a callout box with a border!
    <b class="border-notch notch"></b>
    <b class="notch"></b>
</div>

Y finalmente el CSS completo.

.callout {
position: relative;
margin: 18px 0;
padding: 18px 20px;
background-color: #eef4f9;
/* easy rounded corners for modern browsers */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.callout .notch {
position: absolute;
top: -10px;
left: 20px;
margin: 0;
border-top: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #eef4f9;
padding: 0;
width: 0;
height: 0;
/* ie6 height fix */
font-size: 0;
line-height: 0;
/* ie6 transparent fix */
_border-right-color: pink;
_border-left-color: pink;
_filter: chroma(color=pink);
}
.border-callout { border: 1px solid #c5d9e8; padding: 17px 19px; }
.border-callout .border-notch { border-bottom-color: #c5d9e8; top: -11px; }

Leer tutorial

Dejar un comentario