Come mostrare le citazioni con un effetto speciale

Come creare un CSS con stile personale e effetti per le citazioni per renderle più evidenti e interessanti

Riprendo brevemente il tema degli stili personalizzati, per mostrare come si possano pubblicare citazioni con effetti speciali. La creazione di CSS personali è importante in un sito per renderlo unico anche come aspetto.

Si possono creare stili personali per pubblicare del codice oppure per mettere in evidenza un paragrafo. Lo si può fare in una singola pagina oppure si può inserire il CSS nel Tema per richiamarlo con il nome della classe.

Un esempio di personalizzazione degli stili che uso spesso anche io è quello delle Intestazioni. Si possono però creare CSS personali pure per le tabelle e per gli elenchi.

Un CSS presente di default in tutti i Temi di Blogger è quello della citazione che si può inserire tramite il tag <blockquote>. Si può personalizzare pure questo aspetto del modello, anche se non lo consiglio, perché il tag <blockquote> ha pure altre funzioni, almeno nei vecchi temi di Blogger.

In un precedente articolo mi sono occupato di come rendere più accattivanti le citazioni nei blog letterari. Anche il quel post però si trattava di inserire un CSS che andava a modificare lo stile del blockquote.

In questo articolo invece vedremo come creare uno stile personale molto originale per inserire delle citazioni a prescindere dal tag blockquote di cui non viene modificata la regola.

Nel primo screenshot viene mostrata la citazione in condizioni normali mentre nella seconda è l'aspetto che prende quando ci si passa sopra con il cursore. In sostanza il testo viene illuminato.

Questa regola CSS può essere aggiunta nel modello oppure inserita in un solo post come farò anch'io in questo.

CSS DELLA CITAZIONE NEL MODELLO

Si va su Tema -> Modifica HTML e con Ctrl+F si cerca la riga ]]></b:skin>.  Se non fosse visibile, si clicca sulla freccetta nera a sinistra della sezione <b:skin>. Subito sopra a tale riga si incolla il seguente codice

.citazione {
overflow:auto;
width:350px;
height:120px;
font-family: Georgia;
color:#bcbbb4;
text-align:justify;
margin : 15px 35px 15px 15px;
padding : 10px 20px 10px 25px;
clear : both;
list-style-type : none;
background : #111 url(https://lh5.googleusercontent.com/-rsh0xqxRIBc/Uo4N0wNvigI/AAAAAAAAk_Q/2JEK0fCzptc/s378/spenta.png) no-repeat top left;
border : 1px solid #000;
border-left:6px solid #bbb;
transition:all .4s ease-in-out;
border-radius: 23px 20px 20px 20px;
}
.citazione:hover{
background : #000 url(https://lh6.googleusercontent.com/-E24q7RpHbiE/Uo4NyIUzwjI/AAAAAAAAk_I/GwVeszH6Gj0/s378/accesa.png) no-repeat top left;
color:#fcec39;
border : 1px solid #111;
border-left:6px solid #bbb;
box-shadow: 5px 5px 3px #666;
}

quindi si salva il template. Per mostrare una citazione con questo stile, basterà incollare in modalità HTML in un post o in una pagina statica un codice con questa struttura

<div class="citazione">
Testo della citazione
</div>

COME INSERIRE LA CITAZIONE IN UN SINGOLO POST

Per mostrare tale regola in un solo post senza quindi toccare il modello, si deve incollare in Modalità HTML in un articolo o in una pagina statica, un codice con questa sintassi

<style>
codice citazione
</style>
<div class="citazione">
Testo della citazione
</div>

dove al posto di codice citazione si incolla il primo codice. Le dimensioni del contenitore sono settate in funzione di quelle della immagine. Se ci fosse da inserire un testo molto lungo, si visualizzerà  automaticamente un cursore sulla destra per scorrerlo tutto.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consequat feugiat nisl at tempus. Praesent in elementum magna. Nam aliquet vulputate est, ultricies aliquam nulla consequat sed. Maecenas fringilla consectetur lorem eget vulputate. Duis at felis nunc.

I parametri colorati possono essere modificati a piacere (codice dei colori, famiglia di font, margini, stile dei bordi, ombreggiatura e arrotondamento). Si possono cambiare anche gli URL delle due immagini sostituendoli con quelli di altre. La larghezza delle immagini è di 378 pixel e viene definita dalla stringa s378, per aumentarla o diminuirla basterà aumentare o diminuire il valore 378.