Cómo adornar las citas de blockquotes

Por Antonio Cambronero el 11/11/05, a las 11:11:05 am, en Css, tips

adornar sus citasEn muchos weblogs se adornan los comentarios o citas con una imágen de unas dobles comillas de apertura. En blogpocket hemos añadido esta opción y les contamos cómo lo hemos hecho.

En primer lugar tenemos que tener una imagen, un pequeño gif con las dobles comillas, como ésta.

El código html, correspondiente a los comentarios que queramos resaltar, lo enmarcaremos entre las etiquetas <blockquote> y </blockquote>.

Añadiremos a la hoja de estilos CSS las siguientes líneas:

blockquote {
background: url(http://www.misitio.com/comillas.gif) no-repeat 0 3px;
color: #666;
padding-left: 20px;
font-style: italic;
margin-bottom: 1px;
display:block;
padding-top:5px;
}

En “url” se debe poner el enlace a la imagen con las dobles comillas. “Color” y “font-style” definen el tipo de letra. “Padding-left” sirve para anidar hacia la derecha el texto, “margin-bottom” para separar el texto por el borde inferior y “padding-top” para desplazar el texto un poco hacia abajo.

Un sencillo tip que mejorará el aspecto de sus weblogs.

También puedes leer:

Si te ha gustado el post, no olvides suscribirte a nuestro feed RSS





17 Comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Pero mejor con comillas latinas que con las sajonos ¿no?
    Comillas tipográficas con CSS.

    Comentario por manuti — November 11, 2005 #

  2. ya está puesto. yo le he añadido un suave backgroud-color.

    Comentario por kirai — November 11, 2005 #

  3. Lo acabo de incluir en mi código, muchas gracias!

    Comentario por Javier Muñoz — November 11, 2005 #

  4. Muchas gracias tio! Me estaba preguntando como hacer para que no se repita y sin idea de css pues… que me has ayudado gracias!

    Comentario por NK — November 11, 2005 #

  5. Reverencias, Antonio.
    A lo mejor ya lo has visto, pero por si acaso: se te duplican las imágenes que apuntan a los tags flickr, technorati, etc.
    Un saludo.

    Comentario por Juglar — November 11, 2005 #

  6. Genial! Hasta lo he entendido yo. Y ahora me pregunto ¿¿¿por qué los diseñadores que contrato no me proponen cosas así???

    Comentario por Gemma Ferreres — November 11, 2005 #

  7. Contrata a Antonio, Gemma !

    Comentario por mg ; ) — November 12, 2005 #

  8. Manuti: si no estoy equivocado la RAE admite las dos.

    Kirai, Javier, NK, Juglar: gracias.

    Gemma: a menudo lo sencillo es lo mejor.

    Mariano: ni de coña ;) Gemma es una maltratadora laboral ;)

    Comentario por blogpocket — November 12, 2005 #

  9. Antonio, no bromees con esas cosas que seguro que alguien se lo cree :P

    Comentario por Gemma Ferreres — November 12, 2005 #

  10. Por llevar la contraria, aunque dentro del diseño, las imágenes que pones con el borde redondeado, ¿las realizas manualmente en photoshop o hay alguna manera automática de insertar imágenes y que te de el sombreado y las esquinas redondas mediante css?

    Es que me acaba de llamar la atención :D

    Comentario por cyberfrancis — November 12, 2005 #

  11. Cyberfrancis, lo hago con el programa Snapz Pro X.

    Comentario por blogpocket — November 13, 2005 #

  12. Admitir, admitirá las dos, pero como las comillas latinas, no hay ningunas.

    Comentario por manuti — November 14, 2005 #

  13. Ale, ya le he puesto las comillas también a mi blog.

    Andaba tiempo queriendo ponerlas, me faltaba el empujón de verlo fácil en algún sitio, gracias ;)

    Comentario por Raúl — November 18, 2005 #

  14. Hace tiempo que lo implementé en mi bitácora, días atrás también en los estilos nauscópicos de GreatNews RSS Reader (así lo añade si el RSS lo utiliza, aunque originalmente no se visualice). Es más, tenía pensado escribir una anotación al respecto, mas creo que es mejor enriquecer la tuya:

    blockquote {
    border: 1px outset #FFFFFF;
    margin: 16px 32px 24px 32px;
    padding: 7px 12px;
    background: #F7F7F7;
    color: #3A374A;
    font: 100%/1.5em ‘Trebuchet MS’, Arial, Sans-serif;
    letter-spacing: .03em;
    -moz-border-radius: 7px;
    }

    -moz sólo lo interpretan los navegadores con motor Gecko: Firefox, K-Meleon, SeaMonkey… Redondea las esquinas. IE, Opera y otros simplemente la ignoran.

    Para verlo, en esta anotación mía: http://nauscopio.coolfreepages.com/nauscopio_old_z/nauscopio_zP.htm#GREATNEWS-ESTILOS-NAUSCOPICOS-REVISION

    También estoy incorporando otros “quote” utilizado en algunos foros, como los de Curiostudio. En unos días, antes he de subir mi traducción del K-MeleonCCF Nauscópico.

    Comentario por maty — February 5, 2006 #

  15. Gracias, ya las he añadido :)

    Comentario por CaDs — July 20, 2006 #

  16. Los mejores textos sobre CSS y estándares web en castellano…

    Uno de las obsesiones de Sentido Web es que la mayoría de la información se encuentra en inglés. A raíz de esta lista, hemos realizado, junto a José Luis Antúnez, esta selección de los que consideramos los mejores artículos sobre……

    Trackback por Sentido Web — September 5, 2006 #

  17. [...] Cómo adornar las citas de blockquotes [...]

    Pingback por Los mejores textos sobre CSS y estándares web en castellano « Disenia — May 9, 2007 #

Dejar un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tanto el autor de este blog, Antonio Cambronero, como sus cobloguers, hacen devolución expresa del contenido de sus posts al Dominio Público
CMS: WordPress - Tema basado en GimpStyle diseñado por Horacio Bella - Hosting: Ferca Network
Recibir las actualizaciones por correo-e
Feeds de Entradas y Comentarios
Política de privacidad