8 fragmentów CSS i JS do tworzenia oszałamiających stron 403

Opublikowany: 2021-03-12

Projektanci stron internetowych przyzwyczaili się do przekształcania błędów w możliwości. Nie jest tajemnicą, że powszechny, najczęściej występujący (i zaskakująco rozpoznawalny) kod stanu HTTP 404, czyli „Not Found”, został zmuszony przez programistów do przyniesienia korzyści projektowi. W przeszłości odstraszał użytkowników, niszczył ogólne wrażenie i był koszmarem dla deweloperów. Wszyscy chcieli, żeby raz na zawsze zniknął.

Dziś jest to istotny szczegół strony internetowej. WordPress ma nawet specjalnie przypisany do niego szablon. „Strona 404” jest integralnym elementem doświadczenia użytkownika. W większości przypadków ma nie tylko piękny wygląd, ale także motyw, który ma wpłynąć na całą estetykę witryny.

Wraz z przemyślanym projektem, interakcjami, a nawet animacjami, zawiera przydatne linki i wycieczki, które pomagają utraconym użytkownikom wrócić na właściwe tory. Jednak błąd „404” w projektowaniu stron internetowych jest jak Hipsterzy w prawdziwym świecie: wciąż przyciągają nasz wzrok swoimi dziwacznymi okularami, „vintage” koszulami i brodami, ale nie są dla nas niczym nowym. Co do błędu „403”, to już inna historia. Nie jest tak popularny jak jego najbliżsi krewni, ale nadal występuje i nie raz na niebieskim księżycu.

Tylko w tle kod statusu HTTP 403, czyli „403 Forbidden”, oznacza, że ​​nie masz uprawnień dostępu do strony. Przyczyny mogą być różne, zaczynając od niewłaściwych uprawnień do folderów, a kończąc na banalnym wymaganiu danych logowania. Niemniej jednak praktyczna zasada mówi, że każdy błąd jest okazją do wprowadzenia ulepszeń. Dlaczego więc nie zamienić atrapy „strony 403” w miejsce, które będzie pełnić tę samą funkcję, co „strona 404”?

Rozważmy kilkanaście wspaniałych ujęć tego typu błędu. Służą nie tylko jako źródło inspiracji, ale także źródło gotowych rozwiązań.

Nie przejdziesz

„Nie przejdziesz” – powiedział kiedyś jeden z najpotężniejszych białobrodych czarodziejów fikcyjnego świata (mam nadzieję, że wszyscy fani Dumbledore'a mi to wybaczą). Ostatnie zdanie Gandalfa Szarego (notatka Szarego, nie Białego) doskonale wpisuje się w kontekst. Noah Rodenbeek, A van Hagen i Jhey pokazują to w praktyce. Ich fragmenty kodu nasycone są duchem i urokiem powieści „Hobbit”. Podczas gdy dwaj pierwsi artyści odtworzyli Gandalfa za pomocą jego personelu, ten drugi tylko napomknął o scenie, ale całkiem skutecznie.

HODOR 403

Jeśli motywy z powieści fikcyjnych przedstawione powyżej nie są dla Ciebie wystarczające, powinieneś zwrócić uwagę na ten fragment kodu od Yasio. Niespodzianka-niespodzianka, inspirację czerpał z serii powieści fantasy George'a RR Martina. Wymyślił pracę zatytułowaną HODOR 403. Uważam, że dla większości to rozwiązanie nie wymaga wyjaśnień. Co do reszty polecam przejść na HBO i przekonać się, dlaczego ta fikcyjna postać doskonale radzi sobie z tego typu błędem.

Wykorzystanie ilustracji i animacji

Inne rozwiązania z naszego zestawienia kierowały się przekonaniem, że „403” symbolizuje obszar zakazany, tak więc animowane i statyczne ilustracje CSS zostały odtworzone właśnie z myślą o tym pomyśle.

Błąd 403 – Forbidden by Aimie przedstawia klasyczną scenę z bajki. Animowane nietoperze, dom czarownicy, nagie drzewa i przerażająca typografia, które pojawiają się w godzinach ciemności, z pewnością sprawdzą się tutaj.

403 Forbidden by Dylan i 403 Forbidden by Visual Composer mają unikalny średniowieczny urok. „Zamknij bramy”: Projekty wywołują właśnie te skojarzenia. Pierwsza z nich to klasyczne drewniane drzwi straży, które zamykają się na twoich oczach; druga również dotyczy tematu bramy strażniczej i przedstawia mechanizm z zębatkami i łańcuchami, który ujawnia zakazany znak.

Wizja zakazanego obszaru autorstwa Arturo Wibawy przedstawiona jest za pomocą wspaniałej, bardzo szczegółowej, a nawet częściowo animowanej ilustracji CSS słynnego chińskiego „Purpurowego Zakazanego Miasta”, znanego obecnie jako Muzeum Pałacowe.

Obserwuje cię

403 Forbidden Page autorstwa Mariany jest naznaczona przez dziwaczną postać przypominającą potwora, która dzięki efektowi rozpoznania kierunku wszędzie podąża za kursorem myszy. Odtwarza uczucie bycia obserwowanym przez cały czas. Imituje również fantazyjną wróżkę, która nie pozwala iść do przodu. Projekt sprawia frajdę pomimo „groźnego” wyglądu maskotki.

Bądź wytrwały

Gabriele Corti oferuje również wizję strony błędu „403”. Jego projekt „Wytrwałość jest kluczem” przedstawia cały proces wstępnego odmawiania dostępu i przyznawania go po odpowiednim działaniu użytkownika. Właściwe działania oznaczają włożenie klucza do dziurki od klucza Niemniej jednak, zawsze możesz użyć tej koncepcji jako podstawy do niektórych zaawansowanych działań, takich jak wprowadzanie loginu i hasła.

Utrzymywanie tego w prostocie

403 autorstwa lsgrrd to uproszczone podejście do „strony 403”, która z pewnością ma prawo istnieć. Jest minimalny, ale od razu do rzeczy. Ma pewną cyfrową jakość, która emanuje klimatem techno związanym ze sferą komputerową. Migający kursor na końcu w połączeniu z cyfrową typografią daje fantastyczny efekt. Rozwiązanie jest czyste, eleganckie i proste.

Czy jesteś na liście?

Naszą kolekcję zakończymy projektem autorstwa Cassidy Williams. W przeciwieństwie do większości przedstawionych tutaj, to rozwiązanie jest metaforą z prawdziwego świata, która ilustruje typową sytuację w dowolnym popularnym klubie nocnym. Bramkarz to serce i dusza tego fragmentu kodu. Postać została nawet częściowo animowana, aby wszystko wyglądało jak żywe.

Kolejna okazja do zaangażowania użytkowników

Prawdę mówiąc, „Błąd 403” nie jest tak rozpowszechniony jak „Błąd 404”, ani nie jest tak popularny i rozpoznawalny. Niemniej jednak nadal istnieje i pojawia się raz za razem. To tworzy dziurę w witrynie, która może zepsuć całe doświadczenie użytkownika. Dlatego wykorzystaj okazję i przekształć ją w ważną część projektu. Niewątpliwie zdobędzie nowych gości i zapobiegnie utracie starych.