Scarica l'articolo in formato PDF

Avete mai pensato di creare un testo con sfocatura al passaggio del mouse? Ho letto un interessante articolo su motyar e voglio analizzarlo con voi per la sezione Css Tricks.

L’idea è quella di concentrarsi sull’ombra creata con la proprietà text-shadow dei CSS, che è sfocata, proprio quello di cui abbiamo bisogno, così basterà rendere il testo trasparente. Quello che otterremo è proprio un Blur effect!

bluf effect

Il trucco è nel terzo parametro di text-shadow: 0px 0px 10px # 12ff22;
Utilizzando jQuery possiamo rendere il tutto più armonioso, quando ci si sposta vicino o ci si allontana testo si può apprezzare l’effetto.

Analiziamo meglio come ottenerlo:

Codice Html:

1
2

<a href="#" id="blur">Blog di Daniele Votta</a>
<a href="#" class="blur">Blur effect su testo con Jquery!</a

Codice Css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 .blur{
    display: block; 
    text-decoration: none;
    font:  100px Georgia, sans-serif;
    letter-spacing: -5px;  
    text-align: center; 
 
    /*Queste due linee sono quelle che fanno la magia!*/
    color: transparent;   
    text-shadow: 0px 0px 1px #12ff22;
}
.blur:hover{
   text-shadow: 0px 0px 10px #12ff22;
}

Codice jQuery per rendere il tutto vivo:

1
2
3
4
5
6
7
8
9
10

$(document).ready(function() {
    $(document).mousemove(function(e) {
        if(e.pageY> 230)
         $("#blur").css({'text-shadow': '0px 0px '+(( e.pageY - 230) / 18)+'px #FF33FF'})
        else
 
         $("#blur").css({'text-shadow': '0px 0px 0px #FF33FF'});
    });
 
});

Visualizza una demo da qui.
Scarica un esempio da qui.

Ti piace questo effetto? Non dimenticare di condividere l’articolo con i tuoi amici!

[adsense]