Comillas con estilo (CSS)
3 seguidores
Aunque lo he visto en muchos sitios, nunca se me ha ocurrido pensar en cómo está hecho hasta hoy que necesito hacerlo, la intención es crear un bloque de texto entrecomillado pero las comillas son diferentes al texto.
Bueno una imagen vale más que 1000 palabras:
He estado dandole vueltas pero no encuentro la forma de hacerlo sin tener que agregar al menos una imagen con la comilla de cierre en el fuente html.
¿Se puede hacer sólo usando la hoja de estilos?
jfm77
mambrú
Si, es una de las soluciones que había barajado, preferiría que las comillas no fueran imagenes, aunque al final va a ser la solución menos mala.
En fín, creo que al final optaré por matar al diseñador...
Usuario desconocido
Mmmm, vale, acabo de ver que ponías un link a la solución que yo te doy. Jeje, ha sido cuestión de segundos.
Usuario desconocido
Bueno, más fácil y sin recurrir a ningún span.
Puedes con esto, trabajando sobre blockquote y blockquote:first-letter (funciona en IE76):
blockquote{
width:300px;
font: 20px Arial, Helvetica, sans-serif;
background: url(http://www.ciudadela.es/cream/ciudadela/comillas.gif) no-repeat right bottom;
padding-right: 40px;
padding-bottom: 40px;}
blockquote:first-letter {
font: 60px Arial, Helvetica, sans-serif;
display:block;
float:left;
padding-left:40px;
background: url(http://d4nt3.files.wordpress.com/2007/03/comillas.jpg) no-repeat left top;
}
joshuatree
Quieto parao! El span se usa en los párrafos dentro del blockquote para dar el pego con la imagen de abajo. Pero sí, coincido contigo, diseño aparte, hay tal cantidad de clases e IDs por ahí que para una simple cita tienes que meter tags a granel... No sabía que te habías puesto tan fisno! XD
jfm77
ponchi
Si, eso está hecho y es una de las cosas que he probado, incluso aumentando el tamaño solo de las comillas.
joshuatree
Ya, vale, pero es lo que dices, primero un blockquote (vale bien correcto) luego un párrafo (si vale, puede ser una cita de varios parrafos) y luego ¿un span?¿para qué?, viva la web semántica! (además en todo caso debería ser: blockquote, span, p).
Se está ligando el diseño y el contenido que es precisamente lo que quiero evitar, que si posteriormente alguien quiere meter otro bloque igual no tenga que acordarse que tiene que meter span para apertura de comillas y otro para cierre.
Y no soy perraco (bueno si), he estado buscando soluciones por la wueb y bueno me quedo con estos dos cortesía de Jormaikel:
Desgraciadamente mas o menos, todos coinciden en la forma de hacerlo y no me convence... :P
joshuatree
Mira lo que te he encontrado, shavá:
http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
Una vez allí, he ido al punto 5. Pull Quotes
Y me he detenido en el ejemplo de Digital web, el del recuadro redondeado con las comillas en gris como fondo.
Me he ido a cotillearlo a su web con Firebug (cosa que deberías usar más, perraca...)
http://www.digital-web.com/articles/why_do_web_startups_die/
Y voila! Usa dos estilos, uno que pinta las tags <blockquote> con una imagen de fondo de las comillas de arriba a la izquierda, y un span que pinta la img de la comilla inferior derecha.
Échale un vistazo!</blockquote>
ponchi
Puedes probar con cambiar las comillas por sus correspondiente carateres html & ldquo ; para abrir y & rdquo ; (los espacios después del & y antes del ; no lo he dejado para que no aparezcan las comillas pero no los debes dejar) para cerrar y el tamaño ajustarlo con un span class en CSS