| Kosten | Воскресенье, 05 Мая 2019, 01:43 | Сообщение 1 |
| Давайте разберемся, как можно создать фон для сайта, который будет состоять полностью из градиентов, а значит он не в одну палитру идет. Эта получается красивая композиция, которая отлично настраивается по цветовой гамме, и все сделано на 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% );
} | | Страна: (RU) |
| |
| Kosten | Понедельник, 06 Мая 2019, 01:58 | Сообщение 2 |
|
| Также можно сделать так из 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, 02:10 | Сообщение 3 |
|
| Линия градиента определяется центром окна, содержащего изображение градиента, и углом. Цвета градиента определяются двумя или более точками: начальной точкой, конечной точкой и между ними необязательными точками цветовой остановки.
Градиент под углом 45 градусов
Код body {
width: 100vw;
height: 100vh;
}
body {
background: linear-gradient(45deg, #ef0909, #0e0eec);
} | | Страна: (RU) |
| |
| Kosten | Понедельник, 06 Мая 2019, 02:13 | Сообщение 4 |
|
| Функция CSS создает изображение, состоящее из постепенного перехода между двумя или более цветами по прямой линии. Его результатом является объект типа данных, который является особым видом.
Градиент , который начинается при 60% от градиента линии
Код body {
background: linear-gradient(135deg, #ea9f14, #f5a30e 60%, #0eecec);
} | | Страна: (RU) |
| |
| Kosten | Понедельник, 06 Мая 2019, 02:15 | Сообщение 5 |
|
| В этом примере используются многопозиционные цветовые остановки, причем смежные цвета имеют одинаковое значение цветового стопа, создавая полосатый эффект.
Градиент с многопозиционным цветом останавливается
Код body {
background: linear-gradient(to right, #ec0d0d 20%, #f1a00b 20% 40%, #e8e808 40% 60%, #0eaf0e 60% 80%, #1717dc 80%);
} | | Страна: (RU) |
| |
| Kosten | Понедельник, 06 Мая 2019, 02:25 | Сообщение 6 |
|
| По умолчанию цвета плавно переходят от цвета на одной цветовой остановке к цвету на последующей цветовой остановке, при этом средняя точка между цветами является половиной промежуточной точки между цветовыми переходами.
Вы можете переместить эту среднюю точку в любую точку между двумя цветовыми остановками, добавив цветовую подсказку между двумя цветами, указав, где должна быть середина цветового перехода.
С правой стороны находится светло синий оттенок и идет по левую сторону, где постепенно становится белой или светлым оттенком.
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% );
} | | Страна: (RU) |
| |
