Blockquote

Escrito por J.F. el Martes, 26 de Junio del 2007 a las 16:18

Comencemos pues con el primer código para diseñar páginas web. En éste caso voy a hablar de algo enfocado para principiantes, la personalización de la presentación de citas con Blobkquote. Blockquote es la etiqueta utilizada en HTML para señalar el uso de citas. Cuando comencé en ésto de los blogs, me llamaba la atención por el buen diseño estético, el uso de unas comillas grandes como imágenes cuando se utilizaba la etiqueta Blockquote. Así pues me puse a investigar el código CSS usado en diferentes páginas, y me quedé con éstos 2 diseños, mis favoritos:

Éste es un ejemplo de blockquote, las comillas provienen de una imagen, puedes utilizar diferentes imágenes para ello. Si te gustan las aquí usadas puedes descargar éste modelo en varios colores desde aquí.

Vemos el código CSS utilizado:

TEXTO PLANO

CSS:

1. blockquote
2. {
3. color: #666666;
4. margin-left: 20px;
5. display: block;
6. margin-right: 20px;
7. font-size: 90%;
8. font-family: Verdana,Arial,Helvetica,sans-serif;
9. line-height: 140%;
10. background-color: transparent;
11. background-image: url(comllas.gif);
12. background-repeat: no-repeat;
13. background-attachment: scroll;
14. padding-top: 2px;
15. padding-right: 20px;
16. padding-bottom: 4px;
17. padding-left: 40px;
18. }

En la línea 11 podemos observar la llamada a la imagen, donde podemos poner la que deseemos. El resto de parámetros como fuente, color de ésta, márgenes pueden ser facilmente cambiados. Habiendo incluido éste código en nuestra hoja de estilos, para hacer uso de él tan solamente deberemos escribir lo siguiente:

TEXTO PLANO

HTML:

1. <blockquote> Aquí la cita</blockquote>

La otra forma de representar citas mediante CSS también es muy elegante, y el código CSS utilizado es aún más simple que el anterior. Veamos como queda ésta otra forma:

Otra forma de representar citas, muy elegante y utilizado por mucha gente. En éste caso no hemos hecho uso de imágenes.

El código CSS para ésta otra forma sería el siguiente:

TEXTO PLANO

CSS:

1. blockquote {
2. margin: 15px 30px 0 10px;
3. padding-left: 20px;
4. border-left: 5px solid #ddd;
5. }

Puedes utilizar cualquiera de éstos 2 ejemplos, o modificarlos y adaptarlos a tu gusto. También puedes crear uno diferente si no te gusta, es cuestión de gustos y echarle imaginación.

Categoria: CSS

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>