CSS: bordi effetto 'cucito'

Quello che ho scovato oggi su designzzz.com è un altro effetto fantastico da dare con il CSS.
Il foglio di stile si sta rivelando un vero e proprio alleato, se non voglio ricorrere al background ;) .
Il suo nome è 'stitched' (sarà cucito probabilmente, ma tanto quel che conta è il risultato XD ) e l'effetto che viene fuori è questo:

Se vuoi sapere come si fa ad ottenere questo effetto 'cucitura' tanto simpatico continua a leggere.

Visto che forza????????
Dunque per avere l'effetto 'cucito' nei vostri 'div' devi semplicemente copiare e incollare questo codice nel tuo foglio di stile:


.stitched {
padding: 5px 10px;
margin: 10px;
background: #dbd4ca;
color: #444;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 3px;
-moz-box-shadow: 0 0 0 4px #dbd4ca;
-webkit-box-shadow: 0 0 0 4px #dbd4ca;
box-shadow: 0 0 0 4px #dbd4ca;
}

Poi il tuo 'div' con il selettore 'class' stitched inseriscilo nel post, o nella sidebar se all'interno del gadget HTML/Javascript, semplicemente copiando e incollando il codice, e sostituendo TUO CONTENUTO con ciò che vuoi che appaia all'interno.


<div class='stitched'> TUO CONTENUTO </div>

Se il div esiste già aggiungi solo class='stiched', come da esempio qui sopra.

La prima cosa che mi è venuta in mente è che ci si potrebbe fare un menu carinissimo con questo effetto!
Intanto lo uso l'ho usato per 'incorniciare' i miei 'consigli' .
E tu che ne pensi???

Puoi usare questo stile per personalizzare il tuo blockquote!
Ti basterà inserire class='stiched' nel tag blockquote ed è fatta!

Vuoi vedere come personalizzare il tuo blockquote? Leggi il post.