Effetti grafici su foto online: creare riflessi in modo automatico per qualsiasi immagine, regolandone anche l'opacità

Tra i vari effetti grafici possibili, ve ne segnaliamo unomolto carino e semplice da creare. Stiamo parlando delriflesso stile specchio, applicabile in pochissimi secondi aqualsiasi immagine vogliate.

Il tutto è reso possibile grazie a reflection.js(presente su cow's blog), file ultraleggero (menodi 5kb) che permette di regolare anche l'opacitàdell'immagine riflessa a vostro piacimento. Oltre a doverincludere lo script reflection.js nell'html come indicatoqui di seguito:

<script type="text/javascript" src="reflection.js"></script

Basterà aggiungere l'attributoclass="reflect" perqualsiasi immagine voi vogliate. Abbiamo tradotto emodificato per voi la suite di esempio - che potete scaricarequi- di modo che possiate avere tutti gli esempi e ladocumentazione necessaria per utilizzare questo effetto.

Immagini su sfondo colorato

I riflessi possono sfumare nel colore di fondo. Guardal'esempio

Variare l'altezza del riflesso

Utilizzando l'attributo class, è possibilemodificare l'altezza dell riflesso grafico. La primadelle immagini che vedrete utilizza un class="reflectrheight20" che mostra un riflesso pari al 20%dell'altezza dell'immagine. quella dopo utilizza poirheight60, e così via. Guarda l'esempio

Variare l'opacità

Questa volta ogni riflesso varia in opacità. Ilmeccanismo è lo stesso di cui sopra, partendo da unclass="reflect ropacity20" per avere il 20% diopacità, e così via... Guarda l'esempio

Immagine e riflesso con bordo

Agendo sullo style dell'immagine, è possibileanche allineare immagine e riflesso a nostro piacimento edaggiungervi ad esempio un bordo che comprenda sia immagineche riflesso. In questo caso abbiamo inserito il seguentecodice:

style="float: right; border: solid 5px red;"

Guarda l'esempio

Riflessi via Scripting

Un secondo modo di creare questi effetti è quello diavvalersi della funzione Reflection.add, invecedell'attributo class="reflect".

Il riflesso dovrebbe diventare più chiaro quando ilpuntatore del mouse viene posto sopra l'immagine. Ilcodice utilizzato è:

onmouseover="Reflection.add(this, { opacity: 2/3 });" onmouseout="Reflection.add(this, { opacity: 1/3 });" class="reflect ropacity33" />

e come vedete l'opacità di partenza è parial 33% . Guarda l'esempio