Ce dossier contient des exemples de mise en page CSS.
Pour chaque exemple, le code (CSS et JavaScript) est contenu directement dans le fichier HTML principal.
Voici quelques éléments communs que tous les projets utilisent:
- CSS / normalize.min.css : Normalize est un reset CSS qui corrige certains comportements par défaut de navigateurs.
- CSS / main.css : Contient quelques éléments de base que nous utilisons partout. Applique le fonctionnement box sizing: border-box à tous les éléments (voir documentation).
- JS / prefixfree.min.js : Cet outil, créé par Lea Verou, ajoute les préfixes navigateurs à notre CSS lorsque c'est nécessaire. Cela nous permet d'écrire un CSS plus sobre, sans préfixes redondants.
Voici les exemples de mise en page proposés:
Une mise en page comprenant plusieurs sections, qui deviennent visibles au fur et a mesure de l'avancement. La navigation utilise le JavaScript.
Variation sur la mise en page précédente, avec navigation verticale.
Exemple de chargement de webfont.
Un effet de coin transparent, obtenu avec un dégradé CSS.
- Page d'exemple
- Article de Lea Verou sur cette technique
- Documentation couleurs et dégradés
Un exemple utilisant le "CSS Grid Layout".
- Page d'exemple
- Un article explicatif (par Raphaël Goetter)
Encore un exemple de "CSS Grid Layout".
Le code est mis à disposition sans restrictions de licence et peut être utilisé librement (The Unlicense).