Webmaster Libre

Desarrollo web con software libre

Buscador

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:

  1. <blockquote>
  2. <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:

  1. blockquote {
  2.     text-indent: 25px;
  3.     background: url(/2006/11/28/comillas-con-imagenes-para-los-blockquote/quotes1.png);
  4.     background-position: 0 2px;
  5.     background-repeat: no-repeat;
  6. }

Conseguir la imagen que cierra las comillas es tan simple como dar estilo a toda etiqueta p contenida por un blockquote:

  1. blockquote p {
  2.     display: inline;
  3.     margin: 0;
  4.     padding-right: 24px;
  5.     background: url(/2006/11/28/comillas-con-imagenes-para-los-blockquote/quotes2.png);
  6.     background-position: bottom right;
  7.     background-repeat: no-repeat;
  8. }

Simple y limpio.

Demo

Otras entradas

Esta entrada fue publicada por Alma Fernández el Martes, 28 de Noviembre de 2006 y está archivada en: (x)HTML, CSS, Codigo. Puedes dejar un comentario, o enviar un trackback desde tu sitio.

8 Comentarios

Agrega el tuyo
  1. [...] Ver la totalidad del articulo en: Web Master Libre [...]

    Comillas con imágenes para los blockquote « Cosas sencillas 29 Noviembre, 2006

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

    Mis Algoritmos » Comillas con imagenes para los blockquote 29 Noviembre, 2006

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

    Mis Algoritmos » Links 29 Noviembre, 2006

  4. 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

    Frank 22 Diciembre, 2006

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

    Frank 22 Diciembre, 2006

  6. 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.

    Alma Fernández 22 Diciembre, 2006

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

    Mis Algoritmos » Blog Archive » Links 24 Abril, 2007

  8. [...] Comillas con imágenes para p y blockquote [...]

    Mis Algoritmos » Blog Archive » Comillas con imagenes para los blockquote 24 Abril, 2007

Comentar:

Algunas etiquetas HTML permitidas:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blogalaxia BlogESfera - Directorio de Blogs Hispanos Web Developement Blogs - BlogCatalog Blog Directory