disign | CSS: formattare i blockquote | a digital sign for a best design!
A digital sign for a best design

Articolo stampato da http://disign.improntedigitali.it/css-formattare-i-blockquote-305-3-1.html

© Luca Frassineti

Css tips and tricks 4.949 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;
]

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 




Questo sito è totalmente privo di pubblicità, se volete sostenere questa inziativa, potete scegliere di fare una piccola donazione libera:



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