Effet de reflet en css3

Un peu de recherche sur google ne fait pas de mal :p

Voila ce que j'ai put trouver en fouillant un peu. Je t'ai fait un exemple avec deux div ayant deux reflets différents pour voir un peu comment ça marche.

HTML:

<div id='reflet' >
        <p>AAAA</p>
      </div>

    <div id='reflet2' >
        <p>AAAA</p>
    </div>

CSS3:

#reflet{ 
    float:left; 
    width:400px; height:200px; background-color:blue; border:1px solid red;
    -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
    }

        #reflet2{
            float:left; margin-left:50px;
            width:300px; height:200px; background-color:lightgrey; 
                -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
            -webkit-border-radius: 3px;
            border-radius: 3px;
            border: 3px solid #666;
            }

Ouaip carrément.

Pour le tuto payant, faut bien que monsieur SimpleDev se fasse un peu d'argent. Il fait tellement de tuto interresant que je lui en veut pas.

Allez je vais lui acheter!