Guida Riflesso in PHP & CSS

[Antox C.]

E’ possibile creare un effetto riflesso solo con HTML e CSS? Questo esperimento è partita dalla domanda appena posta.

L’esperimento si basa su un funzionamento apparentemente semplice, per poter ribaltare un’immagine occorre pensare l’immagine come un insieme di linee orizzontali o verticali. Immaginate di prendere una foto, tagliatela in tante strisce di un 1cm, ora partendo dal basso prendete la striscia ponendola in alto ribaltata, ripetete il procedimento con tutte le strisce fino ad ottenere una copia identica della foto questa volta riflessa.

In PHP bastano poche righe di codice, occorre un ciclo for con un contatore e i dati di altezza e larghezza dell’immagine.

$width = "291";
02.
$height = "356";
03.
$img = "linux.gif";
04.
$grado = "0.6";
05.

06.
for($a=$height;$a>=0;$a--){
07.
$calc_tmp = $height-$a;
08.
if($grado !== ""){
09.
$opacity = $grado-($calc_tmp/$height);
10.
}
11.
else{
12.
$opacity = "1";
13.
}
14.
echo "<div style=\"width:".$width."px;height:1px;background:url(".$img.") 0px -".$a."px;opacity:".$opacity.";filter: alpha(opacity = ".ceil(($opacity*100)).");\"></div>";
15.
}

Non è finita qui, ho reso più complesso lo script inserendo anche una progressiva sfumatura che rende l’effetto più realistico.

Ecco la spiegazione delle variabili

$width = "291"; // larghezza immagine
2.
$height = "356"; // altezza immagine
3.
$img = "linux.gif"; // url immagine
4.
$grado = "0.6"; // opacità di partenza, lasciare vuoto per disabilitare la sfumatura

Il consiglio è quello di vedere la demo e se interessati al sorgente completo scaricare l’esempio.

|

Perfavore, Entra oppure Registrati per vedere i Link!

|

Perfavore, Entra oppure Registrati per vedere i Link!

|​

Fonte: Matrixteo.net

 

[Lucky Blue]

Che bello l'effetto. *-*
Complimenti, ottima guida, Sargon.

 

[Antox C.]

Che bello l'effetto. *-*
Complimenti, ottima guida, Sargon.

Già, un effetto stupendo, ed anche semplice da realizzare.

 

[Fail]

Bello,davvero bello.

Complimenti al creatore ^^

 

[Antox C.]

Ecco la prova del suo vero funzionamento.

Uppato sul mio sito di prove

Perfavore, Entra oppure Registrati per vedere i Link!

PS: non è spam, quel sito l'ho uso solo per le prove.

 

[Mascara4ever]

Il sito non va sistema... Per il resto Ottimo effetto! Brava Sargona!

 

[Antox C.]

Ok, ora il sito va! Grazie Masca della segnalazione!