1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

quotesimagen de Dia™

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

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

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Juan Pablo Juan Pablo

    Buena! Se ve de lo más elegante.

  2. Avatar de Germán Germán

    Gracias JP!

  3. Avatar de arturogoga arturogoga

    Perfecto! Justo lo que necesitaba. Gracias!

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910