CSS: formattare i blockquote
04/01/2012Un elegante sistema di formattazione dei testi inseriti in blockquotes attraverso l'utilizzo di tecniche CSS che assemblano la visualizzazione di una spessa ma non fastidiosa linea grigia e l'utillizzo di grandi virgolette a segnalare l'inzio del bloocco, il tutto con sfondo grigio chiaro, con un effetto di standarizzazione del visual che riprende diverse modalità di rappresentazione classiche dei diversi browser.
Ecco il codice (sostituire le parentesi quadre con le parentesi graffe):
blockquote [
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "\201C""\201D""\2018""\2019";
]
blockquote: before [
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
]
blockquote p [
display: inline;
]