blob: c74f6ea62db4ac41954306f020e1644cc5f20163 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
# Laboratoire du futur site web de Deuxfleurs
## Objectifs techniques
* Responsive mobile-first design.
* [Media queries CSS](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) : 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.
* **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.
## Inspirations
* [MDN - Création de tooltips et remarques sur l'accessibilité du contenu](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#tooltips)
On peut faire tout ce qu'il faut avec CSS3 !
Néanmoins, *rendre un site accessible sans outils a l'air compliqué*.
* [W3C Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
Utiliser des bannières qui donnent du sens au contenu.
* [Semantic CSS] (https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)
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.
|
