Blockquote con imagenes de fondo y CSS
Julio 1st, 2008 por alwaisonHoy 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:
-
blockquote {
-
text-indent: 25px;
-
background: url(quotes1.png);
-
background-position: 0 2px;
-
background-repeat: no-repeat;
-
}
-
-
blockquote p {
-
display: inline;
-
margin: 0;
-
padding-right: 24px;
-
background: url(quotes2.png);
-
background-position: bottom right;
-
background-repeat: no-repeat;
-
}
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í.
