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!
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]
25 Luglio 2011 il 17:59
Ma su IE7/IE8 non funziona.
Se usate jquerty si presuppone che sia una funzionalità crossbrowser.
Altrimenti non si usano questi framework con professionalità ma solamente per moda.
Ciao
25 Luglio 2011 il 19:35
Cosa è IE ? 🙂 Scherzo hai ragione. Potresti lamentarti con Microsoft 😉
Per quanto riguarda la questione di jQuery il problema non è di jQuery . E’ proprio la proprietà CSS3 text-shadow che è supportata in tutti i maggiori browser ad eccezione del software Microsoft. Infatti, CSS3 text-shadow su Internet Explorer non funziona, si possono applicare dei piccoli trucchi ma non danno risultati esaltanti…
Grazie dell’intervento, a presto! 🙂
27 Novembre 2011 il 17:48
Ciao, complimenti per il tutorial, interessante quello che cercavo in parte eheh :).
Solo una piccola domanda è possibile creare un effetto blur anche per una immagine PNG ? Attualmente qui si parla di text shadow ma stavo cercando di capire se è possibile applicare un effetto simile anche ad una immagine.
saluti e grazie!
27 Novembre 2011 il 18:36
Ciao, sicuramente non puoi farlo in modo cosí semplice e diretto come sul testo, perché qui appunto viene sfruttata la proprietà test shadow di css3. Magari esiste qualcosa in js per questo effetto ma sinceramente non saprei… Posso documentarmi se scopro qualcosa ti avviso 🙂
27 Novembre 2011 il 18:37
Grazie Daniele! Gentilissimo! Io sto cercando ma credo esisti qualcosa solo per HTML5….
grazie mille!