Effet de reflet en css3

Ce sujet est résolu
Default
,

Bonjour j'aimerai faire un reflet en css3 comme dans cette video .

4 Réponse

1
,

Ca peut faire un petite vidéo "Astuce rapide" sympa ça :)

Par contre le tuto payant à 1€ pour une ligne de CSS ça fait mal XD

Default
,

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;
            }
Default
,

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.

Default
,

Allez je vais lui acheter!