• avenoel.org
  • Forum
  • [Thème] Thème Avenoel Vaporwave / Win98

    • Topic : « [Thème] Thème Avenoel Vaporwave / Win98 »

    Liste des sujets
    Avatar de PingouinAigri PingouinAigri
    Posté le 04/01/2018 à 13:48:19
    Je suis au taff donc j'ai pas pu l'appliquer au thème mais j'ai pensé à des animations css3.

    Par exemple ici le fond bouge sur un gradient de différentes couleurs vape. :frog:

    J'ai aussi rajouté des scanlines pour émuler les CRT de l'époque (on peut faire joujou avec la vitesse de l'animation ou la taille (10px dans l'exemple) :noel:

    Le seul problème des scanlines c'est qu'il faut que tous les élements enfants du body soit en position relative avec un z-index inférieur pour que les lignes balayent tout le site, je ne sais pas ce que ça représente en terme de travail sur le thème de mettre ça en place :question:

    Vous pouvez test ici :ok: --> https://codepen.io/PingouinAigri/pen/jYGOaN
    Apercite https://codepen.io/PingouinAigri/pen/jYGOaN

    Avatar de PingouinAigri PingouinAigri
    Posté le 04/01/2018 à 13:56:26
    Citation de SourcilDeFillon
    Ca risque pas de faire laguer la navigation ?

    Pas essayé sur mobile, sur PC en revanche ça doit pas beaucoup consommer (le GPU gère très bien là ou l'animation via javascript c'est généralement le CPU), ça dépend toujours de pleins de paramètres et puis c'est une proposition, à tester et voir si les quais adhèrent.

    Citation de SourcilDeFillon
    https://image.noelshack.com/minis/2018/01/4/1515070426-scanline.png

    Les scanlines rendent bien :ok: après c'est le problème de ce que j'indiquais tout à l'heure si on veut du pur filtre qui recouvre tout l'écran faut foutre un container qui a un z-index et je sais pas si c'est difficile à mettre en place.
    Pour la couleur de fond c'est une question de préférence je laisse les quais choisir entre le fond bleu-vert de windows ou un gradient typé neowave.
    Avatar de SourcilDeFillon SourcilDeFillon
    Posté le 04/01/2018 à 13:58:58
    Citation de PingouinAigri
    Citation de SourcilDeFillon
    Ca risque pas de faire laguer la navigation ?
    Pas essayé sur mobile, sur PC en revanche ça doit pas beaucoup consommer (le GPU gère très bien là ou l'animation via javascript c'est généralement le CPU), ça dépend toujours de pleins de paramètres et puis c'est une proposition, à tester et voir si les quais adhèrent.

    C'est super joli mais ca gene la lecture je trouve (pour tester, reprend ton code et copie le direct dans le css du theme, en enlevant quelques width et height)

    Et pour le mettre partout sur le site je sais pas comment faire (les z index je maitrise pas du tout, ppour etre honnete)
    Avatar de PingouinAigri PingouinAigri
    Posté le 04/01/2018 à 14:02:13
    Citation de SourcilDeFillon
    Citation de PingouinAigri
    Citation de SourcilDeFillon
    Ca risque pas de faire laguer la navigation ?
    Pas essayé sur mobile, sur PC en revanche ça doit pas beaucoup consommer (le GPU gère très bien là ou l'animation via javascript c'est généralement le CPU), ça dépend toujours de pleins de paramètres et puis c'est une proposition, à tester et voir si les quais adhèrent.
    C'est super joli mais ca gene la lecture je trouve (pour tester, reprend ton code et copie le direct dans le css du theme, en enlevant quelques width et height)
    Et pour le mettre partout sur le site je sais pas comment faire (les z index je maitrise pas du tout, ppour etre honnete)

    J'essaierai ce soir après bouffer, si j'ai le temps je posterai les résultats ici avec si possible un webm.
    Avatar de PingouinAigri PingouinAigri
    Posté le 04/01/2018 à 14:06:07
    Ouais le fond est peut-être trop flashy et gène un peu la lecture. A la limite ce genre de truc marcherait bien avec un thème 420 https://image.noelshack.com/minis/2017/04/1485430860-testtt.png

    Les scanlines en revanche peuvent être stylées
    Avatar de SourcilDeFillon SourcilDeFillon
    Posté le 04/01/2018 à 14:50:56
    Citation de Danger
    J'aime bien le style vapor mais le style windows beaucoup moins.
    J'avais vu ton précédent sujet, t'avais jamais fait de css non ? Si oui bravo.

    J'en faisais quand j'étais plus jeune, apres je me suis pas mal détourné des langages web
    Je m'y suis remis y'a pas si longtemps :oui:

    Après le style "windows" est un des courants d'inspiration de la vaporwave, je comprends qu'on puisse ne pas aimer :oui: (d'ailleurs à la base je comptais pas faire ca, mais en pratique c'était le plus simple :hap: )
    Avatar de SourcilDeFillon SourcilDeFillon
    Posté le 04/01/2018 à 15:13:08
    Capture : https://image.noelshack.com/minis/2018/01/4/1515075068-screen-win98.png

    Correctifs :
    - Enlevé les glow bleus quand on a le focus sur un formulaire, pour plus d'immersivité
    - Rajout de bordures retro de type "inset" et "outset" (l'effet 3D kitsch :hap: )
    - Suppression des icones de base editer supprimer citer, remplacement par les boutons de fenetre win 98 :
    -- La croix = supprimer (vous vous y attendiez)
    -- La grosse fenetre = quoter
    -- La réduction de fenetre = éditer
    Avatar de Belz3buth Belz3buth
    Posté le 04/01/2018 à 17:45:54
    Putain les gars c'est grave lourd c'est mon thème préféré c'est sur oOOo :frog: :owi: . Et l'animation css est pas mal mais ont irais pas trop dans le vaporwave et on sortirai du w98 non?
    EDIT : Oui nan c'est trop bien en faite :frog:
    EDIT2 : Si t'as moyen de mettre ça sur stylus pour que ça mette à jour tout seul :3
    Avatar de Danger Danger
    Posté le 04/01/2018 à 18:08:55
    Citation de PingouinAigri
    Je suis au taff donc j'ai pas pu l'appliquer au thème mais j'ai pensé à des animations css3.
    Par exemple ici le fond bouge sur un gradient de différentes couleurs vape. :frog:
    J'ai aussi rajouté des scanlines pour émuler les CRT de l'époque (on peut faire joujou avec la vitesse de l'animation ou la taille (10px dans l'exemple) :noel:
    Le seul problème des scanlines c'est qu'il faut que tous les élements enfants du body soit en position relative avec un z-index inférieur pour que les lignes balayent tout le site, je ne sais pas ce que ça représente en terme de travail sur le thème de mettre ça en place :question:
    Vous pouvez test ici :ok: --> https://codepen.io/PingouinAigri/pen/jYGOaN
    Apercite https://codepen.io/PingouinAigri/pen/jYGOaN


    J'avais pas vu ça, je crois que je vais être obligé de tester du coup.
    Liste des sujets