{"id":29575,"date":"2020-07-14T16:47:54","date_gmt":"2020-07-14T16:47:54","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/10-effets-retro-css-et-html-incroyables\/"},"modified":"2020-07-14T16:47:54","modified_gmt":"2020-07-14T16:47:54","slug":"10-effets-retro-css-et-html-incroyables","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/10-effets-retro-css-et-html-incroyables\/","title":{"rendered":"10 effets r\u00e9tro CSS et HTML incroyables"},"content":{"rendered":"<p>Hipstamatic, Spotify et maintenant Adidas: Notre soci\u00e9t\u00e9 semble avoir un grand d\u00e9sir pour les anciens et les anciens.  Peut-\u00eatre que notre march\u00e9 est tellement satur\u00e9 de tout ce qui est innovant et de haute technologie que nous commen\u00e7ons \u00e0 nous ennuyer.  Ou peut-\u00eatre que c&#8217;est juste une nostalgie banale pour les vieux jours, quand tout semblait facile, simple et rose.  L&#8217;obsession actuelle pour tout ce qui est du pass\u00e9 r\u00e9cent est \u00e9vidente.  Il peut \u00eatre vu partout, et la sph\u00e8re de la conception Web ne fait pas exception.<\/p>\n<p>En fait, le style r\u00e9tro se manifeste de temps en temps sur le web.  Montr\u00e9 via des palettes de couleurs pastel r\u00e9tro, des effets bichromiques, des imprim\u00e9s g\u00e9om\u00e9triques simplifi\u00e9s audacieux, des illustrations art d\u00e9co, des effets granuleux et bruyants, des images de type Polaroid, des dessins inspir\u00e9s des tablo\u00efdes, des paysages tir\u00e9s d&#8217;anciens jeux et de Claro, la typographie de ann\u00e9es pass\u00e9es.<\/p>\n<p>En parlant de cela, la typographie est l&#8217;une des options les plus populaires lorsqu&#8217;il s&#8217;agit d&#8217;inculquer une sensation r\u00e9tro lumineuse dans un projet.  C&#8217;est subtil et de bon go\u00fbt.  Et, plus important encore, il ne surcharge ni ne surcharge le projet.  C&#8217;est une touche finale parfaite qui attire l&#8217;attention et cr\u00e9e une atmosph\u00e8re appropri\u00e9e.<\/p>\n<p>De plus, vous pouvez reproduire rapidement les effets des ann\u00e9es 80 ou 90 \u00e0 l&#8217;aide du trio bien-aim\u00e9 CSS \/ JS et SVG.  Appliquez simplement l&#8217;effet \u00e0 n&#8217;importe quel mot et obtenez le r\u00e9sultat souhait\u00e9 en quelques secondes.  Et vous n&#8217;avez pas \u00e0 vous soucier de l&#8217;\u00e9dition de photos ou de programmes li\u00e9s \u00e0 la conception comme Photoshop ou Sketch pour apporter des modifications.  Simple et \u00e9l\u00e9gant, non?<\/p>\n<p>Si vous \u00eates quelqu&#8217;un qui appr\u00e9cie cette fa\u00e7on de faire, nous avons rassembl\u00e9 10 extraits de code avec des effets de typographie r\u00e9tro incroyables.  Nous allons voir:<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Quitter_le_pays\"><\/span>Quitter le pays<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nous ne pouvions pas nous emp\u00eacher de commencer notre collection avec ce super code Gabrielle Wee.  Son projet s&#8217;intitule Left the Country et s&#8217;inspire principalement de l&#8217;horreur des Stranger Things des Duffer Brothers.  De nombreux concepteurs et d\u00e9veloppeurs l&#8217;ont reproduit.  Dribbble et Codepen regorgent d&#8217;opinions professionnelles sur l&#8217;introduction du programme.  Il existe m\u00eame un g\u00e9n\u00e9rateur d\u00e9velopp\u00e9 par Nelson Cash qui vous permet de recr\u00e9er un logo avec vos donn\u00e9es et de t\u00e9l\u00e9charger l&#8217;image.  Mais si vous voulez \u00e9viter toute statique, essayez l&#8217;extrait de code Wee qui est une solution HTML et SCSS pure.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sans_poste_vacant_404\"><\/span>Sans poste vacant 404<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dans Vacance 404 de Riley Shaw, il est tr\u00e8s similaire au travail pr\u00e9c\u00e9dent de Gabrielle Wee.  Ses racines sont dans la merveilleuse ligne d&#8217;art qui est renforc\u00e9e par une touche scintillante et un effet scintillant pour un r\u00e9alisme accru.  Cela nous rappelle tous ces n\u00e9ons lumineux qui sont devenus de plus en plus populaires au milieu du si\u00e8cle dernier en Am\u00e9rique.  Cependant, ils n&#8217;\u00e9taient peut-\u00eatre pas aussi \u00e9l\u00e9gants et raffin\u00e9s que le chef-d&#8217;\u0153uvre de Riley Shaw.  La solution est une symbiose d&#8217;\u00e9l\u00e9gance, de sophistication et d&#8217;attrait vintage.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Enseigne_au_neon_vintage\"><\/span>Enseigne au n\u00e9on vintage<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Besoin de plus d&#8217;effets scintillants et d&#8217;une ambiance am\u00e9ricaine?  Ensuite, vous devriez tourner votre attention vers l&#8217;enseigne au n\u00e9on vintage de Kyle Lavery.  On dirait qu&#8217;il est sorti de publicit\u00e9s des ann\u00e9es 1960 qui \u00e9taient encombr\u00e9es de panneaux lumineux.  La combinaison intelligente de tubes multi-diam\u00e8tres, un merveilleux effet \u00e9tincelant, une palette de couleurs controvers\u00e9e et une belle police font l&#8217;affaire, r\u00e9sultant en un excellent chef-d&#8217;\u0153uvre cod\u00e9.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Division_Space_Invaders\"><\/span>Division: Space Invaders<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Revenons aux ann\u00e9es 80 et aux extraits de code cr\u00e9\u00e9s avec cette p\u00e9riode \u00e0 l&#8217;esprit.  Tout d&#8217;abord, les ann\u00e9es 80 et 90 se sont concentr\u00e9es sur les jeux vid\u00e9o.  Notre enfance a \u00e9t\u00e9 si adorable.  Et Martin Pitt est de ceux qui ont r\u00e9ussi \u00e0 nous le rappeler.  Sa division: Space Invaders nous ram\u00e8ne \u00e0 l&#8217;adolescence.  Cette r\u00e9alisation enchante avec des vibrations positives et de la joie.  Il a l&#8217;air mignon et r\u00eaveur.  Il a \u00e9t\u00e9 cr\u00e9\u00e9 \u00e0 l&#8217;aide de la biblioth\u00e8que Splitting, qui facilite les manipulations avec CSS.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Jouer_avec_la_typographie_retro\"><\/span>Jouer avec la typographie r\u00e9tro<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Il n&#8217;y a pas 90 jeux non-arcade sur la console de jeu vid\u00e9o Atari.  C&#8217;est juste un synonyme des ann\u00e9es 80 et 90 dans le monde Geek.  Et Max Kohler le sait parfaitement.  Son codepen de typographie r\u00e9tro pr\u00e9sente habilement le logo Atari reproduit.  Vous trouverez \u00e9galement quatre autres effets qui donnent aux paroles une belle touche r\u00e9tro.<\/p>\n<h2> <\/h2>\n<p>Nouveau texte \/ typographie r\u00e9tro 80\/404 SVG<\/p>\n<p>Il existe plusieurs effets de texte fantastiques dans notre collection qui ressemblent \u00e0 de doux souvenirs li\u00e9s \u00e0 la t\u00e9l\u00e9vision.  Par exemple, New Retro Text de Vladimir Jovanovi\u0107, David Parker 80s Typography et 404 SVG de Marcos Mellado.  Alors que les deux premiers projets utilisent des lettres audacieuses, une surface brillante, un style n\u00e9on et des couleurs drastiques pour une certaine ambiance r\u00e9tro d&#8217;introduction VHS, le second semble un peu rustique, banal et brut, tout comme les clips vid\u00e9o.  com\u00e9dies musicales sur MTV de cette p\u00e9riode.<\/p>\n<h2> <\/h2>\n<p>Typographie vintage \/ titre vintage g\u00e9nial<\/p>\n<p>Ce ne serait pas une collection compl\u00e8te d&#8217;effets de typographie r\u00e9tro sans quelques solutions traditionnelles.  Et nous avons deux extraits de code fantastiques: Thibault Jan Beyer Vintage Typeface et Awesome Vintage Title de Kevin Nagata.  Ils arborent tous deux une police de caract\u00e8re vintage traditionnelle, comme nous avons l&#8217;habitude de l&#8217;imaginer: ultra-mince avec des lettres de plus en plus allong\u00e9es, une touche subtile d&#8217;Art D\u00e9co et, bien s\u00fbr, une ombre qui est le c\u0153ur et l&#8217;\u00e2me de l&#8217;\u0153uvre d&#8217;art.  Alors que le projet de Thibault Jan Beyer semble classique et majestueux;  Le projet de Kevin Nagata semble un peu moderne, avec un certain ton ludique.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dans_le_temps\"><\/span>Dans le temps<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si vous \u00eates fatigu\u00e9 de tout ce qui est ultramoderne, sophistiqu\u00e9 et sophistiqu\u00e9, il est temps de vous d\u00e9barrasser du pr\u00e9sent et de chercher l&#8217;inspiration dans le pass\u00e9.  Faites-nous confiance, vous avez toujours un as dans le trou.  Il ne manque pas une seule fois de sauver la situation.<\/p>\n<p>Il propose aux designers des tendances et des solutions qui permettent \u00e0 un projet de se d\u00e9marquer de la foule.  Et les effets typographiques r\u00e9tro en sont l&#8217;exemple parfait.  Ce sont des explosions chaleureuses et amicales du pass\u00e9 qui attirent naturellement l&#8217;attention, comme une bouff\u00e9e d&#8217;air frais.<\/p>\n  <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 ez-toc-wrap-center counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogging-techies.com\/fr\/10-effets-retro-css-et-html-incroyables\/#Quitter_le_pays\" >Quitter le pays<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogging-techies.com\/fr\/10-effets-retro-css-et-html-incroyables\/#Sans_poste_vacant_404\" >Sans poste vacant 404<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogging-techies.com\/fr\/10-effets-retro-css-et-html-incroyables\/#Enseigne_au_neon_vintage\" >Enseigne au n\u00e9on vintage<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogging-techies.com\/fr\/10-effets-retro-css-et-html-incroyables\/#Division_Space_Invaders\" >Division: Space Invaders<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogging-techies.com\/fr\/10-effets-retro-css-et-html-incroyables\/#Jouer_avec_la_typographie_retro\" >Jouer avec la typographie r\u00e9tro<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blogging-techies.com\/fr\/10-effets-retro-css-et-html-incroyables\/#Dans_le_temps\" >Dans le temps<\/a><\/li><\/ul><\/nav><\/div>\n ","protected":false},"excerpt":{"rendered":"<p>Hipstamatic, Spotify et maintenant Adidas: Notre soci\u00e9t\u00e9 semble avoir un grand d\u00e9sir pour les anciens et les anciens. Peut-\u00eatre que notre march\u00e9 est tellement satur\u00e9 de tout ce qui est innovant et de haute technologie que nous commen\u00e7ons \u00e0 nous ennuyer. Ou peut-\u00eatre que c&#8217;est juste une nostalgie banale pour les vieux jours, quand tout [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":29576,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[603,1334,948,5746,7395],"class_list":["post-29575","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs","tag-css","tag-effets","tag-html","tag-incroyables","tag-retro"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/29575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/comments?post=29575"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/29575\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media\/29576"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media?parent=29575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/categories?post=29575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/tags?post=29575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}