Mode d'emploi de cette boîte à outils :
Les exemples ci-dessous sont des exercices réalisés durant les cours (2ème, 3ème et 4ème année) afin d'étudier une ou des problématiques graphiques et interactives sur le Web. Tous ces exemples renvoient vers Codepen?, regardez bien comment ils sont fait (en lisant les commentaires dans le code) et servez-vous en pour vos projets ! Cliquez sur les ? à côté de certains mots, cela vous donnera leurs définitions aux travers de divers liens.


Collection : Coder l'animation pour le Web

Le positionnement CSS

Voir l'exemple Lire le code

Styles graphiques du texte en CSS

Voir l'exemple Lire le code

Ajouter une image pleine page

Voir l'exemple Lire le code

Ajouter et/ou enlever une class avec p5.js

Voir l'exemple Lire le code

Agrandir des images avec lightbox?

Voir l'exemple Lire le code

Un texte positionné aléatoirement

Voir l'exemple Lire le code

Deux sections de défilement

Voir l'exemple Lire le code

Web physics avec matter.js?

Voir l'exemple Lire le code

Créer une grille responsive?

Voir l'exemple Lire le code

HTML/CSS/DOM avec P5.js?

Voir l'exemple Lire le code

Exemple de menu responsive

Voir l'exemple Lire le code

Utiliser flexbox? pour une mise en page

Voir l'exemple Lire le code

Des caractères unicode? en random

Voir l'exemple Lire le code

Faire des styles sur ses liens?

Voir l'exemple Lire le code

Collection :
Mise en page avec css flexbox

Une grille 3x3 inspirée d'Instagram

Voir l'exemple Lire le code

Flouter du texte avec le filtre blur

Voir l'exemple Lire le code

Faire une pop-up? en css

Voir l'exemple Lire le code

Slide horizontal avec la souris

Voir l'exemple Lire le code

Texte souligné en survol?

Voir l'exemple Lire le code

Exemple de texte encadré

Voir l'exemple Lire le code

Faire apparaître des contenus en scrollant

Voir l'exemple Lire le code

Faire une page full screen avec P5.js

Voir l'exemple Lire le code