Ce n’est pas parce qu’un développeur passe son temps à programmer des sites internet et des applications mobiles, qu’il ne doit pas s’amuser un peu de temps et temps. Les langages de programmation peuvent nous permettre de réaliser tout un tas de choses vraiment sympa, voir même fun ! (oui c’est possible)

C’est le cas pour ce projet que j’ai réalisé. J’ai créé, ou plutôt repris l’idée du système solaire en css3. En effet, ayant vu passer un bon nombre de ces projets, je me suis dis qu’il serait temps d’en faire un pour voir ce que cela me donnerait mais également pour comprendre le principe de fonctionnement vis-à-vis du CSS3.

Système Solaire en CSS3

système solaire en css3 miniature

Voir le projet

Langages utilisés

  • HTML
  • CSS 3

Travail réalisé

Il aura fallu que je réalise dans un premier temps le point de départ, le soleil. Une fois celui-ci placé (il va en fait me servir de point d’origine), je suis passé aux placements des orbites et des planètes. Rien de bien difficile en soit, bien qu’il ne faille savoir jouer avec les div, les position et la programmation des trajectoires des planètes.

Voici l’ordre de création « standard » pour UNE planète :

  1. Positionnement de l’orbite de la planète par rapport au point d’origine (soleil)
  2. Création et mise en place de la planète sur l’orbite ET centrée sur celui-ci
  3. Mise en place de l’ombre de la planète (simuler la zone non éclairée par le soleil)
  4. Programmation de la rotation continue de la planète par rapport au centre de l’orbite

Notez qu’il faut recréer ces 4 étapes pour pouvoir faire un satellite à la planète. Il faudra juste penser à prendre comme point d’origine la planète ciblée.

Difficultés rencontrées

Bien que le travail ne fut pas réellement dur à concevoir, il fallait bien visualiser la programmation et surtout bien s’organiser. En effet, pour ce petit projet, j’ai travaillé de div dans le div dans la div. On pourrait presque parler de l’inception de div (la blague est faite).

Plus sérieusement, le plus difficile aura été de mettre les bons chiffres pour les rotations et les placements des orbites. Il fallait jouer avec des demi-mesures, des degrés, des distances. Pour vous rendre compte du travail, je vous invite à vous rendre sur la page du projet et à faire un CTRL + U afin de voir par vous même le méli-mélo du CSS. Le code est aéré et parfaitement documenté, vous n’aurez, normalement, aucun mal à comprendre.

Conclusion

Ce projet fut au final très intéressant à réaliser car assez instructif sur les possibilités du CSS3. Je vous proposerais un petit tutoriel une prochaine fois pour vous montrer le principe de fonctionnement.

Si vous avez des remarques sur ce projet ou si vous voulez juste me donner votre avis, les commentaires sont à votre disposition. ;)