38 подписчиков
Привет, друзья!
Сегодня мы затронем одну из самых ярких и интересных тем в оформлении — это градиенты.
Что такое градиент?
Градиент (gradient) — это плавный переход между двумя и более цветами. В HTML и CSS градиенты можно использовать как фоновое оформление, для кнопок, блоков, а иногда даже для текста — чтобы сделать дизайн живым и современным.
Есть несколько основных видов градиентов:
➖Линейный (linear-gradient): переход идёт по прямой линии — слева направо, сверху вниз или по диагонали.
➖Радиальный (radial-gradient): переход расходится от центра к краям (напоминает круг или овал).
➖Конический (conic-gradient): цвета «закручиваются» по кругу, похоже на циферблат.
Как обозначаются цвета?
В CSS цвета обычно указываются специальными кодами. Вот основные варианты:
➖HEX. Это «набор символов после решётки» — например, «#ff8a00» или «#e52e71». Такой формат состоит из цифр и букв и всегда начинается с «#».
➖RGB. Иногда можно встретить запись цвета в виде «rgb(255, 138, 0)». Здесь три числа — это пропорции красного, зелёного и синего цветов (Red, Green, Blue).
Как читать запись градиента?
Вот пример строки:
linear-gradient(90deg, #ff8a00 0%, #e52e71 100%);
linear-gradient — тип градиента.
90deg — направление (здесь слева направо).
#ff8a00 0% — первый цвет в начале перехода.
#e52e71 100% — второй цвет в конце перехода.
Можно использовать не только градусы, но и словесные значения:
linear-gradient(to right, #ff8a00, #e52e71);
Это тот же переход слева направо. А еще, мы просто перечислили цвета через запятую, не указывая проценты, и теперь браузер автоматически распределит цвета по всей длине блока.
Как создать свой градиент?
Можно воспользоваться сервисами вроде cssgradient.io или uigradients.com. Там всё наглядно — выбираете нужный вариант, копируете строку и вставляете в настройки стиля.
Как применить градиент к элементам на Геткурс?
1⃣ Если хотите окрасить фон всей страницы:
Добавляете на страницу блок CSS и вставляете свой градиент внутри фигурных скобок после background:
bodybackground: ВАШ ГРАДИЕНТ
Пример: body background: linear-gradient(to right, #ff8a00, #e52e71);
2⃣ Если хотите окрасить фон конкретного блока страницы:
Нажимаете у блока кнопку «Стиль» и переходите к подробным настройкам. Ставите ту же конструкцию, что и для всей страницы, только без body.
background: ВАШ ГРАДИЕНТ
Пример: background: linear-gradient(to right, #ff8a00, #e52e71);
3⃣ Если хотите окрасить кнопки:
.f-btn.btn background: ВАШ ГРАДИЕНТ
Если красите сразу все кнопки, то кладете конструкцию с градиентом в отдельный блок CSS как в примере с общим фоном.
Если хотите покрасить отдельную кнопку идете в подробные настройки блока и ставите стиль туда.
4⃣ Теперь самое интересное, окраска текста:
Для текста нужна особая «хитрость» — просто свойство background не сработает, так как по умолчанию текст останется обычного цвета, и окрасится его фон. Чтобы текст стал градиентным, используется другая комбинация CSS-свойств:
.f-text
background: ВАШ ГРАДИЕНТ
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
➖.f-text — обращение к тексту (если нужен заголовок, то меняете на .f-header).
➖background — задаёт градиент (именно для текста).
➖-webkit-background-clip: text; — обрезает градиент по контуру букв, то есть градиент «становится» текстом.
➖-webkit-text-fill-color: transparent; — делает цвет текста прозрачным, чтобы был виден только градиент.
➖ display: inline-block; — чтобы градиент...
2 минуты
29 апреля