• Couleur d'automne

    Une demande me fait publier cette page, avec le code de mon article.

    Comme j'ignore la taille qui convient à vos pages, vous pourrez modifier selon votre choix.

    Clic

     

     

     

     

     

     

    Merci: ce code ne fonctionne pas chez Vadou et il en a trouvé la raison, après avoir posé la question sur le forum.
    au lieu de voir le mot clic, dans le bouton input, il voyait une couleur bleue clair et pas de texte.
    La solution: la couleur de fond des boutons input est définie, dans mon code, dans les lignes CSS et dans la class="px" et il semble qu'il faut mettre cet attribut en lignes html, ce qui donne un code de ce genre:


    <div style="width: 80vw; height: 45vw; margin: 2vh auto; border: 0.4vh ridge white; background: url('http://ekladata.com/DGMiCkVHIzlWPt3PCJbp6DX-0vQ.jpg'); background-size: 80vw 45vw;"><input id="px1" class="px" style="background: transparent;" type="text" /><input id="px2" class="px" style="background: transparent;" type="text" /><input id="px3" class="px" style="background: transparent;" type="text" /><input id="px4" class="px" style="background: transparent;" type="text" /><input id="px5" class="px" style="background: transparent;" type="text" /><input id="px6" class="px" style="background: transparent;" type="text" /><input id="px7" class="px" style="background: transparent;" type="text" />
    <p id="px0">Clic</p>
    <p id="yx1" class="yx">&nbsp;</p>
    <p id="yx2" class="yx">&nbsp;</p>
    <p id="yx3" class="yx">&nbsp;</p>
    <p id="yx4" class="yx">&nbsp;</p>
    <p id="yx5" class="yx">&nbsp;</p>
    <p id="yx6" class="yx">&nbsp;</p>
    </div>
    <style><!--
    .px{position:absolute; width:80vw; height:45vw; border:none;}
    #px1{z-index:5;}
    #px2,#px3,#px4,#px5,#px6{z-index:1;}
    #px0{position:absolute; z-index:2; width:5vw; height:3vw; background:rgba(0,0,0,0.6); text-align:center; line-height:3vw; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black;}
    .yx{position:absolute; z-index:1; width:80vw; height:45vw; transition:all 1s linear;}
    #yx1{width:0vw; height:0vw; transform:translate(0vw,0vw); background:url('http://ekladata.com/OXMXrp-uU__rk0SM_jAgankOZu0.jpg'); background-size:80vw 45vw;}
    #yx2{width:0vw; height:0vw; transform:translate(80vw,45vw); background:url('http://ekladata.com/mejANCP53wN8syVlPEuJZFpEuGA.jpg'); background-size:80vw 45vw;}
    #yx3{width:0vw; height:45vw; transform:translate(0vw,0vw); background:url('http://ekladata.com/wTzBcJ-ojz8ntub_KOS6NcjLb3k.jpg'); background-size:80vw 45vw;}
    #yx4{width:0vw; height:45vw; transform:translate(80vw,0vw); background:url('http://ekladata.com/a8MAzc_YcojCYN4TSotHczb8dI8.jpg'); background-size:80vw 45vw;}
    #yx5{width:0vw; height:0vw; transform:translate(0vw,45vw); background:url('http://ekladata.com/zQQk3YUomsSuYRmtVtyNli9XnuU.jpg'); background-size:80vw 45vw;}
    #yx6{width:0vw; height:0vw; transform:translate(80vw,0vw); background:url('http://ekladata.com/HDAuybrSstgswKonXdlO3XAv8Qg.jpg'); background-size:80vw 45vw;}

    #px1:focus ~ #px2,#px2:focus ~ #px3,#px3:focus ~ #px4,#px4:focus ~ #px5,#px5:focus ~ #px6,#px6:focus ~ #px7{z-index:10;}
    #px1:focus ~ #yx1{width:80vw; height:45vw;transform:translate(0vw,0vw);}
    #px2:focus ~ #yx2{width:80vw; height:45vw; transform:translate(0vw,0vw);}
    #px3:focus ~ #yx3{width:80vw; height:45vw; transform:translate(0vw,0vw);}
    #px4:focus ~ #yx4{width:80vw; height:45vw; transform:translate(0vw,0vw);}
    #px5:focus ~ #yx5{width:80vw; height:45vw; transform:translate(0vw,0vw);}
    #px6:focus ~ #yx6{width:80vw; height:45vw; transform:translate(0vw,0vw);}
    --></style>