Comillas con imágenes para los blockquote
Qué bien quedan esos blockquote que tienen unas grandes comillas tipográficas al comienzo y al final ¿verdad? Existen muchos métodos para conseguirlas pero el escaso soporte para CSS 2.1 de Internet Explorer 6 las hace caer en el ámbito de lo que pudo ser y no fue, al menos durante los años que tardemos en sacárnoslo de encima.
Otras soluciones pasan por utilizar Javascript o trucos con imágenes posicionadas absolutamente, nada especialmente aconsejable.
Hoy he descubierto, gracias a Natalie Downe, que, en realidad, conseguir unos blockquote con estilo es tan simple como sacar ventaja de nuestros amados estándares y las hojas de estilo en cascada.
Me explico: para que un blockquote sea válido tiene que tener la siguiente estructura:
- <blockquote>
- <p>Esto es el contenido de un blockquote, rodeado de sus etiquetas p, como dios manda</p></blockquote>
Supongo que ya vais viendo por donde voy. Para la imagen de la izquierda que abre las comillas simplemente tendremos que dar estilo a la etiqueta blockquote como sigue:
- blockquote {
- text-indent: 25px;
- background: url(quotes1.png);
- background-position: 0 2px;
- background-repeat: no-repeat;
- }
Conseguir la imagen que cierra las comillas es tan simple como dar estilo a toda etiqueta p contenida por un blockquote:
- blockquote p {
- display: inline;
- margin: 0;
- padding-right: 24px;
- background: url(quotes2.png);
- background-position: bottom right;
- background-repeat: no-repeat;
- }
Simple y limpio.
Esta entrada fue publicada por Alma Fernández el Tuesday, 28 de November de 2006 y está archivada en: (x)HTML, CSS, Codigo. Puedes dejar un comentario, o enviar un trackback desde tu sitio.
