• Bases CSS.1

    Nous avons vu qu'en html, nous définissions la forme d'un élément en écrivant, par exemple: les attributs anglais sont traduits ici en français, pour la compréhension:width=largeur; height:hauteur; border...: bordure...;

    <div style="largeur:100px; hauteur:100px; bordure:1px continue noire;...">&nbsp;</div>

    alors qu'en CSS, nous donnons un nom à cet élément et nous écrivions sa forme ainsi:Remarque: id="" est plutôt appliqué à un élément particulier alors que class="" est plutôt destiné à un ensemble d'éléments identiques.

    <div id="c1">&nbsp;</div>

    <style><!--

    #c1{largeur:100px; hauteur:100px; bordure:1px continue noire;...}

    --></style>

    Quel intérêt, me direz-vous ? Effectivement, pour un seul élément, aucun, sans animation mais imaginons que vous publiez plusieurs photos, identifiées toutes en C1; si vous voulez changer la largeur de toutes les photos, au lieu de revenir sur la largeur de chacune, en html, en CSS, il vous suffira de dire: l'élément C1 n'a plus une largeur de 100px mais de 150px et, d'un coup, toutes les photos vont passer à 150px de largeur.

    Si nous voulons donner une animation au survol, à cet élément, nous allons écrire le principe suivant:

    <div id="c1">&nbsp;</div>

    <style><!--

    #c1{largeur:100px; hauteur:100px; bordure:1px continue noire;...}

    #c1:au survol{largeur:200px; hauteur:150px; bordure:1px continue rouge;...}

    --></style>

    Dans ce cas, brutalement, au survol de l'élément C1, les paramètres vont changer.

    Afin d'avoir une animation en douceur, nous allons définir un temps de changement; nous pourrons changer tous les attributs d'un coup, avec le même temps (transition:all X secondes linear;) ou donner un temps différent à chaque attribut avec éventuellement un temps de retard au démarrage.

    <div id="c1">&nbsp;</div>

    <style><!--

    #c1{largeur:100px; hauteur:100px; bordure:1px continue noire;transition:all 1s linear;}

    #c1:au survol{largeur:200px; hauteur:150px; bordure:1px continue rouge;...}

    --></style>

    ou

    <div id="c1">&nbsp;</div>

    <style><!--

    #c1{largeur:100px; hauteur:100px; bordure:1px continue noire;transition:largeur 1s linear 0s, hauteur 3s linear 2s, bordure 4s linear 3.5s;}

    #c1:au survol{largeur:200px; hauteur:150px; bordure:1px continue rouge;...}

    --></style>

    Les attributs largeur, hauteur, bordure... sont indiqués "en indépendants" dans les 2 lignes; comme nous l'avons dit, un élément animé doit se trouver en paramètres de départ dans la première ligne et en paramètres avec animation dans la seconde ligne..

    Nous disposons de quelques attributs qui sont regroupés sous la famille "transform"; il s'agit de la translation, de la déformation, de la rotation et de l'échelle, pour les principaux; nous allons les animer tous ensemble mais, à ma connaissance, pas en indépendant (?).

    <div id="c1">&nbsp;</div>

    <style><!--

    #c1{width:100px; height:100px; border:1px solid black; background:lime; transform:translate(450px,0px) skew(0deg) rotate(0deg) scale(1); transition:transform 3s linear 0s;}

    #c1:hover{transform:translate(470px,0px) skew(-10deg) rotate(-20deg) scale(1.5);}

    --></style>

    Ce qui nous donnera, en survolant cet élément:

     

    Par contre, les attributs "indépendants" vont pouvoir être animés les uns après les autres.

    <div id="c2">&nbsp;</div>

    <style><!--

    #c2{width:100px; height:100px; border:1px solid black; background:lime; transform:translate(450px,0px) skew(0deg) rotate(0deg) scale(1); transition:width 1s linear 0s, height 1s linear 2s, border 1s linear 3s, background 1s linear 4s, transform 2s linear 5s;}

    #c2:hover{width:200px; height:150px; border:3px double red; background:pink; transform:translate(470px,0px) skew(-10deg) rotate(-20deg) scale(1.5);}

    --></style>

     

    Nous utilisons plus la commande par all, pour nous simplifier la tâche mais il faut connaître ces possibilités.

    Sachez également que si le changement de couleur de fond se fait en douceur, si le fond est une image, le changement sera brutal.

    Une façon de changer d'image de fond en douceur est de placer une image en fond et, par dessus, mais invisible (opacity:0;), l'autre image, que l'on fait apparaître au survol, en la rendant opaque (opacity:1;) avec la vitesse de transition choisie.

    Et pi c'est tout pour aujourd'hui !