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.
También puedes leer:
noviembre 11th, 2005 a las 3:48 pm
Pero mejor con comillas latinas que con las sajonos ¿no?
Comillas tipográficas con CSS.
noviembre 11th, 2005 a las 3:54 pm
ya está puesto. yo le he añadido un suave backgroud-color.
noviembre 11th, 2005 a las 3:54 pm
Lo acabo de incluir en mi código, muchas gracias!
noviembre 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!
noviembre 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.
noviembre 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í???
noviembre 12th, 2005 a las 10:50 am
Contrata a Antonio, Gemma !
noviembre 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 
noviembre 12th, 2005 a las 3:28 pm
Antonio, no bromees con esas cosas que seguro que alguien se lo cree
noviembre 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
noviembre 13th, 2005 a las 1:11 am
Cyberfrancis, lo hago con el programa Snapz Pro X.
noviembre 14th, 2005 a las 11:50 am
Admitir, admitirá las dos, pero como las comillas latinas, no hay ningunas.
noviembre 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
febrero 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.
julio 20th, 2006 a las 2:31 pm
Gracias, ya las he añadido
septiembre 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……
mayo 9th, 2007 a las 5:57 pm
[...] Cómo adornar las citas de blockquotes [...]