• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создаем градиентный фон на странице сайта (Как сделать фоновый линейный градиент при помощи CSS)
Создаем градиентный фон на странице сайта
Kosten
Пятница, 11 Октября 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
В этой статье узнаете, как создать фон с двумя оттенками цвета, где будет красивый переход. Так как иногда бывает, что нужно выстроить плавный переход от одной палитры цвета, что задали в стилях CSS к другому, что будет происходить через промежуточные цвета.

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

В стилях находим min-height: 100vh, что отвечает за параметры, но хотя при проверке убирал, и все аналогично по фону оставалось на месте, но здесь все же оставлю.

На выходе так получится:



Код
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-image: linear-gradient(125deg,#0b4ee2,#d81088);
}

Также есть и другие варианты, но этот считаю самым простым и доступным.
Прикрепления: 1432138.jpg (4.3 Kb)
Страна: (RU)
Kosten
Пятница, 11 Октября 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
Это простой фрагмент, чтобы сделать градиентный фон на всю страницу с помощью CSS. Где кратчайшие сроки вы можете реализовать свои собственные CSS-градиенты в качестве фоновых изображений на своем сайте.

Код
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   body {
    /* Градиент */
    background: linear-gradient(#580f54, #c59b12) fixed;
}
   div {
    width: 70%; /* Ширина */
    margin: auto; /* Выравниваем по центру */
    min-height: 2000px; /* Минимальная высота */
  
   }
  </style>
</head>
<body>
  <div></div>
</body>
</html>



See the Pen
Градиент на 2 оттенка цвета
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создаем градиентный фон на странице сайта (Как сделать фоновый линейный градиент при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: