Réflexions et ressources liées à l'identité visuelle de Deuxfleurs
Find a file
2021-10-17 16:44:51 +02:00
blueprint added charpente submodule 2021-10-17 16:44:51 +02:00
charpente@bb0e008ea2 added charpente submodule 2021-10-17 16:44:51 +02:00
inspirations idee puces password a la ghost in the shell 2021-02-16 23:03:50 +01:00
lab blueprint 2021-10-17 16:37:04 +02:00
notes branches et canopee 2021-02-02 22:36:36 +01:00
ronce changement image fond canopee et détails 2021-02-03 08:58:43 +01:00
.gitmodules added charpente submodule 2021-10-17 16:44:51 +02:00
LICENSE LICENSE partout, border-image dans le README 2021-02-03 00:12:30 +01:00
README.md blueprint 2021-10-17 16:37:04 +02:00

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.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.
  • 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>:

  • 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.

Inspirations