Cómo adornar las citas de blockquotes
En 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.
Minoic.net es un anillo de blogs impulsado desde enero de 2007 por Guillermo Carvajal, Antonio Cambronero, Manuel Almeida y José Luis Orihuela para experimentar nuevas formas de sinergia entre weblogs más allá de los blogs grupales y de las redes comerciales.
November 11th, 2005 a las 3:48 pm
Pero mejor con comillas latinas que con las sajonos ¿no?
Comillas tipográficas con CSS.
November 11th, 2005 a las 3:54 pm
ya está puesto. yo le he añadido un suave backgroud-color.
November 11th, 2005 a las 3:54 pm
Lo acabo de incluir en mi código, muchas gracias!
November 11th, 2005 a las 4:36 pm
Muchas gracias tio! Me estaba preguntando como hacer para que no se repita y sin idea de css pues… que me has ayudado gracias!
November 11th, 2005 a las 5:12 pm
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.
November 11th, 2005 a las 9:59 pm
Genial! Hasta lo he entendido yo. Y ahora me pregunto ¿¿¿por qué los diseñadores que contrato no me proponen cosas así???
November 12th, 2005 a las 10:50 am
Contrata a Antonio, Gemma !
November 12th, 2005 a las 2:26 pm
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 
November 12th, 2005 a las 3:28 pm
Antonio, no bromees con esas cosas que seguro que alguien se lo cree
November 12th, 2005 a las 10:37 pm
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
November 13th, 2005 a las 1:11 am
Cyberfrancis, lo hago con el programa Snapz Pro X.
November 14th, 2005 a las 11:50 am
Admitir, admitirá las dos, pero como las comillas latinas, no hay ningunas.
November 18th, 2005 a las 10:57 pm
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
February 5th, 2006 a las 1:03 pm
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.
July 20th, 2006 a las 2:31 pm
Gracias, ya las he añadido
September 5th, 2006 a las 12:38 pm
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……
May 9th, 2007 a las 5:57 pm
[...] Cómo adornar las citas de blockquotes [...]