• CSS3 active

    En html3, nous avons pris l'habitude de changer nos images au survol ou au clic par des codes qui, je crois, sont du javascript, désormais limités en emploi.

    Ces changements, toujours utilisables, sont instantanés, contrairement au html5/CSS3 qui permet une transition en "douceur" paramétrable.

    En html5/CSS3: le survol reste facile à écrire: #identifiant:hover{attributs;}

    Le clic est un bricolage, trouvé par des ingénieux, qui détourne un code vers une cible en code (qui provoque un changement de page) vers un lien qui s'affiche sur la même page: #identifiant:target{....

    Une nouvelle commande: #identifiant:active{att;} provoque un changement en maintenant le clic gauche de la souris enfoncé; ce changement étant en douceur, nous pouvons l'utiliser dans certains cas comme le fait d'agrandir une zone.

    Essayons quelques exemples.

     

     

    Agrandissement au clic gauche maintenu, équivalent moins pratique du survol.
    <p id="ex1">&nbsp;</p>

    <style><!--
    #ex1{transition:all 2s linear; float:left; width:600px; height:338px; border:3 solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/05/DSCN5383.JPG'); background-size:100%; background-position:50% 50%;}
    #ex1:active{background-size:200%; background-position:50% 50%;}
    --></style>

     

     

     

     

    Clic maintenu sur le panneau, en haut de la porte.
    <div id="mont">
    <p id="ex2">&nbsp;</p>
    <p id="ex3">&nbsp;</p>
    </div>
    <style><!--
    #mont{position:relative;float:left; width:600px; height:340px; margin:10px auto;}
    #ex2{position:absolute; width:600px; height:338px; border:3px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/05/5406.JPG'); background-position:50% 50%; background-size:100% 100%; filter:grayscale(1); -webkit-filter:grayscale(1);}
    #ex3{position:absolute; transform:translate(128px,140px); transition:all 1s linear; width:100px; height:55px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/05/5406.JPG'); background-position:25% 50%; background-size:600% 600%;}
    #ex3:active{background-size:1000% 1000%; width:400px; height:250px; transform:translate(50px,50px);}
    --></style>
    ..

     

    Et un exemple avec une animation en maintenant le clic gauche sur le bandeau, au dessus de la fenêtre, sur la porte en bois, sur la fenêtre au dessus de la voûte et sur la porte verte, dans le fond.