Живые обои ошибка 404

CSS3, SVG
31.03.2022

Cписок с некоторыми из лучших анимированных страниц 404

54 креативных страниц с ошибкой 404 с классной анимацией!

Если вы вызываете страницу, которой (больше) не существует, вы перенаправляетесь на страницу 404. Но это неплохо, потому что страницы 404 могут творить чудеса, если проявить немного творчества, чтобы посетители не покидали ваш сайт.

Страницы 404 называются так, потому что в случае, если страница не найдена или больше не существует, сервер возвращает код состояния 404, чтобы показать, что запрошенная страница больше не существует.

Примеры можно использовать в качестве шаблона или в качестве примера для вашего собственного сайта, и давайте будем честными… страницы 404 — лучшие! 🤣 Вы можете найти больше информации о собственном использовании на сайте Codepen.

И так рассмотрим все собранные мной примеры анимированых 404 страниц:

1. Mars 404 Error Page

2. Dripping paint 404 page | Анимация SVG

3. CSS 404 page

4. 404 animation

5. 404 — new

6. 404 — animation

7. Error Page

8. Ark 404 animation

9. 404 Animation

10. 404 Animation

11. Neon 404 — CSS only(Static)

12. 404 svg animated концепция страницы для интернет-магазина

13. Darkmode animation | 404

14. 404 error page

15. Text Wave Animation (404 not found)

16. GSAP: SVG Animation 404 Error Milk Carton)

17. Error 404 Page With Astronaut

18. MJ 404 in Pure CSS

19. 404 error page, Caveman mode — pure CSS

20. Space 404 (pure CSS)

21. StevenGFX Robot 404 Error

22. Weight a Minute — Error 404

23. 404 Page

24. 404 Page

25. Css only 404 Crying Baby

26. 404 Frog

27. Yeti 404 Page

28. 404 Error Example #2

29. 404 Page

30. CSS Train 404 Page

31. Error Page

32. 404 — SVG Animation

33. 404 Page SVG animation

34. 404 Error Page: Animated SVG GSAP

35. 404 Error page — Animated SVG

36. SVG Animation 404 page

37. 404

38. Animated Error page — #Project4

39. 404 Error Page

40. Fargo 404

41. 404 Error Page

42. 404 magnifying glass SVG animation CSS

43. Error 404 bulb SVG animation CSS smil

44. 404 animation CSS Javascript Mousemove

45. Tractor Pull 404 Error

46. Space 404

47. «Lost in Space» — 404 Error

48. «Lost in Space» — 404 Error

49. 404 Page Not Found

50. Challenge: 404 page

51. 404 — Glitched out

52. 404 No signal

53. Neon — 404 Page Not Found

54. Glitchy 404 Page

Надеюсь, вам понравилось! Пользуйтесь!

---

Статьи по теме

If you call up a page that does not (no longer) exist, you are redirected to 404 pages. But that’s not bad, because 404 pages can work wonders with a little creativity, so that visitors don’t leave your site.

404 pages (or Error Page) are so called because servers return the HTTP status code 404 in case of a non-existent or no longer existing page to show that the requested page does not (no longer) exist.

A creative way with funny animations, designs and fun images often a good way to keep visitors on the go – that is, to make them not leave your website. In this course it is also important to give users the possibility to go directly to another subpage on your website (be sure to check out my 404 page). Also responsive pages have to look good, of course.

The pens can be used as a template template or as examples for your own site, let yourself be inspired! And let’s be honest…404 jokes are the best! ?

The shown pens are licensed with MIT. You can find more information about your own use in the Codepen Blog.

#1 Responsive 404 Stranger things

Author: ARiyou Jahan;
Coded in: HTML, CSS (SCSS);

#2 No Vacancy 404

Author: Riley Shaw;
Coded in: Slim, Sass, CoffeScript;

#3 404 Kittens

Author: nclud team;
Coded in: HTML, CSS (SCSS), JS;

#4 – Glitched out

Author: ZonFire99;
Coded in: HTML, CSS, JS;

#5 Fargo 404

Author: Nathaniel Watson;
Coded in: Pug, CSS (SCSS), JS;

#6 404 No signal

Author: Adem ilter;
Coded in: HTML, CSS, JS;

#7 Glitchy 404 Page

Author: Kay Pooma;
Coded in: HTML, CSS;

#8 Bluescreen – 404 Page

Author: Angela Galliat;
Coded in: HTML, CSS;

#9 404 Space

Author: Keith;
Coded in: HTML, CSS (SCSS), JS;

#10 Error page – #Project 4

Author: Jake;
Coded in: HTML, CSS (SCSS), JS;

#11 404

Author: Metty;
Coded in: HTML, CSS, JS;

#12 Space 404

Author: Ethan;
Coded in: HTML, CSS (SCSS), JS;

#13 404 Error Page

Author: anhat.dev;
Coded in: HTML, CSS, JS;

#14 Daily UI #008 – 404 Page

Author: Rafaela Lucas;
Coded in: HTML, CSS (SCSS), JS;

#15 Lost in Space (ERRORS) (not responsive)

Author: Radu;
Coded in: HTML, CSS (SCSS);

#16 404 Page Not Found

Author: João Sousa;
Coded in: HTML, PostCSS;

#17 404 Error Page

Author: miranda;
Coded in: HTML, CSS;

#18 404 Error page

Author: Abolfazl Arab;
Coded in: HTML, CSS;

#19 404 Makes bear sad ??

Author: Jhey;
Coded in: Pug, Stylus, Babel;

#20 404-magnifying-glass-svg-animation-css

Author: Maelle Gomez;
Coded in: HTML, CSS;

#21 en 404 page

Author: Arman Azizpour;
Coded in: HTML, CSS;

#22 404 Venn Diagram

Author: Michael Richins;
Coded in: HTML, CSS (SCSS);

#23 Tractor Pull 404 Error

Author: Nick Soltis;
Coded in: HTML, CSS (SCSS);

#24 Neon – 404 Page Not Found

Author: Tibix;
Coded in: HTML, CSS;

#25 8-bit mario 404

Author: JFabre;
Coded in: HTML, CSS (SCSS), Babel;

Conclusion

As you can see, there are no limits to your creativity. Which one do you like best, or have you perhaps become creative yourself? Please let me know! And maybe your 404 page will appear here soon. 🙂

Not enough? Then this could be something for you!

• Cool CSS Buttons
• CSS Navigation Menus
• CSS Hamburger Menus
• Satisfying CSS Animations
• Inspiring loading animations

Note: All pens are published on codepen.io and not by me.

Просматривая в сити в поисках материала, то пользователь вероятно попадал на страницу 404, которая в обязательном порядке должна быть на сайте. Вашему вниманию анимированная страница, которая идет в оригинальной анимации, где при открытии ее происходит эффект. Вы можете поставить как на светлый или на темный сайт, ведь все отлично редактируется.

Она представлена в простом виде, где нет функций для перехода на главную сайта или на любой закрепленный модуль. Здесь вы уже сами можете поставить нужные ссылки или все красиво оформить, и все получится в оригинальном виде. Как раз в этом материале как можно подробно разберём.

А это, что за собой несет 404 ошибка, и каким обзором она появляется. Здесь все просто и логично, ведь иногда веб-разработчик удаляем материал, а ссылка на его какое-то время остается в поисковой системе. Так вот эта страница будет появиться на удаленном материале.

Приступаем к установке:

Подключаем библиотеку, если у вас конструктор uCoz, то не нужно делать.

.lasun-format-container <
width: 1150px;
margin: 0 auto;
>
.js-lasun-hide <
display: none;
>
.lasun-page-404 <
padding: 100px 0 0;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/toaster-bg.png) no-repeat 50% 100%;
>
.lasun-canvas-404_img <
display: none;
>
.lasun-canvas-404 <
opacity: .8;
filter: alpha(opacity=70);

z-index: -1;
position: absolute;
left: 0;
top: 0;
>
.lasun-magelonabouculad-wrap <
display: table;
margin: 0 auto;
padding: 198px 0 0;

position: relative;
>
.lasun-magelonabouculad <
width: 338px;
height: 218px;

position: relative;
>
.lasun-magelonabouculad_toast-handler <
width: 160px;
height: 198px;
margin-left: 87px;
padding-top: 59px;

z-index: 1;
position: absolute;
top: -150px;
>
.lasun-magelonabouculad_shadow <
width: 164px;
height: 9px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sprite-toaster.png) -338px -197px no-repeat;

position: absolute;
left: 0;
bottom: 91px;
>
.lasun-magelonabouculad_toast <
width: 159px;
height: 171px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sprite-toaster.png) -338px 0 no-repeat;

z-index: -1;
position: relative;
>
.lasun-magelonabouculad_front <
width: 340px;
height: 217px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sprite-toaster.png) 0 -18px no-repeat;

z-index: 2;
position: relative;
>
.lasun-magelonabouculad_lever <
width: 22px;
height: 21px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sprite-toaster.png) -338px -171px no-repeat;

position: absolute;
top: 75px;
right: 12px;
>
.lasun-magelonabouculad_back <
width: 338px;
height: 17px;
background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/sprite-toaster.png) no-repeat;

z-index: -3;
position: relative;
>
@-webkit-keyframes an-bounce-in-up <
0% <
opacity: 0;

-webkit-transform: translateY(2000px);
transform: translateY(2000px);
>
60% <
opacity: 1;

-webkit-transform: translateY(-20px);
transform: translateY(-20px);
>
80% <
-webkit-transform: translateY(5px);
transform: translateY(5px);
>
100% <
-webkit-transform: translateY(0);
transform: translateY(0);
>
>
@-moz-keyframes an-bounce-in-up <
0% <
opacity: 0;

-moz-transform: translateY(2000px);
transform: translateY(2000px);
>
60% <
opacity: 1;

-moz-transform: translateY(-20px);
transform: translateY(-20px);
>
80% <
-moz-transform: translateY(5px);
transform: translateY(5px);
>
100% <
-moz-transform: translateY(0);
transform: translateY(0);
>
>
@-ms-keyframes an-bounce-in-up <
0% <
opacity: 0;
filter: alpha(opacity=0);

-ms-transform: translateY(2000px);
transform: translateY(2000px);
>
60% <
opacity: 1;
filter: alpha(opacity=100);

-ms-transform: translateY(-20px);
transform: translateY(-20px);
>
80% <
-ms-transform: translateY(5px);
transform: translateY(5px);
>
100% <
-ms-transform: translateY(0);
transform: translateY(0);
>
>
@-o-keyframes an-bounce-in-up <
0% <
opacity: 0;

-o-transform: translateY(2000px);
transform: translateY(2000px);
>
60% <
opacity: 1;

-o-transform: translateY(-20px);
transform: translateY(-20px);
>
80% <
-o-transform: translateY(5px);
transform: translateY(5px);
>
100% <
-o-transform: translateY(0);
transform: translateY(0);
>
>
@keyframes an-bounce-in-up <
0% <
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translateY(2000px);
-moz-transform: translateY(2000px);
-ms-transform: translateY(2000px);
-o-transform: translateY(2000px);
transform: translateY(2000px);
>
60% <
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
>
80% <
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
>
100% <
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
>
>
.js-lasun-animated <
-webkit-animation-duration: .6s;
-moz-animation-duration: .6s;
-ms-animation-duration: .6s;
-o-animation-duration: .6s;
animation-duration: .6s;

-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
>
.js-lasun-bounce-in-up <
-webkit-animation-name: an-bounce-in-up;
-moz-animation-name: an-bounce-in-up;
-ms-animation-name: an-bounce-in-up;
-o-animation-name: an-bounce-in-up;
animation-name: an-bounce-in-up;
>
@media only screen and (max-width: 767px) <
.lasun-format-container <
width: 96%;
>
>
@media (min-width: 768px) and (max-width: 979px) <
.lasun-format-container <
width: 750px;
>
>
@media (min-width: 980px) and (max-width: 1161px) <
.lasun-format-container <
width: 960px;
>
>

Идет demo страница, где все происходит на светлом фоне, но как можно заметить, что некоторые эффекты не сильно будет видно при аналогичном оттенке.

Источник

Анимированные 404 страницы в HTML и CSS

Думаю многим обидно, когда они попадают на 404 страницу ошибки, это значит материал удален или перемещен, где нет не какой информации для выхода. Так, чтоб можно было прямо с этой страницы выйти на сайт или на тот адрес, где страницы ранее была прервана. И не секрет, что поисковые системы требуют, чтоб все они корректно отражали, как информацию, там и дизайн на всех мобильных телефонах.

И здесь решил сделать небольшую подборку на страницы Not Found, которые по своей структуре просты, что некоторые также имеют интересную анимацию. Но главное, вы можете поставить кнопки или сделать ее адаптивной, что некоторые по умолчанию настроены на мобильные гаджет. Где сами по своему оформлению они могут подойти на разные тематические сайты, со своей интересной стилистикой по цветовой гамме.

В какой-то момент в сети интернет мы наткнулись на страницу 404 ошибку эта страница, что была ранее удалена, но в поиске запрос еще остался, где по нему и переходим на такую страницу. Если вы новичок в сети или опытный ветеран, они могут сбить вас с толку и расстроить.

Так почему они вообще существуют?

Ведь 404 страницы служат для предупреждения посетителя о том, что страница, которую он пытался найти, больше не существует, где иногда просто перенаправляют на другую часть вашего сайта. Довольно часто 404 страницы могут быть пропущены и обработаны как запоздалая мысль. Бесчисленные часы тратятся на ваш веб-сайт и контекстные страницы, которые его составляют, но когда наступает очередь страницы 404, легко использовать общий код ошибки, чтобы сэкономить время.

Простая CodePen Home 404 Страница не найдена

Где веб разработчик может самостоятельно добавить тот функционал, который будет соответствовать всем функциям для переходя или предоставление различной информации.

Страницы не найдена

@import url(‘https://fonts.googleapis.com/css?family=Ubuntu&display=swap’);
body <
background-image: url(http://zornet.ru/Abavaga/background.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
overflow: hidden;
font-family: ‘Ubuntu’, sans-serif;
>

.center <
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
text-align: center;
>
h1 <
font-size: 8em;
line-height: 0em;
>
h2 <
font-size: 4em;
>
#stars <
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
>
#stars .star <
width: 1px;
height: 1px;
background: white;
top: 10px;
left: 10px;
position: absolute;
border-radius: 100%;
animation-name: shine;
animation-duration: 5s;
animation-iteration-count: infinite;
opacity: 0;
>
@keyframes shine <
0%
50%
100%
>

На этом все, файл JS нужен здесь, чтоб получилось красивое звездное небо.

404 Страница не найдена на заданном сайте

Страница не найдена.

Мы искали высоко и низко.

.error-contain <
position: absolute;
height: 350px;
width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: white;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
>
.error-text h1 <
font-size: 100px !important;
font-family: monospace;
margin: 0;
text-shadow: 1px 1px 1px #fff, -1px -1px 1px black;
>
.error-text <
text-align: center;
font-weight: bold;
>
.error-text p <
font-family: monospace;
font-size: 16px;
>
.error-text p:nth-child(3) <
margin-top: 150px;
>
.binoculars <
position: absolute;
top: 50%;
left: 50%;
transform: translate(-60%, 20%);
transition: 1s;
>
.binoculars <
/* animation-name: wiggle; */
animation-duration: 10s;
animation-delay: 5s;
animation-iteration-count: infinite;
>

.left-bino-lense, .right-bino-lense <
width: 45px;
height: 45px;
border-radius: 50%;
border: 5px solid black;
display: inline-block;
transform: skewX(-10deg);
background: white;
overflow: hidden;
position: relative;
>
.left-bino-lense <
margin-right: 10px;
>
.left-bino-lense::before, .right-bino-lense::before <
width: 20px;
height: 20px;
content: »;
display: block;
background: black;
position: absolute;
border: 3px solid #3066c9;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-70%,-55%);
animation-name: eye-move;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 3s;
>

.back-bino <
width: 70px;
height: 30px;
background: black;
position: absolute;
top: 23px;
left: 40px;
>
.left-bino, .right-bino <
position: absolute;
height: 100px;
width: 80px;
perspective: 80px;
transform: rotate(100deg);
right: -25px;
top: 1px;
>
.right-bino <
left: -1px;
>

.left-bino::after, .right-bino::after <
content: »;
padding: 21px;
padding-top: 45px;
position: absolute;
border: 1px solid black;
background: black;
transform-style: preserve-3d;
transform: rotateX(30deg);
border-radius: 30% 80% 0 0;
left: 1px;
top: -4px;
>

.left-bino-lense .eye <
width: 100%;
height: 100%;
>

.eye::before, .eye::after <
content: »;
display: block;
width: 45px;
height: 26px;
background: #f5cd8c;
position: absolute;
transition: 1s;
>
.eye::before <
border-radius: 50% 50% 0 0;
border-bottom: 2px solid #b88c44;
top: -30px;
animation-name: eye-up;
animation-duration: 3s;
animation-iteration-count: infinite;
>
.eye::after <
border-radius: 0 0 50% 50%;
border-top: 2px solid #b88c44;
bottom: -30px;
animation-name: eye-down;
animation-duration: 3s;
animation-iteration-count: infinite;
>

.binoculars:hover .eye::after <
bottom: -30px;
>
.binoculars:hover .eye::before <
top: -30px;
>

@keyframes wiggle <
0% <
transform: translate(-50%,-20%);
>
10% <
transform: skew(-20deg) translate(-50%,-20%) rotate(20deg);
>
30% <
transform: skew(20deg) translate(-50%,-20%) rotate(-20deg);
>
40% <
transform: translate(-50%,-20%);
>
50% <

@keyframes eye-move <
0% <
transform: translate(-70%,-55%);
>
10% <
transform: translate(-90%, -90%);
>
20% <
transform: translate(-60%, -110%);
>
30% <
transform: translate(-20%, -20%);
>
40% <
transform: translate(-60%, -0%);
>
50% <
transform: translate(-70%,-55%);
>
>

Как можно заметить, что на таком простом дизайне присутствует красивая анимация.

Пользовательская страница ошибки 404 с грустным лицом

Источник

CSS3, SVG
31.03.2022

Cписок с некоторыми из лучших анимированных страниц 404

54 креативных страниц с ошибкой 404 с классной анимацией!

Если вы вызываете страницу, которой (больше) не существует, вы перенаправляетесь на страницу 404. Но это неплохо, потому что страницы 404 могут творить чудеса, если проявить немного творчества, чтобы посетители не покидали ваш сайт.

Страницы 404 называются так, потому что в случае, если страница не найдена или больше не существует, сервер возвращает код состояния 404, чтобы показать, что запрошенная страница больше не существует.

Примеры можно использовать в качестве шаблона или в качестве примера для вашего собственного сайта, и давайте будем честными… страницы 404 — лучшие! 🤣 Вы можете найти больше информации о собственном использовании на сайте Codepen.

И так рассмотрим все собранные мной примеры анимированых 404 страниц:

1. Mars 404 Error Page

2. Dripping paint 404 page | Анимация SVG

3. CSS 404 page

4. 404 animation

5. 404 — new

6. 404 — animation

7. Error Page

8. Ark 404 animation

9. 404 Animation

10. 404 Animation

11. Neon 404 — CSS only(Static)

12. 404 svg animated концепция страницы для интернет-магазина

13. Darkmode animation | 404

14. 404 error page

15. Text Wave Animation (404 not found)

16. GSAP: SVG Animation 404 Error Milk Carton)

17. Error 404 Page With Astronaut

18. MJ 404 in Pure CSS

19. 404 error page, Caveman mode — pure CSS

20. Space 404 (pure CSS)

21. StevenGFX Robot 404 Error

22. Weight a Minute — Error 404

23. 404 Page

24. 404 Page

25. Css only 404 Crying Baby

26. 404 Frog

27. Yeti 404 Page

28. 404 Error Example #2

29. 404 Page

30. CSS Train 404 Page

31. Error Page

32. 404 — SVG Animation

33. 404 Page SVG animation

34. 404 Error Page: Animated SVG GSAP

35. 404 Error page — Animated SVG

36. SVG Animation 404 page

37. 404

38. Animated Error page — #Project4

39. 404 Error Page

40. Fargo 404

41. 404 Error Page

42. 404 magnifying glass SVG animation CSS

43. Error 404 bulb SVG animation CSS smil

44. 404 animation CSS Javascript Mousemove

45. Tractor Pull 404 Error

46. Space 404

47. «Lost in Space» — 404 Error

48. «Lost in Space» — 404 Error

49. 404 Page Not Found

50. Challenge: 404 page

51. 404 — Glitched out

52. 404 No signal

53. Neon — 404 Page Not Found

54. Glitchy 404 Page

Надеюсь, вам понравилось! Пользуйтесь!

---

Статьи по теме

Красная, мерцающая надпись «ERROR» (ошибка) на черном монотонном фоне. По левую сторону надписи то появляется, то исчезает красный, предупреждающий треугольный знак. Снизу расположена какая-то надпись на японском языке. Больше на обоях ничего нет.

Как установить видео обои для Wallpaper Engine

1. Для установки скачайте и распакуйте архив 1634002549.zip с помощь 7zip;
2. Переместите его содержимое в папку программы, которая по-умолчанию имеет следующий адрес: C:Program Files (x86)Steamsteamappscommonwallpaper_engineprojectsmyprojects. Но если Вы используете пиратку, путь может быть другой.
3. Примените обои в окне программы. Для этого выберите файл в списке и нажмите синюю кнопку «ОК». Или добавьте работу на лицензионную версию Wallpaper Engine, скачав оригинальную копию из мастерской Steam Workshop (уникальный идентификатор указан в файле project.json).

Некоторым эквалайзерам для корректной работы требуется один из дополнительных модулей: Audio Visualizer, Simplistic Audio Visualizer или Customizable Module Visualizer — установите их как обычные обои, методом распаковки в папку программы.

Для установки видео обоев (но не скриптов и сцен) можно воспользоваться альтернативным, в том числе абсолютно бесплатным софтом. Выберите один из вариантов, доступных здесь: программы для установки живых обоев.

Видео демонстрация

Содержимое архива

+ 1634002549
 - preview.gif
 - project.json
 - scene.pkg

Dribbble: the community for graphic design

Back to home page

• Inspiration

  Explore Design Work

  Trending designs to inspire you

  New & Noteworthy

  Up-and-coming designers

  Playoffs

  Work designers are riffing on

  Blog

  Interviews, tutorials, and more

  Weekly Warm-up

  Prompt to flex your design skills

  Browse Categories

  • Animation
  • Branding
  • Illustration
  • Mobile
  • Print
  • Product Design
  • Typography
  • Web Design
• Find Work

  Job Board

  Find your dream design job

  An exclusive list for contract work

  ---

  Want freelance design projects?

  Get new leads in your inbox every day

  Personalize your profile with video

  Introduce yourself to new clients with Pitch

• Learn Design

  Certified Product Design Course

  Learn product design in just 16 weeks…

  Introduction to UI Design

  Learn UI Design Basics and Figma Fundamentals…

  Design Systems Course

  Scale Design Systems in 8 weeks…

  Design Career Prep Course

  Land your dream job! You’ll have a career support specialist to review your portfolio…

  Browse our courses & workshops

  Level up your skills with our interactive courses and workshops…

• Go Pro

  For Designers

  Portfolio creation made easy

  For Freelancers

  Fresh leads in your inbox every day

  For Teams

  Build your team’s pipeline or profile

• Hire Designers

  Designer Search

  Find, contact, and hire designers

  List my Job Opening

  The #1 job board for creatives

  Post a Freelance Project

  Board for freelance & contract work

If you call up a page that does not (no longer) exist, you are redirected to 404 pages. But that’s not bad, because 404 pages can work wonders with a little creativity, so that visitors don’t leave your site.

404 pages (or Error Page) are so called because servers return the HTTP status code 404 in case of a non-existent or no longer existing page to show that the requested page does not (no longer) exist.

A creative way with funny animations, designs and fun images often a good way to keep visitors on the go – that is, to make them not leave your website. In this course it is also important to give users the possibility to go directly to another subpage on your website (be sure to check out my 404 page). Also responsive pages have to look good, of course.

The pens can be used as a template template or as examples for your own site, let yourself be inspired! And let’s be honest…404 jokes are the best! ?

The shown pens are licensed with MIT. You can find more information about your own use in the Codepen Blog.

#1 Responsive 404 Stranger things

Author: ARiyou Jahan;
Coded in: HTML, CSS (SCSS);

#2 No Vacancy 404

Author: Riley Shaw;
Coded in: Slim, Sass, CoffeScript;

#3 404 Kittens

Author: nclud team;
Coded in: HTML, CSS (SCSS), JS;

#4 – Glitched out

Author: ZonFire99;
Coded in: HTML, CSS, JS;

#5 Fargo 404

Author: Nathaniel Watson;
Coded in: Pug, CSS (SCSS), JS;

#6 404 No signal

Author: Adem ilter;
Coded in: HTML, CSS, JS;

#7 Glitchy 404 Page

Author: Kay Pooma;
Coded in: HTML, CSS;

#8 Bluescreen – 404 Page

Author: Angela Galliat;
Coded in: HTML, CSS;

#9 404 Space

Author: Keith;
Coded in: HTML, CSS (SCSS), JS;

#10 Error page – #Project 4

Author: Jake;
Coded in: HTML, CSS (SCSS), JS;

#11 404

Author: Metty;
Coded in: HTML, CSS, JS;

#12 Space 404

Author: Ethan;
Coded in: HTML, CSS (SCSS), JS;

#13 404 Error Page

Author: anhat.dev;
Coded in: HTML, CSS, JS;

#14 Daily UI #008 – 404 Page

Author: Rafaela Lucas;
Coded in: HTML, CSS (SCSS), JS;

#15 Lost in Space (ERRORS) (not responsive)

Author: Radu;
Coded in: HTML, CSS (SCSS);

#16 404 Page Not Found

Author: João Sousa;
Coded in: HTML, PostCSS;

#17 404 Error Page

Author: miranda;
Coded in: HTML, CSS;

#18 404 Error page

Author: Abolfazl Arab;
Coded in: HTML, CSS;

#19 404 Makes bear sad ??

Author: Jhey;
Coded in: Pug, Stylus, Babel;

#20 404-magnifying-glass-svg-animation-css

Author: Maelle Gomez;
Coded in: HTML, CSS;

#21 en 404 page

Author: Arman Azizpour;
Coded in: HTML, CSS;

#22 404 Venn Diagram

Author: Michael Richins;
Coded in: HTML, CSS (SCSS);

#23 Tractor Pull 404 Error

Author: Nick Soltis;
Coded in: HTML, CSS (SCSS);

#24 Neon – 404 Page Not Found

Author: Tibix;
Coded in: HTML, CSS;

#25 8-bit mario 404

Author: JFabre;
Coded in: HTML, CSS (SCSS), Babel;

Conclusion

As you can see, there are no limits to your creativity. Which one do you like best, or have you perhaps become creative yourself? Please let me know! And maybe your 404 page will appear here soon. 🙂

Not enough? Then this could be something for you!

• Cool CSS Buttons
• CSS Navigation Menus
• CSS Hamburger Menus
• Satisfying CSS Animations
• Inspiring loading animations

Note: All pens are published on codepen.io and not by me.

Эта оригинальная с анимацией страница 404 для сайтов служат для того, чтобы изначально предупредить гостей портала о том, что она была удалена. Где пользователи или персонал пытался найти материал, который еще какое то время остается в поисковых запросах. Вы можете на ней создать ссылку для того, чтобы перенаправить всех на другую часть вашего сайта, это делается для того, чтоб не потерять потенциального пользователя или покупателя на онлайн магазине. Но здесь у нас производиться чистая анимация, что отлично можно наблюдать на широком экране, но также на всех мобильных устройствах.

Так как она адаптивна или проще говоря резиновая, что не как не испортит картинку просмотра. Здесь нужно подчеркнуть, что очень часто страницы 404 при открытие сразу закрывают, но здесь анимация, что в большинстве просто интересно посмотреть. На ваш веб-сайт и составляющие его страницы с контентом уходит бесчисленное количество часов, но когда настает очередь страницы 404, легко использовать общий код ошибки, чтобы сэкономить время.

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

CSS3, SVG
31.03.2022

Cписок с некоторыми из лучших анимированных страниц 404

54 креативных страниц с ошибкой 404 с классной анимацией!

Если вы вызываете страницу, которой (больше) не существует, вы перенаправляетесь на страницу 404. Но это неплохо, потому что страницы 404 могут творить чудеса, если проявить немного творчества, чтобы посетители не покидали ваш сайт.

Страницы 404 называются так, потому что в случае, если страница не найдена или больше не существует, сервер возвращает код состояния 404, чтобы показать, что запрошенная страница больше не существует.

Примеры можно использовать в качестве шаблона или в качестве примера для вашего собственного сайта, и давайте будем честными… страницы 404 — лучшие! 🤣 Вы можете найти больше информации о собственном использовании на сайте Codepen.

И так рассмотрим все собранные мной примеры анимированых 404 страниц:

1. Mars 404 Error Page

2. Dripping paint 404 page | Анимация SVG

3. CSS 404 page

4. 404 animation

5. 404 — new

6. 404 — animation

7. Error Page

8. Ark 404 animation

9. 404 Animation

10. 404 Animation

11. Neon 404 — CSS only(Static)

12. 404 svg animated концепция страницы для интернет-магазина

13. Darkmode animation | 404

14. 404 error page

15. Text Wave Animation (404 not found)

16. GSAP: SVG Animation 404 Error Milk Carton)

17. Error 404 Page With Astronaut

18. MJ 404 in Pure CSS

19. 404 error page, Caveman mode — pure CSS

20. Space 404 (pure CSS)

21. StevenGFX Robot 404 Error

22. Weight a Minute — Error 404

23. 404 Page

24. 404 Page

25. Css only 404 Crying Baby

26. 404 Frog

27. Yeti 404 Page

28. 404 Error Example #2

29. 404 Page

30. CSS Train 404 Page

31. Error Page

32. 404 — SVG Animation

33. 404 Page SVG animation

34. 404 Error Page: Animated SVG GSAP

35. 404 Error page — Animated SVG

36. SVG Animation 404 page

37. 404

38. Animated Error page — #Project4

39. 404 Error Page

40. Fargo 404

41. 404 Error Page

42. 404 magnifying glass SVG animation CSS

43. Error 404 bulb SVG animation CSS smil

44. 404 animation CSS Javascript Mousemove

45. Tractor Pull 404 Error

46. Space 404

47. «Lost in Space» — 404 Error

48. «Lost in Space» — 404 Error

49. 404 Page Not Found

50. Challenge: 404 page

51. 404 — Glitched out

52. 404 No signal

53. Neon — 404 Page Not Found

54. Glitchy 404 Page

Надеюсь, вам понравилось! Пользуйтесь!

---

Статьи по теме

CSS3, SVG
31.03.2022

Cписок с некоторыми из лучших анимированных страниц 404

54 креативных страниц с ошибкой 404 с классной анимацией!

Если вы вызываете страницу, которой (больше) не существует, вы перенаправляетесь на страницу 404. Но это неплохо, потому что страницы 404 могут творить чудеса, если проявить немного творчества, чтобы посетители не покидали ваш сайт.

Страницы 404 называются так, потому что в случае, если страница не найдена или больше не существует, сервер возвращает код состояния 404, чтобы показать, что запрошенная страница больше не существует.

Примеры можно использовать в качестве шаблона или в качестве примера для вашего собственного сайта, и давайте будем честными… страницы 404 — лучшие! 🤣 Вы можете найти больше информации о собственном использовании на сайте Codepen.

И так рассмотрим все собранные мной примеры анимированых 404 страниц:

1. Mars 404 Error Page

2. Dripping paint 404 page | Анимация SVG

3. CSS 404 page

4. 404 animation

5. 404 — new

6. 404 — animation

7. Error Page

8. Ark 404 animation

9. 404 Animation

10. 404 Animation

11. Neon 404 — CSS only(Static)

12. 404 svg animated концепция страницы для интернет-магазина

13. Darkmode animation | 404

14. 404 error page

15. Text Wave Animation (404 not found)

16. GSAP: SVG Animation 404 Error Milk Carton)

17. Error 404 Page With Astronaut

18. MJ 404 in Pure CSS

19. 404 error page, Caveman mode — pure CSS

20. Space 404 (pure CSS)

21. StevenGFX Robot 404 Error

22. Weight a Minute — Error 404

23. 404 Page

24. 404 Page

25. Css only 404 Crying Baby

26. 404 Frog

27. Yeti 404 Page

28. 404 Error Example #2

29. 404 Page

30. CSS Train 404 Page

31. Error Page

32. 404 — SVG Animation

33. 404 Page SVG animation

34. 404 Error Page: Animated SVG GSAP

35. 404 Error page — Animated SVG

36. SVG Animation 404 page

37. 404

38. Animated Error page — #Project4

39. 404 Error Page

40. Fargo 404

41. 404 Error Page

42. 404 magnifying glass SVG animation CSS

43. Error 404 bulb SVG animation CSS smil

44. 404 animation CSS Javascript Mousemove

45. Tractor Pull 404 Error

46. Space 404

47. «Lost in Space» — 404 Error

48. «Lost in Space» — 404 Error

49. 404 Page Not Found

50. Challenge: 404 page

51. 404 — Glitched out

52. 404 No signal

53. Neon — 404 Page Not Found

54. Glitchy 404 Page

Надеюсь, вам понравилось! Пользуйтесь!

---