10 efecte uimitoare de tip retro CSS și HTML

Hipstamatic, Spotify și acum Adidas: se pare că societatea noastră are o poftă masivă de vremuri vechi și modalități vechi. Poate că piața noastră este atât de saturată cu tot ce este high-tech și inovator, încât începem să ne plictisim. Sau poate este doar o nostalgie banala a vremurilor de demult cand totul parea usor, simplu si trandafir. Obsesia actuală pentru tot ce este din trecutul recent este evidentă. Poate fi văzut peste tot, iar sfera web design-ului nu face excepție.

De altfel, stilul retro se manifestă din când în când în web. Se afișează prin palete de culori retro pastelate, efecte duotonale, imprimeuri geometrice suprasimplificate îndrăznețe, ilustrații art-deco, efecte granulare și zgomotoase, imagini asemănătoare Polaroid, machete inspirate de tabloide, peisaje preluate din jocurile vechi și bineînțeles. tipografie la timp.

Apropo de asta, tipografia este una dintre cele mai populare opțiuni atunci când vine vorba de a insufla un aspect retro zgomotos într-un proiect. Este subtil și cu gust. Și, cel mai important, nu copleșește și nici nu supraîncărcă proiectul. Este doar o atingere finală perfectă care atrage privirea și stabilește o atmosferă adecvată.

În plus, puteți reproduce rapid efecte din anii 80 sau 90 cu ajutorul îndrăgitului trio de CSS/JS și SVG. Doar aplicați efectul oricărui cuvânt și obțineți rezultatul dorit în câteva secunde. Și nu trebuie să te încurci cu editarea fotografiilor sau programele legate de design, cum ar fi Photoshop sau Sketch, pentru a face modificări. Simplu și elegant, nu-i așa?

Dacă sunteți unul care apreciază acest mod de a face lucrurile, am adunat 10 fragmente de cod cu efecte uimitoare de tipografie retro. Hai să aruncăm o privire:

Părăsit Țara

Nu ne-am putut abține să nu începem colecția noastră cu acest fragment de cod remarcabil de la Gabrielle Wee. Proiectul ei se numește Left the Country și a fost inspirat în primul rând de horrorul „Stranger Things” al fraților Duffer. O mulțime de designeri și dezvoltatori l-au reprodus. Dribbble și Codepen sunt pline de interpretări profesioniste ale intro-ului serialului. Există chiar și un generator dezvoltat de Nelson Cash care vă permite să recreați un logo cu datele dvs. și să descărcați imaginea. Dar dacă doriți să evitați totul static, încercați fragmentul de cod al lui Wee, care este o soluție pură HTML și SCSS.

Fără post vacant 404

No Vacancy 404 de Riley Shaw seamănă mult cu lucrarea anterioară a lui Gabrielle Wee. Rădăcinile sale se află în minunata linie de artă care este îmbunătățită cu o atingere strălucitoare și efect de clipire pentru un realism mai mare. Ne amintește de toate acele semne de neon strălucitoare care erau din ce în ce mai populare la mijlocul secolului trecut în America. Cu toate acestea, poate că nu arătau la fel de elegante și rafinate ca capodopera lui Riley Shaw. Soluția este o simbioză între eleganță, rafinament și atracție vintage.

Semn de neon de epocă

Ai nevoie de mai multe efecte strălucitoare și atmosfera americană? Atunci ar trebui să vă îndreptați atenția către Vintage Neon Sign de Kyle Lavery. Se simte ca și cum a ieșit din reclamele din anii 60 care erau suprapopulate cu semne luminoase. Combinația inteligentă de tuburi de diferite diametre, efectul strălucitor minunat, paleta de culori controversată și tipul de caractere magnific fac trucul, rezultând o capodopera remarcabilă alimentată de cod.

Împărțire: Space Invaders

Să ne întoarcem la anii 80 și la fragmentele de cod care prezintă efecte de tipografie realizate având în vedere această perioadă. În primul rând, anii 80 și 90 au fost totul despre jocuri video. Copilăria noastră a fost atât de adorabilă. Și Martin Pitt este unul dintre cei care a reușit să ne amintească despre asta. Divizarea lui: Space Invaders ne readuce la adolescență. Această realizare fermecă prin vibrații pozitive și jucăuș. Arată drăguț și visător. A fost creat cu ajutorul bibliotecii Splitting, care face ca manipulările cu CSS să fie ușoare.

Joacă-te cu tipografia retro

Nu există anii 90 fără jocuri arcade jucate în consola de jocuri video de acasă Atari. Este doar un sinonim al anilor 80 și 90 în Lumea Geek. Și Max Kohler o știe perfect. Codepenul său dedicat tipografiei retro prezintă sigla Atari reprodusă cu pricepere. Veți găsi, de asemenea, încă patru efecte care conferă literelor o notă retro plăcută.

Text retro nou / Tipografie anilor 80 / 404 SVG

Există mai multe efecte de text fantastice în colecția noastră care trec în minte câteva amintiri dulci legate de televizor. De exemplu, Nou text retro de Vladimir Jovanovic, Tipografia anilor 80 de David Parker și 404 SVG de Marcos Mellado. În timp ce primele două proiecte folosesc tipografie îndrăzneață, suprafață lucioasă, stilizare neon și colorare drastică pentru o anumită atmosferă de intro VHS retro, al doilea se simte puțin rustic, banal și brut - la fel ca clipurile video muzicale de pe MTV din acea perioadă.

Tip de literă vintage / Titlu vintage minunat

Aceasta nu ar fi o colecție completă de efecte de tipografie retro fără câteva soluții tradiționale. Și avem două fragmente de cod fantastice: Vintage Typeface de Thibault Jan Beyer și Awesome Vintage Title de Kevin Nagata. Ambele prezintă un tip tradițional de epocă, așa cum suntem obișnuiți să ne imaginăm: ultra-subțire, cu forme de litere din ce în ce mai alungite, o notă subtilă de art-deco și, desigur, o umbră care este inima și sufletul operei de artă. În timp ce proiectul lui Thibault Jan Beyer arată clasic și maiestuos; proiectul lui Kevin Nagata arată puțin modern, cu un anumit subton jucăuș.

Înapoi în timp

Dacă te-ai săturat de tot ce este ultramodern, sofisticat și de ultimă generație, atunci este timpul să renunți la prezent și să cauți inspirație în trecut. Crede-ne, are întotdeauna un as în gaură. Nu o dată eșuează să salveze ziua.

Oferă designerilor tendințe și soluții care lasă un proiect să iasă în evidență din mulțime. Iar efectele de tipografie retro sunt exemplul perfect în acest sens. Sunt explozii primitoare și plăcute din trecut care atrag în mod natural atenția, simțindu-se ca o gură de aer proaspăt.