Уроки HTML+CSS: Градиент

30.05.201930.05.2019 ProgTime

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

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

Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента. Если направление не указано, используется значение по умолчанию — сверху-вниз. Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

Для создания градиента используют свойство background со значением linear-gradient.

background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);

Давайте для примера добавим градиентный фон для тестового элемента.

div {
   height: 200px;
   background: linear-gradient(45deg, #BE4E24, #C5DDE8);
}

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

to top – 0deg
to right – 90deg
to bottom – 180deg
to left – 270deg

div {
height: 200px;
background: linear-gradient(to left, #F6EF32, #CEAD42);
}

Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка, например:

div {
height: 200px;
background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);
}

Радиальный градиент

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

background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);

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

div {
height: 200px;
background: radial-gradient(40% 50%, #FAECD5, #CAE4D8);
}

Повторяющийся градиент

В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.

div {
height: 200px;
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

Вам также будет интересно

Magic Animations библиотека для добавления анимации на сайт

Autoptimize – плагин для оптимизации JavaScript и CSS

a3 Lazy Load – ленивая загрузка изображений для WordPress

Последние записи

Magic Animations библиотека для добавления анимации на сайт

Autoptimize – плагин для оптимизации JavaScript и CSS

a3 Lazy Load – ленивая загрузка изображений для WordPress

45
Оставить комментарий

новее старее большинство голосов

Гость

StepFoush

Cialis 20 Mg Efectos [url=http://apcialisle.com/#]Cialis[/url] Cialis 20 Buy Cialis Zithromax Typhoid Fever

Гость

StepFoush

Antibiotics Amoxicillin Resistant Bacteria [url=https://apcialisle.com/#]buy cialis online with a prescription[/url] Levitra Prices 20 Gm Free Delivery Cialis Medicament Lioresal