Effetto di testo che scorre e appare al passaggio del cursore.

Come visualizzzare una scritta che al passaggio del cursore mostra un'altra frase che arriva dai due lati. Un effetto hover che si basa su CSS3 per evidenziare un avviso o una comunicazione.

Quello che mi accingo a scrivere è uno di quei post che un blogger non dovrebbe mai neppure pensare di pubblicare perché ha bisogno di test e di studio per poterlo confezionare ma soprattutto perché avrà pochissimo riscontro in termini di pagine visualizzate visto che le parole chiave con cui potrebbe essere cercato e trovato hanno dei volumi di ricerca modestissimi.

D'altra parte questa è la nicchia che mi sono scelto ed è quindi naturale anche se non consigliabile continuare nella stessa falsariga. Attraverso il linguaggio CSS3 si possono creare degli effetti per le immagini e per i testi che adesso sono visualizzabili su tutti i più importanti browser al contrario di qualche anno fa che non si vedevano su Internet Explorer. Dopo aver illustrato gli Effetti per Immagini con il CSS3 e il Testo con Effetto 3D vado a presentare un codice che può essere utilizzato all'interno di un post o di una pagina statica per evidenziare un avviso di particolare importanza 

Al passaggio del cursore su una scritta ne appaiono altre due che arrivano da sinistra e da destra a formare un'altra frase. Il codice utilizzato di per sé non è complicato però a seconda della lunghezza delle frasi inserite, della larghezza dell'area del post del vostro blog e della struttura stessa del vostro modello potrebbero essere necessarie delle modifiche da apportare per una perfetta resa. Si può inserire il codice in un post già pubblicato oppure in uno che pubblicheremo ex novo. Dopo aver aperto l'Editor bisogna cliccare su HTML accanto a Scrivi e andare su Opzioni in basso a destra

quindi mettere la spunta su Premi "Invio" per le interruzioni di riga. Si va quindi su Completato. Si pone il cursore nel punto in cui inserire il testo con gli effetti e si pigia un paio di volte su Invio per creare uno spazio vuoto adeguato. In tale spazio va incollato questo codice

<style>
.effetto-testo {
position: relative;
text-decoration:none ;
font-size: 22px;
font-weight: bold;
font-family: Georgia;
color: #ba2626;
}
.effetto1 {
width: 250px;
height: 25px;
top: 60px;
left: -400px;
padding: 3px 6px 3px 3px;
color: #00009a ;
background-color: #fff ;
font-size: 22px;
font-family: Georgia ;
border: none ;
overflow: hidden;
display: block;
text-align: right ;
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
}
.effetto-testo:hover .effetto1 {
visibility: visible;
opacity: 1;
top: 60px;
left: -250px;
z-index: 99;
transition: 0.9s ease-out;
-webkit-transition: 0.9s ease-out;
}
.effetto2 {
width: 250px;
height: 25px;
top: 60px;
left: 400px;
padding: 3px 3px 3px 3px;
color: #00009a ;
background-color: #fff ;
font-size: 22px;
font-family: Georgia;
border: none ;
overflow: hidden;
display: block;
text-align: left ;
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.4s ease-out;
-webkit-transition: 0.4s ease-out;
}
.effetto-testo:hover .effetto2 {
visibility: visible;
opacity: 1;
top: 60px;
left: 3px;
z-index: 99;
transition: 0.9s ease-out;
-webkit-transition: 0.9s ease-out;
}
</style>
<div style="text-align: center;">
<span class="effetto-testo">
<span class="effetto1">Scrivete solo quello</span>
Consiglio per i blogger!
<span class="effetto2"> che vi piace scrivere!</span>
</span></div>

Si deve pubblicare il post direttamente da HTML senza tornare su Scrivi. I parametri colorati di rosso possono essere modificati a piacere specie quelli dei codici dei colori e della famiglia di font. Se le due scritte laterali non coprono la scritta iniziale ma si visualizzano o sopra o sotto bisogna agire sui tre parametri top: 60px; per calcolare bene la posizione. 

Il trucco si basa sul fatto che all'inizio le due scritte sono fuori area spostate all'esterno (left: -400px; a sinistra e left: 400px; a destra). Quando il mouse passa sopra alla scritta visibile si ha l'effetto hover con una transizione di 0.9 secondi con il posizionamento proposto (left: -250px; a sinistra e left: 3px; a destra). Modificando la lunghezza delle scritte colorate di blu potrebbe essere necessario apportare dei cambiamenti alla loro larghezza (width:250px;) e eventualmente alla distanza tra le due scritte che si visualizzano al passaggio del cursore attraverso i parametri padding: 3px 6px 3px 3px; e   padding: 3px 3px 3px 3px; e dove la distanza dalla destra e quella dalla sinistra sono state colorate di viola.

Scrivete solo quello
Consiglio per i blogger!
che vi piace scrivere!

Concludo ricordando che volendo si può inserire questo codice nel modello di Blogger. Si va su Modello > Modifica HTML, si clicca sulla sezione <b:skin> intorno alla 14-esima riga per visualizzare tutto il codice quindi con Ctrl+F si cerca la riga  ]]></b:skin> e, subito sopra, si incolla il codice contenuto tra i tag <style> e </style> esclusi. Quando si vuole pubblicare un testo con questo effetto basterà incollare solo la parte finale del codice da <div …> fino a </div>.