Кръгли градиенти
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Най-важното за кръглите (радиални) градиенти
Радиалният градиент създава преливане на цветовете от центъра навън. По подразбиране той е с форма на елипса, а не на перфектен кръг. Когато използвате форма circle, градиентът може да бъде „отрязан“ в правоъгълен контейнер. С ellipse цветовете се разпределят така, че да се вместят изцяло в елемента.
Стъпка по стъпка: създаване на радиален градиент
- Отворете CSS файла и намерете класа на кутийката (например тази с име и длъжност).
- Заменете линейния градиент с радиален чрез
background. Добавете радиален градиент с форма кръг:
background: radial-gradient(circle, red, blue);Запазете и вижте как преливането започва от центъра навън.
- Добавете трети цвят, за да наблюдавате как се разпределя в наличното пространство.
Променете формата на елипса:
background: radial-gradient(ellipse, red, blue);Запазете и сравнете – ще забележите, че градиентът се напасва по-добре в правоъгълната кутия.
Основни CSS функции
radial-gradient()– Създава радиален (кръгъл или елипсовиден) градиент.circle– Задава кръгла форма на градиента.ellipse– Задава елипсовидна форма (по подразбиране).background– Прилага градиента като фон на елемент.
Експериментирайте с различни цветове и форми, за да видите как те влияят на визуалното възприятие и композицията на елемента.
