• CSS partie 4

    Nous pouvons commander les attributs à modifier en bloc ou individuellement: exemple:

    un cadre  de 200px de large, 200px de haut, à fond jaune, à bordure de 2 px noire...passera au survol et en bloc à

    largeur:40px; hauteur:400px; fond:rose; bordure:4px double rouge.

    si nous écrivons:

    <p id="ex1">&nbsp;</p>

    <style><!--

    #ex1{ width:200px; height:200px; background:yellow; border:2px solid black; transition:all 1s linear;}

    #ex1:hover{width:400px; height:400px; background:pink; border:4px double red; transition:all 1s linear;}

    --></style>

     

    Nous pouvons commander chaque attribut individuellement et faire varier les attributs à la suite les uns des autres, avec une transition différente; cependant, faire varier la taille de la police doit se faire en fonction de l'agrandissement du cadre.

    <p id="ex2">&nbsp;</p>

    <style><!--
    #ex2{transition:width 1s linear 0s, height 2s linear 1s, line-height 1s linear 1s, font-size 1s linear 1s, background 1s linear 2s, border 1s linear 3s, box-shadow 1s linear 4s, border-radius 1s linear 5s; width:200px; height:200px; background:yellow; border:2px solid black; line-height:200px; text-align:center; font-size:14pt; border-radius:0%;}
    #ex2:hover{width:400px; height:400px;  line-height:400px; font-size:25pt; background:pink; border:4px double red;  box-shadow:inset -4px -4px 10px black, inset 4px 4px 10px white; border-radius:50%;}
    --></style>

    Exemple 2