8 fragmente CSS și JS pentru crearea a 403 de pagini uimitoare

Designerii web s-au obișnuit să transforme erorile în oportunități. Nu este un secret că codul de stare HTTP comun, cel mai răspândit (și surprinzător de recunoscut) 404, alias „Negăsit”, a fost forțat de dezvoltatori să aducă beneficii proiectului. În trecut, a speriat utilizatorii, a distrus impresia generală și a fost un coșmar pentru dezvoltatori. Toată lumea dorea să dispară odată pentru totdeauna.

Astăzi, este un detaliu esențial al unui site web. WordPress are chiar și un șablon special alocat pentru el. „Pagina 404” este un element integral al experienței utilizatorului. În majoritatea cazurilor, are nu doar un design frumos, ci și o temă care își propune să contribuie la întreaga estetică a unui site web.

Alături de designul bine gândit, interacțiunile și chiar animațiile, include linkuri utile și evadari care ajută utilizatorii pierduți să revină pe drumul cel bun. Cu toate acestea, eroarea „404” în designul web este ca hipsterii din lumea reală: ei încă ne atrag atenția cu ochelarii lor nebunești, cămășile „de epocă” și bărbile, dar nu sunt nimic nou pentru noi. În ceea ce privește eroarea „403”, aceasta este o altă poveste. Nu este la fel de popular ca rudele sale apropiate, dar totuși apare și nu o dată pe lună albastră.

Doar pentru fundal, codul de stare HTTP 403, alias „403 Interzis”, înseamnă că nu aveți permisiunea de a accesa pagina. Motivele pot varia, începând cu permisiunile inadecvate ale folderelor și terminând cu o cerință banală a acreditărilor de conectare. Cu toate acestea, regula generală dictează că orice eroare este o oportunitate de a efectua îmbunătățiri. Deci, de ce să nu transformați manechinul „pagina 403” într-un loc care va îndeplini aceeași datorie ca „pagina 404”?

Să luăm în considerare o duzină de interpretări splendide ale acestui tip de eroare. Ele nu servesc doar ca o sursă de inspirație, ci și o sursă de soluții gata de utilizare.

Tu nu vei trece

„Nu vei trece” – a spus odată unul dintre cei mai puternici vrăjitori cu barbă albă din lumea fictivă (sper că toți fanii lui Dumbledore să mă ierte pentru asta). Fraza finală a lui Gandalf cel Gri (notați Gri, nu Alb) se potrivește perfect în contextul de aici. Și Noah Rodenbeek, A van Hagen și Jhey arată acest lucru în practică. Fragmentele lor de cod sunt impregnate cu spiritul și farmecul romanului „Hobbitul”. În timp ce primii doi artiști l-au recreat pe Gandalf cu personalul său, acesta din urmă doar a făcut aluzie la scenă, dar cu destul de mult succes.

HODOR 403

Dacă motivele din romanele de ficțiune prezentate mai sus nu sunt suficiente pentru tine, atunci ar trebui să-ți pui ochii pe acest fragment de cod de la Yasio. Surpriză-surpriză, el sa inspirat din seria de romane fantastice a lui George RR Martin. El a venit cu o lucrare numită HODOR 403. Cred că pentru majoritatea, această soluție se explică de la sine. În rest, vă recomand să treceți la HBO și să vedeți singur de ce acest personaj fictiv se potrivește perfect cu acest tip de eroare.

Utilizarea ilustrației și a animației

Alte soluții din lista noastră au fost ghidate de noțiunea că „403” simbolizează o zonă interzisă, astfel încât ilustrațiile CSS animate și statice au fost recreate anume având în vedere această idee.

Eroare 403 – Interzis de Aimie descrie o scenă clasică din basm. Liliecii animați, casa vrăjitoarei, copacii goi și tipografia înfiorătoare care sunt prezentate în orele de întuneric fac cu siguranță trucul aici.

403 Forbidden by Dylan și 403 Forbidden by Visual Composer au o alură medievală unică. „Închide porțile”: Proiectele evocă și anume aceste asociații. Primul are ușa clasică de poartă de gardă din lemn care se închide în fața ochilor tăi; cel de-al doilea se referă și la un subiect de poartă de gardă și înfățișează un mecanism cu roți și lanțuri care dezvăluie semnul interzis.

Viziunea lui Arturo Wibawa asupra zonei interzise este prezentată printr-o ilustrație CSS minunată, foarte detaliată și chiar parțial animată a faimosului „Oraș interzis purpuriu” chinezesc, denumit în prezent Muzeul Palatului.

Te urmărește

403 Forbidden Page de Mariana este marcată de un personaj capricios asemănător unui monstru care, datorită efectului de direcție, urmărește cursorul mouse-ului peste tot. Recreează sentimentul de a fi urmărit tot timpul. De asemenea, imită un gardian fantezist care nu permite să avanseze. Proiectul se simte distractiv în ciuda aspectului „amenințător” al mascotei.

Fii persistent

Gabriele Corti oferă și o viziune a unei pagini de eroare „403”. Proiectul său „Persistența este o cheie” descrie un întreg proces de refuzare inițială a accesului și acordarea acestuia după acțiunea corectă a utilizatorului. Acțiunile corecte implică inserarea unei chei într-o gaură a cheii. Cu toate acestea, puteți utiliza oricând acest concept ca bază pentru unele acțiuni avansate, cum ar fi introducerea numelui de utilizator și a parolei.

Păstrându-l simplu

403 de lsgrrd este o interpretare prea simplificată a unei „pagini 403” care cu siguranță are dreptul de a exista. Este minim, dar direct la obiect. Are o anumită calitate digitală care emană vibrația techno inerentă sferei computerului. Cursorul care clipește la sfârșit în tandem cu tipografia digitală produce un efect fantastic. Soluția este curată, elegantă și simplă.

Esti pe lista?

Ne vom încheia colecția cu proiectul realizat de Cassidy Williams. Spre deosebire de majoritatea prezentată aici, această soluție este o metaforă din lumea reală care ilustrează situația tipică din orice club de noapte popular. Bouncer este inima și sufletul acestui fragment de cod. Personajul a fost chiar parțial animat pentru a face totul să pară realist.

O altă oportunitate de a implica utilizatorii

Adevărul să fie spus, „Eroarea 403” nu este la fel de răspândită ca „Eroarea 404”, nici nu este la fel de populară și de recunoscut. Cu toate acestea, încă există și apare din când în când. Acest lucru creează o gaură într-un site web care poate distruge întreaga experiență a utilizatorului. Așadar, profitați de ocazie și transformați-o într-o parte validă a proiectului. Fără îndoială, va cuceri unii vizitatori noi și vă va împiedica să-i pierdeți pe cei vechi.