En entradas anteriores, os dejamos un excelente tutorial para crear blockquotes con imágenes de fondo. Hoy encuentro en tutorialblog un artículo donde exponen otra forma de dar estilo al elemento blockquote usando CSS.

Además, a modo de inspiración, nos ofrecen una galería con ejemplos para tomar ideas.

El artículo original podeis encontrarlo aquí: Resources for styling blockquotes

Hoy en el trabajo, necesitaba dar formato a una cita de texto y hacerlo de una manera bastante visual y atractiva. Buscando en Google (como siempre), he encontrado una forma fácil, bonita y que valida al 100%.

La idea, es hace algo similar a esto:

El CSS necesario es el siguiente:

Sencillo, ¿verdad? La etiqueta blockquote lleva una imagen de fondo (las comillas que abren), y indenta el texto para que no tape el texto.

Dentro del blockquote, pondremos el texto dentro de un párrafo (<p>), que también llevará una imagen de fondo (en este caso, las comillas que cierran).

Y poco más… valida tanto el HTML como el CSS, y cumple con su función.

El post original, es este: Inline image quotes (en inglés), y podeis ver una demo aquí.