Bloques de texto con estilo

31/Jul/2007 162
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. 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á.

  3. Pablo [#]

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

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

  5. Freddy [#]

    Muy buen post!!!

    Saludos

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

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

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

  9. Buzu [#]

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

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

  11. fearlex [#]

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

  12. ClauCookie [#]

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

    un saludo

  13. 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!

  14. YADIRITA [#]

    los quiero muxxxxxxxxxxxo

  15. Julio [#]

    Muy bueno y yo lo utilizo en mi blog.

CSSLab