Salut,

Comme tu le sais sûrement, si tu as suivi les articles précédents, je travaille en ce moment beaucoup sur HTML et CSS. Depuis plusieurs jours, je me suis mis à l’apprentissage de Bootstrap, un framework HTML/CSS. je ne rentre pas dans le détail aujourd’hui, j’en parlerai plus en profondeur dans de prochains articles…

Toujours est-il qu’hier soir je me suis lancé dans un mini projet CSS un peu débile, qui consistait à reproduire le casque de Darth Vader (pour les fans de Star Wars) en HTML et CSS. Pour l’occasion je me suis servi de Bootstrap pour manipuler ce framework.

Comment faire?

Pour réaliser les parties « triangulaires » de ce casque, j’ai utilisé la propriété qui sert à faire des dégradés en CSS. C’est d’ailleurs le sujet de mon prochain article sur le CSS.  C’est d’ailleurs en écrivant cet article que j’ai eu l’idée du mini projet.

Pour faire le tour des propriétés CSS utilisées, j’ai beaucoup utilisé les positions relatives et absolues afin de positionner précisément certains éléments, comme les yeux et les vis du casque.

Bootstrap m’a permis de réaliser une grille de base, donc les cellules sont en noires. Il m’a suffi ensuite de « découper » les cellules périphériques en triangle à l’aide de la propriété linear-gradient. Pour finir, j’ai utilisé les propriétés border, background et box-shadow pour finaliser les détails.

Comme d’habitude, tu peux retrouver la totalité du code sur Codepen en suivant ce lien.

Voilà le résultat:

Sith avec Bootstrap

Alors on est d’accord que ce n’est pas le projet le plus sexy du monde mais je me suis bien amusé en réalisant ce projet. Si tu as des astuces pour éviter certaines lignes de code ou pur faire différemment, n’hésites pas à laisser un commentaire!

Mon seul regret pour ce projet, c’est qu’il n’est pas responsive, si tu réduis la page, Darth Vader fait un sale tronche… Mais je me dis que dans la mesure ou ça n’est pas un vrai site web tel qu’on l’entend, ça n’est pas très grave. J’ai trouvé ce genre de projet intéressant et amusant pour manipuler le code et se prendre un peu la tête.

J’ai d’autres projets de ce type, je les présenterais au fur à mesure que je les réaliserais.

Avant cela, je termine mon article sur les dégradés en CSS et on verra ensuite…

A bientôt!

Guillaume