2021-02-02 21:13:59 +00:00
# Laboratoire du futur site web de Deuxfleurs
2021-02-03 07:58:43 +00:00
Les tests graphiques sont dans `/lab` , une page HTML par idée à développer. N'hésitez pas à ajouter la vôtre !
2021-02-02 21:13:59 +00:00
## 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
2021-02-02 21:39:10 +00:00
* **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.
2021-02-02 23:12:30 +00:00
2021-02-03 07:58:43 +00:00
* `ronce/feuille brush.abr` contient 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.
2021-02-02 21:39:10 +00:00
* **Parallax** : Exploiter l'illustration au maximum, en la laissant fixée en fond de page tandis que les éléments graphiques défilent (parallax).
2021-02-02 21:36:36 +00:00
* S'il faut un menu : barre d'onglets sur PC, menu « sandwich » qui révèle une colonne d'onglets sur smartphone.
2021-02-02 22:00:55 +00:00
* Couleurs : Ronce a proposé quelques couleurs dans `/lab/gimp/branches-et-canopee` .
2021-02-02 21:13:59 +00:00
2021-02-02 22:00:55 +00:00
> un violet du fond en rab, soit pour le fameux monde d'en bas, soit pour un peu de douceur moins saturée.
2021-02-02 21:13:59 +00:00
2021-02-02 22:29:03 +00:00
* Elements `<code>` :
* Police [`Fira Code` ](https://github.com/tonsky/FiraCode ) (ou autre police stylée avec des ligatures) ?
Il semblerait qu'Element utilise du [Fira Sans ](https://fonts.google.com/specimen/Fira+Sans )... Hm.
2021-02-03 07:58:43 +00:00
* [Bordures « dessinées à la main » ](https://stackoverflow.com/a/6402175 ) ?
2021-02-02 22:29:03 +00:00
2021-02-16 22:03:50 +00:00
* Des champs de password avec des grosses puces funky.
Inspiration visuelle de Ghost In The Shell (Stand Alone Complex) S01E08 (cf. `inspirations/images/ghost-in-the-shell_sac_s01e08` ).
[Guide pour le faire avec CSS ](https://medium.com/@wowmotty/replace-the-input-password-bullet-1cd4ee34e0aa ).
2021-02-02 21:13:59 +00:00
## 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é* .
2021-02-02 23:12:30 +00:00
* [CSS Border Effects ](https://speckyboy.com/css-border-effects/ ) : Notamment 'Cool Clippings', 'Hand Drawn' (et 'Attention Getter' for fun)
* [border-image sur css-tricks ](https://css-tricks.com/almanac/properties/b/border-image/ ) notamment « More Demos ».
2021-02-02 21:13:59 +00:00
* [W3C Semantic HTML ](https://www.w3schools.com/html/html5_semantic_elements.asp )
Utiliser des bannières qui donnent du sens au contenu.
2021-02-03 07:58:43 +00:00
* [Semantic CSS ](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ )
2021-02-02 21:13:59 +00:00
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.
2021-10-17 14:37:04 +00:00
* [Navbar responsive pur CSS ](https://codepen.io/jo_Geek/pen/xgbaEr )
2021-02-02 21:13:59 +00:00
