Effetto Blinking Bulb per le citazioni o i codici.

Come usare l'effetto Blinking Bulb per mostrare un contenitore con una lampada spenta che si accende al passaggio del mouse. Tale effetto può essere utilizzato in tutte le piattaforme e pagine web.

Riprendo in questo post il tema della personalizzazione delle citazioni già più volte affrontato. Non occorre usare il tag <blockquote> per creare un contenitore in cui evidenziare del testo o del codice. Basta creare una classe di stile adeguata alle nostre esigenze estetiche. Questo metodo può essere utilmente usato per esempio nei siti che postano del codice per renderlo più evidente. Si possono cioè creare dei CSS personalizzati come del resto ci sono anche in questo blog.

La cosa può essere generalizzata e questo metodo può essere usato non solo nei già citati blog letterari ma in qualsiasi sito in cui ci sia l'esigenza di mostrare in modo originale un contenitore. Navigando in rete mi sono imbattuto nell'effetto Blinking Bulb che mostra un testo in un contenitore con una lampada spenta che si accende al passaggio del cursore con la modifica dei colori e con la generazione di ombre. Non sono riuscito a capire chi sia stato il primo autore di questo effetto, posso solo dire che le immagini di sfondo le ho prese dal blog indonesiano Indonesia Angklung.

Come sempre in questi casi si può inserire il CSS nel modello per poi riprendere la classe di stile nel post oppure incollare tutto in una pagina in Modalità HTML. Vediamo come procedere nel primo caso. Dopo aver salvato il template si va su Modifica HTML e si cerca con Ctrl+F la riga ]]></b:skin>. Subito sopra si incolla il seguente codice

.citazione {
overflow:auto;width:508px;height:198px;
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/s535/spenta.png) repeat-y top left;
border : 1px solid #000;
border-left:10px solid #bbb;
-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition-duration:all .4s ease-in-out;transition:all .4s ease-in-out; -webkit-border-radius:3px;-moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px 20px;
}
.citazione:hover{
background : #000 url(https://lh6.googleusercontent.com/-E24q7RpHbiE/Uo4NyIUzwjI/AAAAAAAAk_I/GwVeszH6Gj0/s535/accesa.png) repeat-y top left;
color:#fcec39;
border : 1px solid #111;
border-left:10px solid #bbb;
-webkit-box-shadow: 0px 0px 50px  rgba(0, 0, 0, .4);
-moz-box-shadow: 0px 0px 50px  rgba(0, 0, 0, .4);
box-shadow: 0px 0px 5px  rgba(0, 0, 0, .4);
box-shadow: 5px 5px 3px #666;
}

Si salva il modello. Il risultato sarà il seguente

Quando si vorrà creare una citazione particolare basterà incollare in modalità HTML in un post o in una pagina statica un codice che abbia questa struttura

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

Se si volesse usare per postare del codice è meglio eliminare la riga evidenziata di giallo che giustifica il testo. Si può decidere di incollare tutto il codice nel post e non nel template con questa modalità

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

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. Donec vehicula lectus sed lorem gravida, eu aliquam ligula varius. Phasellus tincidunt lacus metus, vitae auctor metus viverra in. Sed mattis at odio sit amet hendrerit. Sed non luctus lectus, sit amet aliquet augue. Pellentesque commodo lectus eget massa accumsan commodo. Aliquam vel diam non nibh elementum porta sit amet non massa. Phasellus at nulla nisl. Praesent molestie rhoncus nibh, et auctor dolor interdum vel. Praesent ac porttitor urna.

I parametri in rosso possono essere modificati ricordando comunque che ci sono dei vincoli dati dalla dimensione delle immagini che possono anche essere sostituite o modificate.