Comillas con imágenes para los blockquote

Alma Fernández 28/11/2006

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:

Esto es el contenido de un blockquote, rodeado de sus etiquetas p, como dios manda

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.

Demo

Otras entradas que pueden interesarte:

(x)HTML, CSS, Codigo

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

Frank dice:

22 Diciembre 2006 en 7:21

La solución parece interesante pero tiene un problema.

Muchas veces adentro de la etiqueta

hay varias

ej:

Este es el primer parrafo
Este es el segundo parrafo

Y en ese caso los resultados son desastrosos.

No logro encontrar ninguno que se adecúa mis necesidades: necesito qeu funcione con el ejemplo que di, sin agregar divs interiores ni nada. Es que es para el template de un blog de wordpress.. pero no logro hacerlo. ¿Alguna idea? (también me puedes explicar si quieres como cambiar el boton del editor visual WSYGR.. (nunca me acuerdo el nombre entero) para que cuando apriete el botón de agregar sangría, además de meter en la etiqueta blockquote, me lo meta en un div…

Gracias

22 Diciembre 2006 en 7:34

existe alguna forma de ponerle dos fondos a la misma class?

Alma Fernández dice:

22 Diciembre 2006 en 18:01

Podrías probar a dar estilo a las cosas al reves, me explico:

Para la comilla de apertura damos estilo a p:first-child y para la comilla de cierre a la etiqueta blockquote. NO se verá bien en IE6 pero si en el resto de navegadores.

Comillas con imágenes para los blockquote « Cosas sencillas dice:

29 Noviembre 2006 en 13:05

[...] Ver la totalidad del articulo en: Web Master Libre [...]

Mis Algoritmos » Comillas con imagenes para los blockquote dice:

29 Noviembre 2006 en 19:51

[...] Comillas con imágenes para p y blockquote Entradas posiblemente relacionadas: [...]

Mis Algoritmos » Links dice:

29 Noviembre 2006 en 20:16

[...] Comillas con imágenes para los blockquote Rápido y sencillo. [demo] [...]

Mis Algoritmos » Blog Archive » Links dice:

24 Abril 2007 en 20:10

Mis Algoritmos » Blog Archive » Comillas con imagenes para los blockquote dice: