ZorNet.Ru — сайт для вебмастера » HTML и CSS » Ошибка страницы 404 TV при помощи CSS

Ошибка страницы 404 TV при помощи CSS

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

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

Иногда нужно удалить информацию и вместо ее остается запрос в поисковой системе, где какое то время будет отображаться. Вот под него строится такая страница, и на первом месте стоит оформление.

Сам оттенок цвета вы самостоятельно в стилистике можете поставить.

Как пример, сделаем ящик гламурным:

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

HTML

Код

CSS

Код

.statunders-necesag {
  position: absolute;
  left: 0;
  top: 95px;
  right: 0;
  bottom: 0;
  width: 431px;
  height: 238px;
  box-sizing: border-box;
  padding: 10px;
  border-right: 80px solid #ea9954;
  border-top: 30px solid #e2924e;
  border-left: 30px solid #da9051;
  border-bottom: 30px solid #bf7e47;
  border-radius: 20px;
  margin: auto;
  background-image: linear-gradient(to bottom, rgba(241, 237, 237, 0.15), rgba(23, 21, 21, 0.45)), linear-gradient(to right bottom, rgba(236, 235, 235, 0), rgba(236, 233, 233, 0.15) 50%, rgba(234, 229, 229, 0) 50%, rgba(239, 236, 236, 0));
  background-color: #666;
  box-shadow: 0 0 50px rgba(206, 206, 202, 0.3), inset 0px 0px 30px rgba(222, 222, 222, 0.3);
  animation: light .2s linear infinite;
}

.statunders-necesag::before {
  position: absolute;
  content: '404';
  font-family: 'Bungee Inline';
  text-shadow: 2px 2px #000;
  width: 50px;
  height: 20px;
  left: 30px;
  top: 20px;
  font-size: 100px;
  white-space: pre;
  color: white;
  opacity: 1;
  animation: fade 1s linear infinite;
}

.statunders-necesag::after {
  content: '__\A__\A__';
  font-size: 38px;
  font-weight: bold;
  position: absolute;
  color: #614126;
  right: -58px;
  top: 100px;
  white-space: pre;
  line-height: 10px;
}

.kadvertisemen {
  position: absolute;
  width: 30px;
  right: -50px;
}

.kadvertisemen::before {
  content: '⚇';
  position: absolute;
  color: #db9356;
  font-size: 30px;
  background-color: #614126;
  border: 1px solid transparent;
  border-radius: 30px;
  top: 10px;
}

.kadvertisemen::after {
  content: '⚇';
  position: absolute;
  color: #db9356;
  font-size: 28px;
  top: 57px;
  left: 3px;
  transform: rotate(60deg);
  background-color: #614126;
  border: 1px solid transparent;
  border-radius: 25px;
}

.davomotions {
  position: absolute;
  width: 100px;
  height: 40px;
  background-color: #dc904f;
  margin: auto;
  top: -70px;
  left: 80px;
  border-top-left-radius: 47px;
  border-top-right-radius: 47px;
}

.davomotions::before {
  content: '\|';
  color: #614126;
  font-size: 100px;
  position: absolute;
  top: -90px;
  transform: rotate(-30deg);
}

.davomotions::after {
  content: '\|';
  color: #614126;
  font-size: 100px;
  transform: rotate(30deg);
  position: absolute;
  top: -90px;
  left: 75px;
}

@keyframes fade {
  0%,100% { opacity: 0.5 }
  50% { opacity: 0.7 }
}

@keyframes light {

  0%, 100% { opacity: 0.8 }
  50% { opacity: 1 }

}

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

Демонстрация

15 Ноября 2018 Просмотров: 804 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0