404 Hata Sayfaları artık bir web sitesinin ayrılmaz bir parçası ve önemli bir unsuru gibi görünüyor. Bu sayfanın kullanıcılar arasında bu kadar popüler olduğu gerçeğini göz önüne alarak, geliştiriciler, onu kullanıcı deneyimini bozmayan, aksine gelen ziyaretçiyi siteye geri bağlamanın bir yolunu buldular.
Sonuç olarak, günümüzde hata sayfaları sadece “Hata” olan ve daha fazlası olmayan beyaz ekranlar değildir; işlevsel, eğlenceli ve ilgi çekicidirler. Ve bu tür sayfaların tüm potansiyelini tam olarak tanıyan web sitesi sahiplerinden biriyseniz, size yardım etmek için buradayız. Burada fantastik html/css kodları ile bir düzine resimli 404 hata sayfası listeledik. Sadece küçük değişikliklerle, kullanıcılarınızı hayal kırıklıklarından kurtarmak için kolayca herhangi bir projeye uyarlanabilir. Seçimimizi iki bölüme ayırdık. Bunlardan ilki saf HTML / CSS çözümlerini, ikincisi ise JavaScript ile yüklenen kavramları içermektedir.
Saf HTML / CSS Kodları ile 404 Sayafaları
Herhangi bir uzman yardımı olmadan HTML ve CSS'nin sihir yapamayacağına hala inananlardan biriyseniz, burada akıllara durgunluk veren bazı örneklerimiz olduğundan şaşırmaya hazır olun. 404 Page by Darin ile başlayalım.
Bu konsept sadece fantastik resimlemesiyle kendisini rakiplerinden ayırmakla kalmıyor, aynı zamanda Yeti'nin 404 işaretini vurgulamak için el fenerini açıp kapamasını sağlayan dinamik bir davranışla da sunuluyor. Kullanıcıların kalmasını ve ayrılmamasını sağlamanın etkili bir yolu değil mi?
JavaScript'ten yardım almadan yapılan 404 sayfanın istisnai bir örneği, 404 page animation – missing book by Valeriya. Valeriya mükemmel bir iş çıkarmış. Hata sayfası vizyonu çok zekice. Kullanıcılara geçerli bir çıkış yolu sağlayan açıklayıcı yaklaşım ve pragmatizm birleşimidir.
Paolo Duzioni seyirciyle minimalist fikrini paylaştı. Bu long walk 404 kodu, düzgün, temiz bir görünüm sunar. Ne diyorsa onu yapar: Kullanıcıların kaybolduklarını bildirir. Sayfanın altındaki küçük yürüyen adam da dikkat çeker.
404 – Tridiv by Nico van Zyl, Paolo Duzioni'nin konseptiyle aynı estetiğe sahiptir. Ancak, bu kez sanatçı 3d-boyut seçti ve 404 işaretini kelimenin tam anlamıyla ve mecazi olarak öne çıkardı.
Önceki örnekler biraz düz ve renksiz geldiyse, Error 404 by Sussie Casasola gibi tamamen resimli çözümler kullanabilirsiniz. Konsepti tek kelimeyle harika görünüyor: gradyan arka planı olağanüstü, parlayan halkalar doğal olarak dikkat çekiyor ve 404 işareti iyi bir şekilde sıra dışı.
İşleri biraz renklendirmek için biraz JavaScript büyüsü ekleyelim.
HTML / CSS ve JavaScript Kodları ile 404 Hata Sayfaları
Error 404 Page With Astronaut by Filip Vitas ve 404 page by Chris Samuels, Sussie Casasola'nın projesinden farklı sanatsal havası var. İlk kod parçacığı kozmik temanın etrafında merkezlenirken, ikincisi de güzelliğini deniz olanından alır. Her iki resim de şaşırtıcı ve her iki resim de ustalıkla harekete geçiyor. Ve bu hareket zar zor algılanabilse de, gösterimi bir sonraki seviyeye taşımak yeterlidir.
Animated 404 Page by Susan Lee önceki iki örnek kadar süslü değil. Bununla birlikte, kesinlikle sanatsal bir havası var. İnanılmaz geometrik çekiciliği ile dikkat çekiyor ve bu temel parçayı harika kılan bazı küçük efektlerle geliştiriliyor.
Retro Error 404 by Stix, Zelda 2 adlı destansı bir maceradan bir sahneden başka bir şey değildir; Miles Peebles ise Mario'yu andırıyor.
404 Page by Jinu, 2016'da yapılmış bir hata sayfası pasajıdır, ancak bugünlerde bile güzel görünmesini engellemez. Dahası, işlevsel ve pratiktir. Ustaca yapılmış 404 hatası dışında, bir menü ve hatta bir çerez bildirimi de var.
Ve son olarak, 404 Page by Chase Allbee. Herkesin bu karanlık ve esrarengiz konseptte Duffer Brothers'ın başyapıtı için bir giriş. TV dizisinde olduğu gibi, Demogorgan'ın istediği sayfayı yıkıp yediği Upside Down World'e sahip.
Sonuç
HTML ve CSS'nin şu andaki durumu, geliştiricilerin sihir yapmasını sağlar. Ve eğer bu çift JavaScript ile eklemlenirse, sonuç daha da ilham verici ve heyecan verici olacaktır. Kural olarak gözden kaçan 404 hata sayfası, HTML, CSS ve JavaScript birliğinden fayda sağlamak için mükemmel bir yerdir. Menü bağlantıları olmasa bile tamamen resimli çözümler, kullanıcıların uzaklaşmasını engelleyen sistemler yapar.