ZorNet.Ru — сайт для вебмастера » HTML и CSS » Цветной фон сайта с помощью градиента

Цветной фон сайта с помощью градиента

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

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

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

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

Приступаем:

HTML

Код

<h1>ZorNet.Ru</h1>

CSS

Код

:root {
  background-color: #1677b7;
  background: -webkit-linear-gradient(235deg, #53b556 29.9%, #206898 80%), -webkit-linear-gradient(146deg, rgba(243, 89, 41, 0.4) 24.9%, #ab344e 91%), -webkit-linear-gradient(80deg, #a8c5d8 19.9%, #31729c 50%), -webkit-linear-gradient(305deg, #e4cf18 15.9%, #e01b89 40%);
  background: linear-gradient(215deg, #63a265 29.9%, #1e6ea2 80%), linear-gradient(304deg, rgba(255, 101, 53, 0.4) 24.9%, #881931 91%), linear-gradient(10deg, #8fb3ca 19.9%, #3887bb 50%), linear-gradient(145deg, #e4d86a 15.9%, #d2127d 40%);
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}
body {
  background: none;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 2em;
}
h1 {
  color: rgba(243, 234, 234, 0.2);
  font-size: 14vw;
  text-align: center;
  text-shadow: 0.02em 0.02em 0.02em rgba(23, 22, 22, 0.08);
  filter: drop-shadow(0.045em 0.045em 0.04em rgba(0, 0, 0, 0.21));
}

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

Источник: dbmast.ru
Демонстрация

08 Июня 2019 Загрузок: 1 Просмотров: 1080 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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