Como darle estilo a las citas en tu web

Hace un par de días escribí un articulo llamado ¿que clase de diseñador web eres?

En ese artículo usaba citas, y les di estilo usando una imagen de fondo y algunos pequeños trucos de CSS.

Ahora quiero compartir ese CSS.

En ese artículo había una cita de Darth Vader que se veía así:

Comandante, llene la galaxia de <table> y <div> y olvídese de cualquier otro elemento... son insignificantes...- Darth Vader

Es hora de explicar como hacer ese diseño.

Primero necesitamos la imagen:

Eso es bastante sencillo, sólo tienes que ir a tu editor de imágenes favorito y escribir el texto: " -comillas- darle un tamaño adecuado, digamos 50 pixeles de ancho y luego guardar la imagen, por ejemplo con el nombre comillas.gif

Ahora necesitamos el HTML

<blockquote>
<p>Comandante, llene la galaxia de <table> y <div> y olvídese de cualquier otro elemento...  <strong>son insignificantes...</strong><cite>- Darth Vader</cite></p>
</blockquote>

Ya tenemos la imagen y el HTML...

Es hora del CSS

Lo primero que hay que hacer aquí es definir el estilo del elemento <blockquote>.

blockquote  {
background:white url(comillas.gif) no-repeat scroll 10px 10px;
padding:25px 0 25px 70px;
}

Lo que decimos con este CSS es que el color de fondo sea blanco, que se use la imagen de fondo comillas.gif para el elemento <blockquote>, que esta imagen de fondo NO se repita y que se posicione dentro del elemento a 10 pixeles del lado izquierdo y 10 pixeles del lado superior.

Ten en cuenta que la url(comillas.gif) funciona si la imagen está en el mismo directorio que tu HTML.

de otro modo tendrías que usar una diferente, por ejemplo: url(/directorio/comillas.gif)

El padding indica que el texto que va dentro del <blockquote> empiece a 70 pixeles desde la izquierda, eso permitirá que el texto no se vea sobre la imagen de fondo.

Aun faltan estilos

Tenemos que darle estilos al <p> que se encuentra dentro del <blockquote>.

blockquote  p  {
font-size: 25px;
color: #333;
}

Este código CSS le da un tamaño de letra de 25px y un color gris oscuro al texto.

Para terminar hay que darle estilos a <cite>

blockquote p cite  {
color:#666;
font-size: 20px;
display:block;
text-align:right;
}

le damos un color gris más claro, un tamaño de letra más pequeño, lo hacemos comportarse como un elemento de bloque (ya que <cite> es un elemento en linea) y alineamos el texto a la derecha.

Y para darle un toque especial aquí tienes la cita con una imagen que la acompaña.

Comandante, llene la galaxia de <table> y <div> y olvídese de cualquier otro elemento... son insignificantes...- Darth Vader

Por cierto, aquí tienes la respuesta de Yoda...

Puedes probar varias cosas más, por ejemplo usar otra imagen de fondo o diferentes colores de texto y fondo, seguramente encontrarás la combinación que más te guste.

imagen de Darth vader por erin watson photography

Comentarios

deja un comentario

1. Juan Pablo

   Buena! Se ve de lo más elegante.

2. Germán

   Gracias JP!

3. arturogoga

   Perfecto! Justo lo que necesitaba. Gracias!

4. DrUalcman

   Otra forma, creo que un poco mas simple, es utilizar la propiedad de background con multiples images. Esto es lo que propongo

   blockquote {
   background: url(img/close.png) no-repeat right top, url(img/open.png) no-repeat left bottom;
   width: 80%;
   padding: 2em 3.5em 0;
   margin: 0 auto;
   }

   Asi en mi ejemplo se centra el contenido dentro del contenedor, y el texto nunca alcanza a las imagenes.

   Muchas gracias por este blog, a mi me ayudo un monton, y bueno luego se me ocurrio este cambio, que en mi caso me soluciono a la parfeccion el efecto que queria conseguir.