Oggi vogliamo spiegarvi come creare, modificare e personalizzare il tag blockquote attraverso l’utilizzo dei css, senza dover usare immagini esterne , ma solo con delle regole ben formate e semplici da applicare.

Il codice in questione è veramente molto semplice, basterà includerlo nel foglio di stile che state creando o direttamente nel HTML con i Tag <STYLE>.

blockquote {
margin: 40px;
padding: 10px;
background-color: #FFF;
quotes: “201C” “201D”;
border-left:2px solid #3C78A7;
border-right:2px solid #3C78A7;
}
blockquote:before { content: open-quote; font-weight: bold; font-size:4em;}
blockquote:after { content: close-quote; font-weight: bold; font-size:4em;}

La parte più importante è quotes: “201C” “201D” infatti grazie a questa istruzione il browser individua i doppi apici, renderizzandoli a video, dove 201C rappresentano gli apici aperti e di conseguenza quelli chiusi 201D , il risultato è osservabile direttamente dalle blockquote che contendono il codice appena commentato.

Vuoi tutti gli aggiornamenti di IbA's Blog in tempo reale? Abbonati ai nostri Feed RSS.