Qué bien quedan esos blockquote que tienen unas grandes comillas tipográficas al comienzo y al final ¿verdad? Existen muchos métodos para conseguirlas pero el escaso soporte para CSS 2.1 de Internet Explorer 6 las hace caer en el ámbito de lo que pudo ser y no fue, al menos durante los años que tardemos en sacárnoslo de encima.
Otras soluciones pasan por utilizar Javascript o trucos con imágenes posicionadas absolutamente, nada especialmente aconsejable.
Hoy he descubierto, gracias a Natalie Downe, que, en realidad, conseguir unos blockquote con estilo es tan simple como sacar ventaja de nuestros amados estándares y las hojas de estilo en cascada.
Me explico: para que un blockquote sea válido tiene que tener la siguiente estructura:
Esto es el contenido de un blockquote, rodeado de sus etiquetas p, como dios manda
Supongo que ya vais viendo por donde voy. Para la imagen de la izquierda que abre las comillas simplemente tendremos que dar estilo a la etiqueta blockquote como sigue:
text-indent: 25px;
background: url(quotes1.png);
background-position: 0 2px;
background-repeat: no-repeat;
}
Conseguir la imagen que cierra las comillas es tan simple como dar estilo a toda etiqueta p contenida por un blockquote:
display: inline;
margin: 0;
padding-right: 24px;
background: url(quotes2.png);
background-position: bottom right;
background-repeat: no-repeat;
}
Simple y limpio.
Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades
[...] Ver la totalidad del articulo en: Web Master Libre [...]
[...] Comillas con imágenes para p y blockquote Entradas posiblemente relacionadas: [...]
[...] Comillas con imágenes para los blockquote Rápido y sencillo. [demo] [...]
[...] Comillas con imágenes para los blockquote Rápido y sencillo. [demo] [...]
[...] Comillas con imágenes para p y blockquote [...]
Feed RSS de los comentarios de este post.
Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna
La solución parece interesante pero tiene un problema.
Muchas veces adentro de la etiqueta
existe alguna forma de ponerle dos fondos a la misma class?
Podrías probar a dar estilo a las cosas al reves, me explico:
Para la comilla de apertura damos estilo a p:first-child y para la comilla de cierre a la etiqueta blockquote. NO se verá bien en IE6 pero si en el resto de navegadores.