disign.it | CSS: formattare i blockquote | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 3.324 visualizzazioni

CSS: formattare i blockquote

04/01/2012

Un 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;
]

← IE textarea scrollbar CSS: bordo trasparente interno →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.