Пример простой и красивой страницы 404/422/500 ошибки на HTML и CSS

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

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

Начнем с создания файлов:

css/styles.css
error_example.html

Перейдем в файл error_example.html и начнем работу над HTML5 разметкой страницы:

<!doctype html>

  <html lang="ru">

  <head>
  </head>

  <body>
  </body>

</html>

Эта базовая структура подходит для создания веб-страницы. Далее мы добавим наиболее важные элементы в head страницы.

<!doctype html>

  <html lang="ru">

  <head>
    <meta charset="utf-8">
    <title>404</title>
    <meta name="description" content="Не найдено">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/favicon.png" type="image/png">
    <link rel="stylesheet" href="css/styles.css">
  </head>

  <body>
  </body>

</html>

Мы обозначили кодировку страницы utf-8.
Добавили title, который будет отображаться во вкладке браузера.
Указали description страницы, который описывает ее суть.
Используем viewport, который необходим для масштабируемости (адаптивности) страницы.

Если обратить внимание - все добавленные мета-теги также являются базовыми в структуре HTML-страницы. Все что относится к странице ошибки - это контент, который мы добавляем внутрь тегов title и description.

Перейдем к содержимому body страницы ошибки и добавим:

<div class="overlay">
  <div class="bottom">
    <h1>404</h1>
    <p>Перейти на <a href="#">главную</a></p>
  </div>
</div>

Текущая структура подразумевает, что внизу нашей страницы будет заголовок (код ошибки) и ссылка на главную страницу сайта. Эти элементы обернуты в элемент, который мы прижмем вниз страницы при помощи CSS-стилей.

Также мы имеем блок overlay, который мы будем использовать для затемнения фона. Например, если мы захотим добавить изображение в качестве фона (на весь экран) - трюк с затемнением поможет тексту внизу страницы быть видимым и не сливаться с изображением.

Стили для страницы:

body, html {
  color: #ffffff;
  font-family: monospace;
  height: 100%;
  margin: 0;
}

body {
  height: 100%;
}

a {
  color: #ffffff;
  display: inline-block;
  margin: 10px 0;
}

h1 {
  box-sizing: border-box;
  margin: 10px 0;
}

.overlay {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.bottom {
  bottom: 30px;
  position: absolute;
  text-align: center;
  width: 100%;
}

Стили довольно простые и все что мы тут делаем - позиционируем элементы, меняем цвет фона и текста.

Для универсальности шаблона этой страницы (для использования картинок или GIF'ок в качестве полноэкранного фона) - добавим еще несколько атрибутов в файл стилей:

body {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

Добавить фон можно через инлайновые стили или непосредственно в CSS-файл.

HTML:

<body style="background-image:url('../images/backgrounds/bg.png');">

CSS:

body {
  background-image:url('../images/backgrounds/bg.png');
}

Аналогично и с цветом:

DEMO с цветом в качестве фона

HTML:

<body style="background-color: #282D3C;">

CSS:

body {
  background-color: #282D3C;
}

Для демонстрационной версии с фоновым изображением использовался API от Unsplash, который позволяет по URL (можно задать некоторые параметры) получать случайное изображение.

DEMO с фоновым изображением получаемое через Unsplash API

Для демонстрационной версии c GIF'кой в качестве фона предполагалось использование GIPHY API, но для его использования необходим ключ. Поэтому для простоты была использована прямая ссылка на GIF-анимацию.

DEMO с GIF'кой на фоне

Если подытожить - данная заметка полезна не только для создания страниц ошибок, но и любых других, где необходимо сделать при помощи HTML/CSS фон (картинка/анимация/цвет) на всю страницу.

Весь код доступен на GitHub и совершенно бесплатен. При использовании контента (картинок/анимаций) - незабывайте публиковать обратные ссылки на их авторов.

HTML CSS

brnnkt FullStack Developer Опубликовано 8 месяцев назад