Orthorexique 3

Nous avons vu le principe des attributs en html, à écrire dans le code source (<>); voyons à ajouter un peu de lignes CSS, qui vont nous permettre de modifier les attributs affectés à un élément, en le survolant, par exemple.

Nous allons donner un nom à l'élément concerné et déterminer ses attributs en lignes CSS; ces lignes CSS seront écrites entre:

<style><!--

et

--></style>

Toujours la symétrie des balises.

<p id="ex1">exemple</p>

<style><!--

#ex1{width:400px; height:200px; border:5px solid black; box-shadow:4px 4px 8px black;}

 --></style>

donnera:

exemple

Ce qui revient au même qu'écrire les attributs en html mais, nous allons ajouter une ligne pour que le paragraphe change d'attributs au survol et paramétrer en quelle vitesse.

Le principe est d'écrire l'attribut à modifier en ligne de départ pour que le programme le connaisse et le modifie au survol.

<p id="ex2">exemple</p>

<style><!--

#ex2{width:400px; height:200px; border:5px solid black; box-shadow:4px 4px 8px black; transition:all 1s linear;}

#ex2:hover{width:450px; height:220px; border:8px ridge yellow; box-shadow:6px 6px 8px yellow; }

 --></style>

ce qui donnera au survol:

exemple

Dans l'écriture ci-dessus, chaque attribut évolue à la même vitesse car la transition concerne tout les attributs: all.

Nous pouvons modifier chaque attribut individuellement en modifiant sa vitesse et le retard par rapport au moment du survol.

<p id="ex3">exemple</p>

<style><!--

#ex3{width:400px; height:200px; border:5px solid black; background:pink; box-shadow:4px 4px 8px black; border-radius:0%; text-align:center; transition:width 1s linear 0s, height 1s linear 1s, border 1s linear 2s,background 1s linear 3s, box-shadow 1s linear 4s, border-radius 1s linear 5s;}

#ex3:hover{width:450px; height:220px; border:8px ridge yellow; background:lime; box-shadow:6px 6px 8px red; border-radius:50%;}

 --></style>

ce qui donnera au survol:

exemple