Par JÉRÔME MERCIER, enseignant, artiste génératif, web designer.
- Le positionnement css Flexbox (cheat sheet - axes - tutoriel complet)
- Les transformations Css
- Les transitions Css
- Animations CSS
- Les variables en css
- La fonction de calcul Css
- La typographie moderne fluide (Clamp)
- Appliquer une variable Couleur css et changer son opacité
- Les dégradés css
- Animations Gsap (GreenSocks)
- Animations au scroll avec scrollTriger (GreenSocks)
- Les liens avec scroll automatique (GreenSocks)
- Design génératif
Positionnement FlexBox
Exemple simple pour montrer comment utiliser Flexbox
positionner des éléments de manière égale et centrée dans un conteneur.
Les éléments "HELLO" sont espacés uniformément sur l'axe horizontal et centrés verticalement.
### Structure HTML
- Le HTML comprend un `body` contenant une `div` avec l'identifiant `container`.
- À l'intérieur du `container`, il y a trois éléments `div`, chacun contenant le texte "HELLO".
### Style CSS
- Le CSS commence par l'importation d'une police Google (`Karla`).
- Ensuite, un style global (`*`) est appliqué pour annuler les marges (`margin:0`), les paddings (`padding:0`) et définir la propriété `box-sizing` sur `border-box`.
- Le `body` utilise la police `Karla` et a un fond de couleur `#1e2733` (un bleu foncé/gris).
- Les `ul` sont stylisés pour ne pas avoir de style de liste (`list-style:none`) et les `a` pour ne pas avoir de décoration de texte.
- Le `#container` est conçu pour utiliser Flexbox. Il est réglé pour afficher ses enfants en ligne (`flex-direction:row`), justifier le contenu de manière égale (`justify-content:space-around`), et aligner les éléments au centre (`align-items:center`). Il occupe 100% de la largeur et toute la hauteur de la fenêtre (`height:100vh`).
- Chaque `div` à l'intérieur du `container` a un fond `#4c78ad` (bleu), un padding de `20px`, et une couleur de texte `#bfcfe3` (bleu clair/gris).
See the Pen FlexBox 001 by Jerome Mercier (@jmercier) on CodePen.
Ressources externes
Cheat Sheet
Axes
Tutoriel