| inspirations | ||
| lab | ||
| notes | ||
| ronce | ||
| LICENSE | ||
| README.md | ||
Laboratoire du futur site web de Deuxfleurs
Les tests graphiques sont dans /lab, une page HTML par idée à développer. N'hésitez pas à ajouter la vôtre !
Objectifs techniques
- Responsive mobile-first design.
- Media queries CSS : Des images envoyées adaptées à la taille des viewports.
- Pas besoin de Javascript : Le CSS3 ça déchire, on peut faire des infobulles, des animations, de la parallax. (Navigateurs compatibles depuis 7 ans ou plus.)
Idées graphiques
-
Branches et canopée : Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu.
ronce/feuille brush.abrcontient la brosse Photoshop utilisée par Ronce pour les feuilles d'arbre au premier plan. On pourrait l'utiliser pour faire des bordures de fond.
-
Parallax : Exploiter l'illustration au maximum, en la laissant fixée en fond de page tandis que les éléments graphiques défilent (parallax).
-
S'il faut un menu : barre d'onglets sur PC, menu « sandwich » qui révèle une colonne d'onglets sur smartphone.
-
Couleurs : Ronce a proposé quelques couleurs dans
/lab/gimp/branches-et-canopee.un violet du fond en rab, soit pour le fameux monde d'en bas, soit pour un peu de douceur moins saturée.
-
Elements
<code>:
Inspirations
-
MDN - Création de tooltips et remarques sur l'accessibilité du contenu
On peut faire tout ce qu'il faut avec CSS3 !
Néanmoins, rendre un site accessible sans outils a l'air compliqué.
-
CSS Border Effects : Notamment 'Cool Clippings', 'Hand Drawn' (et 'Attention Getter' for fun)
-
border-image sur css-tricks notamment « More Demos ».
-
Utiliser des bannières qui donnent du sens au contenu.
-
Le fait de ne pas donner d'éléments de graphisme dans notre markup HTML, mais seulement dans le CSS. Par exemple, mettre une classe "text-center" à un <p> est considéré une mauvaise pratique.