Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.
Линейни градиенти
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Най-важното за линейните градиенти в CSS
Линейният градиент в CSS се използва като обикновено фоново изображение и се задава на мястото на background-image. Той представлява плавен преход между два или повече цвята в определена посока. Най-важното, което трябва да запомните, е че първият параметър определя ъгъла (или посоката), а след него се изреждат цветовете. Можете да контролирате и точното начало на всеки цвят чрез проценти или други мерни единици.
Стъпка по стъпка: създаване на линеен градиент
- Изберете елемент (например
header) и задайте фоново изображение със съкратения синтаксис. - Вместо URL към картинка използвайте
linear-gradient. - Задайте ъгъл, например
0или45deg. - Добавете цветове, разделени със запетая – например зелено и синьо.
- По желание добавете трети цвят или задайте позиция на цвят – например зелено да започва от
50%.
Примерна логика: при 45deg градиентът се завърта под 45 градуса, а при добавяне на повече цветове те автоматично се разпределят в рамките на елемента.
Основни CSS функции и свойства
background-image– задава фоново изображение на елемент (в случая градиент).linear-gradient()– създава линеен градиент с ъгъл и цветове.deg– мерна единица за градуси при задаване на ъгъл.%– определя от коя позиция започва даден цвят в градиента.
