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?

404 Page by Darin

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.

404 sayfası için animasyon - Valeriya

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.

uzun yürüyüş

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ı.

404 – Tridiv by Nico van Zyl

Ö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ışı.

Error 404 by Sussie Casasola

İş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.

Error 404 Page With Astronaut by Filip Vitas

404 page by Chris Samuels

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.

Animated 404 Page by Susan Lee

Şimdi biraz eskiye gidelim ve Retro Error 404 by Stix ve 404 by Miles Peebles 404 hata sayfalarını inceleyelim.

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.

Retro Error 404 by Stix

404 by Miles Peebles

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.

404 Page by Jinu

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.

404 Page by Chase Allbee

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.

Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?
Daha önce bu yazı 0 kez değerlendirilmiş ve ortalama 0 yıldız verilmiş.
Bu yazı daha önce 57 kez okundu.

Bu yazıyı beğendiniz mi? Haber bültenimize katılarak buna benzer yeni yazılardan haberdar olun!

Açılacak sayfada "Ben robot değilim" işaretleyip "Complete Subscription Request" yazan butona tıklayınız!

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!

Yorum Yaz

" 404 Hata Sayfaları için Örnek HTML / CSS Kodları konulu makalemizde Ogznet.com olarak sizlere 404 Hata Sayfaları için Örnek HTML / CSS Kodları ile ilgili bilgiler aktarmak istedik. Hemen yukarıda 404 Hata Sayfaları için Örnek HTML / CSS Kodları ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "