• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как создать линейный градиент для фона (Установка фона и градиента с использованием css)
Как создать линейный градиент для фона
Kosten
Воскресенье, 05 Мая 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Давайте разберемся, как можно создать фон для сайта, который будет состоять полностью из градиентов, а значит он не в одну палитру идет. Эта получается красивая композиция, которая отлично настраивается по цветовой гамме, и все сделано на CSS3. Использование градиентов, объявленных в CSS, безусловно станет лучше для контроля и производительности, а это как оригинальность и загрузка страницы, что почти не чего по весу не будет нести.

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

Этот метод не требует дополнительных элементов HTML, и он работает во всех современных браузерах. Чтобы применить наше наложение градиента, будем использовать псевдоэлемент, где позиционируем оверлей, чтобы покрыть 100% ширину и высоту нашего баннера.

Градиенты идут фоновым изображением

При объявлении background-color свойства в CSS используются градиенты background-image. Это полезно несколькими способами, о которых мы поговорим позже. Сокращенное background свойство будет знать, что вы имеете в виду, если вы объявите одно или другое.

Код
.kilasmidekepad {
/* можно рассматривать как запасной вариант */
  background-color: red;

  /* будет "сверху", если браузер его поддерживает */
  background-image: linear-gradient(red, orange);

  /* они сбрасывают другие свойства, например background-position, но они знают, что вы имеете в виду */
  background: red;
  background: linear-gradient(red, orange);

}


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

Линейный градиент

Самый распространенный и полезный тип градиента - это linear-gradient(). градиентов может идти слева направо, сверху вниз или под любым выбранным вами углом.

Не объявляя угол, примет сверху вниз:



HTML - для всех версий

Код
<div class="kilasmidekepad">
</div>

CSS

Код
div {
    height: 100px;
    background-color: #e40d0d;
    background-image: linear-gradient( #e40f0f, #f7e563 );
}

Эти цвета разделенные запятыми, которые могут содержать тип цвета, который вы обычно используете: именованные цвета , rgba , hsla и так далее.

Чтобы сделать это слева направо, вы передаете дополнительный параметр в начале linear-gradient() функции, которая указывает направление направо:



CSS

Код
.kilasmidekepad {
    height: 100px;
    background-color: #e80b0b;
    background-image: linear-gradient( to right, #f50606, #f78327 );
}


Этот синтаксис будет работает и для углов, например если вы хотите, чтобы ось градиента начиналась в нижнем левом углу и переходила в верхний правый угол:



CSS

Код
div {
    height: 100px;
    background-color: #ff1212;
    background-image: linear-gradient( to top right, #fd1111, #ff933f );
}

Если бы этот прямоугольник был квадратным, угол этого градиента был бы 45°, но поскольку это не так, это не так. Если вы хотите убедиться, что это 45°, вы можете заявить:

Код
.kilasmidekepad {
  background-image:
    linear-gradient(
      45deg,
      red, #f06d06
    );
}

Вы не ограничены только двумя цветами, где на самом деле вы можете иметь столько цветов, разделенных запятыми, сколько захотите, как пример 4 оттенка:



Код
div {
    height: 100px;
    background-color: #e60d0d;
    background-image: linear-gradient( to right, #f90e0e, #fb7e1c, rgb(243, 243, 16), #0b9a0b );
}


Вы также можете указать, где вы хотите, чтобы какой-либо конкретный цвет. Это так называемые цветовые остановки, где бы хотели, чтобы желтый занимал большую часть пространства, но красный только в начале, вы можете сделать желтый color-stop:



CSS

Код
div {
    height: 100px;
    background-color: #e80909;
    background-image: linear-gradient( to right, #ca0d0d, #f1f111 10% );
}

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



Код
div {
    height: 100px;
    background-color: #ec0606;
    background-image: linear-gradient( to right, #f7f4b0, #f7f4ad 15%, #d5f398 15%, #d6f398 85%, #fbf8b0 85% );
}
Прикрепления: 6394111.png (6.0 Kb) · 8784511.png (1.6 Kb) · 7049727.png (9.5 Kb) · 8611311.png (6.1 Kb) · 1672912.png (1.6 Kb) · 0461808.png (2.7 Kb)
Страна: (RU)
Kosten
Понедельник, 06 Мая 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Также можно сделать так из 2 оттенков цвета, где самого элементарного градиента достаточно задать начальный и конечный цвета.

Linear-gradient

Код
HTML {
    height: 100%;
    background: linear-gradient(to top,#ef4d10, #fcff57);
}



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


Страна: (RU)
Kosten
Понедельник, 06 Мая 2019 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Линия градиента определяется центром окна, содержащего изображение градиента, и углом. Цвета градиента определяются двумя или более точками: начальной точкой, конечной точкой и между ними необязательными точками цветовой остановки.

Градиент под углом 45 градусов



Код
body {
  width: 100vw;
  height: 100vh;
}

body {
    background: linear-gradient(45deg, #ef0909, #0e0eec);
}
Прикрепления: 3671664.png (5.4 Kb)
Страна: (RU)
Kosten
Понедельник, 06 Мая 2019 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Функция CSS создает изображение, состоящее из постепенного перехода между двумя или более цветами по прямой линии. Его результатом является объект типа данных, который является особым видом.

Градиент , который начинается при 60% от градиента линии



Код
body {
    background: linear-gradient(135deg, #ea9f14, #f5a30e 60%, #0eecec);
}
Прикрепления: 0856698.png (6.4 Kb)
Страна: (RU)
Kosten
Понедельник, 06 Мая 2019 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
В этом примере используются многопозиционные цветовые остановки, причем смежные цвета имеют одинаковое значение цветового стопа, создавая полосатый эффект.

Градиент с многопозиционным цветом останавливается



Код
body {
    background: linear-gradient(to right, #ec0d0d 20%, #f1a00b 20% 40%, #e8e808 40% 60%, #0eaf0e 60% 80%, #1717dc 80%);
}
Прикрепления: 3623715.png (2.0 Kb)
Страна: (RU)
Kosten
Понедельник, 06 Мая 2019 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
По умолчанию цвета плавно переходят от цвета на одной цветовой остановке к цвету на последующей цветовой остановке, при этом средняя точка между цветами является половиной промежуточной точки между цветовыми переходами.

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

С правой стороны находится светло синий оттенок и идет по левую сторону, где постепенно становится белой или светлым оттенком.




HTML

Код
<ul>
    <li class="dsaxotu-bedopkan"></li>
  </ul>

CSS

Код
HTML {
  height: 100%;
  }
BODY {
  background: white;
  font: 16px/1.4 'Trebuchet MS', Verdana, sans-serif;
  }

UL {
  padding: 0;
  list-style: none;
}

LI {
  height: 20em;
  margin: 0 0 .7em;
  border-radius: 7px;
  color: #ececec;
  }

.dsaxotu-bedopkan {
    background: #67b9da linear-gradient(90deg, #ececec 30%, rgba(0, 0, 0, 0) 60% );
}
Прикрепления: 2751146.png (3.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как создать линейный градиент для фона (Установка фона и градиента с использованием css)
  • Страница 1 из 1
  • 1
Поиск: