Modifier ou dessiner ses images en css

Director: Abadie joris (born Juillet 17, 1990)

Les personnages, les objets, et les formes. En HTLM, c'est le dernier qui parle qui a raison

Les personnages, les objets, et les formes se trouvent dans la banque donnée par le formateur.
Ces éléments de construction sont composés de deux parties.
La première partie est le dessin lui même, elle est à placer entre le symbole <style> et le symbole </style> .
Exemple :
Nous voulons placer le personnage nommé bouboule devant une maison du coté gauche, sur la vingtième image qui apparait à l'écran d'une vidéo contenant 64 images.
Puisqu'il y a 64 images, fleur64 est la première image. D'ou fleur45 est la vingtième image de la vidéo
Nous faisons une recherche avec le terme : id="fleur45" , pour nous rendre directement dans la zone de travail
Nous allons avoir quelque chose sous la forme

<div id="fleur45" class="cachemoi">
<div ...>
...
...
</div>
</div>

En premier, il faut supprimer l'ancien dessin, pour cela, il faut supprimer tout ce qui se trouve entre la première et la dernière balise, il nous reste quelque chose sous la forme :

<div id="fleur45" class="cachemoi">


</div>

Comme en HTML, c'est le dernier qui parle qui a raison (excepté si nous avons marqué les objets d'une forme d'opacité) ; nous allons placer en premier la maison en la plaçant dans l'image à l'aide d'un div d'encadrement qui dit ou.
La maison se présente en deux parties, l'une qui dessine et l'autre qui dit ou elle est dans l'image.
Entre les balises de fleur45 nous allons en premier dire ou se trouve la maison dans l'image
Puis nous plaçons les div de la maison.
Ensuite nous indiquons ou se trouve le personnage, et nous plaçons en dessous des div de la maison, les div du personnage.
Une fois ceci fait nous effectuons une recherche sur le terme </style> et nous plaçons tous le .quelquechose{...} en dessus

Résumé : Placer le .quelqueChose dans style, et les div entre les div des images ou nous voulons le dessin

Le dessin en css. En css commenter c'est détruire

Les personnages et les différents objets sont dessinés en css, ils peuvent servir à plusieurs images
Pour modifier une forme en exemple la taille d'une tête, ou encore la position des yeux pour faire tourner un regard, ou encore la couleur d'une maison, nous n'avons pas besoin de recréer un nouveau dessin.
Nous pouvons adapter le dessin existant.
En exemple, prenons la cas d'un balle de couleur jaune, nous voulons que dans une image, elle change de couleur pour être plus foncé, et aussi qu'elle ait une forme un peu écrasée suite au rebond contre un mur.
A l'origine, le code dans l'image est

<div id="fleur45" class="cachemoi">
       <div  class="balle"></div>
</div>

Pour mofifier la forme et la couleur, il faut indiquer une nouvelle couleur et une nouvelle hauteur (c'est actif que le temps de cette image)

<div id="fleur45" class="cachemoi">
        <div  class="balle"  style="background-color: #FF9999; height: 100px;"></div>
</div>

Résumé : tous les dessins peuvent être redessinés ou modifier en reprenant le css en utilisant style dans les div

Comment placer le dessin dans l'image.

Le moyen le plus simple est de mettre dans chaque div un style qui indique la position par rapport au bord gauche de l'écran et par rapport au haut de l'écran en indiquant margin-left: et margin-top.
Avec le temps et l'expérience, en utilisant le fait que plusieurs causes peuvent avoir le même effet, et que la même cause a des effets différents selon l'environnement, nous pouvons utiliser d'autres outils allégeant grandement le poid du fichier
mais comme le mieu est l'ennemie du bien, et que j'espère que le lecteur se concentre sur les effets pédagogiques ou sur la finesse de son jeu vidéo en ajustant les interactions, je n'indique pas la richesse des possibilités pour dire qu'elles existent et que je les mettrais en ligne en un lieu plus approprié.
Ceux qui savent manipuler les positions css static relative fixed absolute, les cascades de div et les héritages peuvent les utiliser bien sure, mais j'ai dessiné plusieurs dizaine d'instrument de musique en css avant d'être sure de ne pas perdre de temps du fait d'utiliser ces techniques. alors qu'il est si simple d'utiliser margin-left pour arriver au même effet.

Résumé : margin-left: et margin-top: sont la clef de la simplicité

Comment créer un nouveau dessin.

Pour créer un nouveau dessin, nous utilisons un fichier de montage nommé montage.html
Son contenue est vierge de dessin et se présente sous la forme :

<!DOCTYPE html>
<html>
<head>
<title>Dessin</title>


<style>

</style>
</head>
<body>



</body>
</html>

Nous pouvons soit utiliser des formes déja utilisées dans la vidéo en les adaptant à notre dessin en utilisant style, soit créer une nouvelle forme.
Pour créer une nouvelle forme, il faut en premier la nommer de manière à pouvoir la reconnaitre et la retrouver facilement.
Pour prendre quelque chose de simple, mais parlant, prenons un bol
Nous écrivons donc .bol dans style.
Comme pour la plupart du temps nous partons d'un rectangle, soit une hauteur et une largeur, que nous plaçons entre les parenthèse dans style : .bol {position: absolute; width: 130px; height: 50px;}
Puis nous mettons en forme le bol avec border-radius: 90% 50% 50% 50% / 20% 20% 90% 90%; pour firefox, pour les autres navigateurs nous pouvons ajouter cette forme qui impose un calcul de rapport à chaque fois -webkit-border-radius: 90px 50px 50px 50px / 20px 20px 90px 90px; ou en laissant en l'état affiche différentes images si on utilise autre chose que firefox.
Notre dessin devient : .bol {position: absolute; width: 130px; height: 50px; -webkit-border-radius: 90px 50px 50px 50px / 20px 20px 90px 90px; border-radius: 90% 50% 50% 50% / 20% 20% 90% 90%;}
Il manque encore la couleur, nous pouvons colorier le fond et le bord en plein, en dégradé, avec différents types d'oppacités.