• Bases html/CSS

    Au vu de certaines questions qui me sont posées, je crois qu'un rappel devrait servir à quelques-uns; pour les autres, changez de page !

    Le langage html aligne les paramètres affectés à un élément; ces paramètres sont fixes et ne reçoivent pas d'animation.

    Prenons une image qui nous servira pour nos différents exemples:

    Si je veux qu'elle mesure 800px par 450px, avec une bordure blanche de 4px d'épaisseur et que le paragraphe qui la contient l'affiche en son centre:

    <p style="text-align:center;"><img style="width:800px; height:450px; border:4px solid white;" src="http://ekladata.com/KXq9M6M6xfX8tStOLN71jHLzqfo.jpg"></p>

    Cette écriture est la partie html d'un code, à laquelle on peut ajouter une partie CSS, qui va ajouter une animation éventuelle.

    Un code CSS se compose d'une première partie qui définit les paramètres de l'image au départ, qui peuvent être les mêmes que ceux en html mais écrits ainsi:

    <p style="text-align:center;"><img id="c1" src="http://ekladata.com/KXq9M6M6xfX8tStOLN71jHLzqfo.jpg"></p>

    <style><!--

    #c1{width:800px; height:450px; border:4px solid white;}

    --></style>

    Ce qui va donner le même résultat puisqu'au lieu d'écrire les attributs en ligne html, nous les écrivons en lignes CSS, en ayant identifié l'élément concerné (id="c1").

    Attention: certains paramètres, n'ayant pas d'animation CSS, peuvent être écrit en html et ceux animés doivent être écrits en CSS; du genre:

    <p style="text-align:center;"><img id="c1" style="width:800px; height:450px;" src="http://ekladata.com/KXq9M6M6xfX8tStOLN71jHLzqfo.jpg"></p>

    <style><!--

    #c1{ border:4px solid white;}

    --></style>

    Mais n'écrivez pas:

    <p style="text-align:center;"><img id="c1" style="width:800px; height:450px;" src="http://ekladata.com/KXq9M6M6xfX8tStOLN71jHLzqfo.jpg"></p>

    <style><!--

    #c1{ width:400px; height:225px;border:4px solid white;}

    --></style>

    En html, vous définissez la largeur en 800px et en CSS, la largeur en 400px: résultat, le html a la priorité et la largeur sera de 800px !

    Il m'arrive de faire ce genre d'erreur et je me demande pourquoi l'animation ne fonctionne pas !

    Dans mon exemple, il n'y pas d'animation mais n'oubliez pas qu'un attribut que vous voulez animer, doit se trouver, en CSS, dans les paramètres au départ et dans la ligne CSS avec animation.

    Les lignes CSS définissent  les paramètres de l'élément au départ et ceux après l'animation, ce sera le survol (hover) pour ces exemples.

    Pour qu'un attribut soit animé, il faut qu'il apparaisse dans la ligne au départ et dans celle au survol; sinon, pas d'animation.

    Reprenons notre code exemple:

    <p style="text-align:center;"><img id="c2" src="http://ekladata.com/KXq9M6M6xfX8tStOLN71jHLzqfo.jpg"></p>

    <style><!--

    #c2{width:800px; height:450px; border:4px solid white;}

    #c2:hover{border:4px dashed red;}

    --></style>

    Nous changeons le style de la bordure au survol, défini par :hover{...}

    Dans cet exemple, la changement est instantané puisque nous n'avons pas défini de temps pour la transition.

    <p style="text-align:center;"><img id="c3" src="http://ekladata.com/KXq9M6M6xfX8tStOLN71jHLzqfo.jpg"></p>

    <style><!--

    #c3{width:800px; height:450px; border:4px solid white; transition:all 1s linear;}

    #c3:hover{border:4px dashed red;}

    --></style>

    Survolez cette image pour constater que le changement s'effectue en 1 seconde.

    Ces différents exemples nous ont permis de voir certains attributs:

    width:800px; largeur en unité fixe (px)

    Height:450px; la hauteur.

    Border:4px solid white; bordure de 4px de large, continue et blanche.

    Transition:all 1s linear; le temps de l'animation pour tous les attributs (all), 1 seconde et courbe linéaire.

    Le positionnement centré est fait par le centrage de ce qui est dans le contenant, le paragraphe.

    Bien d'autres attributs sont disponibles et je vous encourage à les découvrir sur le net.