Bloques de texto con estilo

31/jul/2007 19
SafariFirefoxInternet Explorer 7Internet Explorer 6Opera

La etiqueta <blockquote> corresponde a una cita dentro de un bloque de texto. Ese es su significado semántico. Se usa para definir largos parágrafos donde se citan desde otros sitios web externos. Puede ir acompañado de algunos atributos, como title (define el título de esa cita), lang (define en qué idioma está) y cite (muestra el URL desde dónde se tomó esa cita).

La idea de esta ocasión, es darle un estilo más gráfico a esas citas a través de un poco de CSS. Como en impresos se suelen utilizar las comillas (") para describir gráficamente este elemento, lo que haremos es poner al inicio y al final del blockquote 2 comillas a través de 2 imagenes diferentes. Ahora, la dificultad está en que como existe sólo 1 blockquote, CSS 2.1 no me permite tener 2 background simultáneas (lo que sí será soportado con CSS 3). Lo que se hará entonces, será aprovechar la pseudo-clase :fist-letter (le agrega estilo a la primera letra de un párrafo) para ubicar la primera imagen. Milagrosamente, esta pseudo-clase es soportado por IE5.5+, todo un privilegio.

El HTML, no es gran cosa:

<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida..........</blockquote>

Pero a través de CSS, sí veremos cambios:

blockquote {
     background: url(cierra.gif) no-repeat right bottom;
     width: 400px;
     padding-left: 18px;
     padding-right: 18px;
     text-indent: -18px;
}
blockquote:first-letter {
     background: url(abre.gif) no-repeat left top;
     padding-left: 18px;
}

Ejemplo Blockquote

En la etiqueta <blockquote> se dará el background que contiene la esquina inferior derecha (el cierre de la cita). Además, se define el ancho de la misma (si necesario) y un padding a ambos lados horizontales. Fijarse en que se determinó un text-indent negativo, de igual valor que el padding-left. Este es fundamental al determinar el estilo siguiente, de la pseudo-clase :first-letter. Como esta imagen tiene un ancho de 12px, se agrega un padding para que el parágrafo no lo sobrepase, así se hace necesario que este primer caracter retroceda la misma cantidad de pixeles para que esté de acorde con el inicio del párrafo, como se ejemplifica en la siguiente imagen:

Ver Ejemplo

Si ven el código fuente del ejemplo, notarán que hubo que utilizar comentario condicional para un pequeño detalle en los IE’s. El problema era que no se desplegaba bien la comilla que abre (la del :first-letter), por lo que se posicionó unos 5 pixeles hacia abajo. Sólo eso.

Links:

Comentarios

  1. Toni [#]

    Muy bueno gracias por enseñarnos estas cosas.

  2. Bloques de texto con estilo « Cosas sencillas [#]

    […] Bloques de texto con estilo En CSSLAB nos recuerda que la etiqueta <blockquote> corresponde a una cita dentro de un bloque de texto. Ese es su significado semántico. El resultado en wordpress.com es el siguiente: Se usa para definir largos parágrafos donde se citan desde otros sitios web externos. Puede ir acompañado de algunos atributos, como title (define el título de esa cita), lang (define en qué idioma está) y cite (muestra el URL desde dónde se tomó esa cita). […]

  3. Arcadio [#]

    Muy interesante, habia tratado de hacer esto, pero esta manera explicada aqui he quedado anonadado con la sencilles, comparado a lo complejo como lo habia pensado :S.
    Esta web es una de esas unicas que te explican el porque de cada cosa, felicidades.

    Ah. una solicitud, algunos ejemplos con mootools please.

    Saludos desde Panamá.

  4. Pablo [#]

    Puede ser que no funcione en IE7?
    No logro ver la primera comilla.

  5. CSSLab Admin [#]

    @Arcadio: he hecho bastantes cosas con Moo, utiliza el buscador y veras algunos ejemplos. @Pablo, lo probe en IE6 e IE7, raro q no lo veas. lo volvi a revisar y esta confirmado q funciona… Salu2.

  6. Freddy [#]

    Muy buen post!!!

    Saludos

  7. Claudio Olivares [#]

    Super este artículo, la verdad no se me había ocurrido como implementar dos comillas en un blockquote.

    Ahora mi duda es. Un blockquote con varios párrafos en su interior, permite lograr el mismo efecto?

    ej.:

    Lorem Ipsum
    Lorem Ipsum
    ...

  8. CSSLab Admin [#]

    Claudio, la etiqueta blockquote es de por si un paragrafo pero q tiene otro significado que la etiqueta p. asi q por cada blockquote habra un bloque con ese estilo. para untos aparte, tendrias adentro q utilizar br. saludos.

  9. netmash [#]

    wow!! muy buena una forma mas rapida de dar estilo y facil manejo. y que se vea la web con un style mas fino XD

  10. Buzu [#]

    Ingenioso lo del first letter para la implementacion de las comillas… espero ancioso lo del doble fondo de CSS3

  11. links for 2007-08-02 en newdisco [#]

    […] CSSLab » Bloques de texto con estilo Crea tus bloques de citas con CSS (tags: css blockquote quotes) […]

  12. Guillermo [#]

    Muy bueno. Sabía que existía el first-letter pero no sabía que podía meterse una imagen de fondo.
    Gracias por la solución.

  13. HacheMuda » Blockquotes con comillas al principio y al final [#]

    […] En HTML, la etiqueta <blockquote> sirve para diferenciar bloques de texto y citas dentro de nuestros artículos. Desde CSSLab nos proponen una solución elegante para ponerles comillas al principio y al final de los blockquotes. Lo único que hace es redefinir el estilo de la etiqueta blockquote y ponerle una imagen de fondo al bloque, que son las comillas del final. Y utilizar el selector blockquote:first-letter para meter la imagen de fondo de las comillas de inicio. […]

  14. fearlex [#]

    WHoa, todavia no puedo creer que Internet Explorer soporte :first-letter 😀

  15. ClauCookie [#]

    wow, vaya manera mas facil y sencilla de darle estilo al blockquote, felicidades por el articulo, tu web es muy util!

    un saludo

  16. Master Of Madness [#]

    Muy bueno el articulo. Estuve probando hacer esto en mi blog, pero tuve algunos problemas. Lo hiciera como lo hiciera la imagen del :first-letter no se mostraba, por más que el código era exactamente el mismo (me vi obligado a probar de esa manera). Me fijé tambien si habia alguna parte del codigo q lo pisara pero tampoco era eso. Al final terminé dejando sólo la comilla final y dandole un poco de estilo, pero me hubiera gustado que quedara similar a tu ejemplo. saludos!

  17. » Modernizando los drop caps | CSSLab [#]

    […] lograr este efecto. Algunos recordarán que utilizamos esta misma pseudo-class para lograr bloques de texto con estilo. Bueno, esa vez fue una técnica; ahora la utilizaremos para el propósito con que fue […]

  18. YADIRITA [#]

    los quiero muxxxxxxxxxxxo

  19. Julio [#]

    Muy bueno y yo lo utilizo en mi blog.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab