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:

blockquote con imagenes y css

El CSS necesario es el siguiente:

  1. blockquote {
  2.         text-indent: 25px;
  3.         background: url(quotes1.png);
  4.         background-position: 0 2px;
  5.         background-repeat: no-repeat;
  6. }
  7.  
  8. blockquote p {
  9.         display: inline;
  10.         margin: 0;
  11.         padding-right: 24px;
  12.         background: url(quotes2.png);
  13.         background-position: bottom right;
  14.         background-repeat: no-repeat;
  15. }

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

Si eres nuevo, puedes subscribirte a nuestras noticias por RSS feed. Gracias por tu visita!


Esta noticia se publicó el , Martes, Julio 1st, 2008 a las 21:42 y se encuentra dentro de las categorias CSS, Developers, Html/Dhtml, Noticias . Si quieres subscribirte a los RSS 2.0. También puedes responder a los mensajes.