Соберите кнопку и карточку с CSS-градиентами
Соберите кнопку и карточку с CSS-градиентами Начните с двух небольших элементов: задайте кнопке linear-gradient(), а карточке radial-gradient(). Первый смешивает цвета вдоль прямой, второй распределяет их от центра. Разница станет видна прямо в браузере. В разборе линейных и радиальных градиентов есть готовые примеры кнопки и светового пятна. Там же показано, как угол задаёт направление линии, положение центра смещает пятно, а проценты отмечают места, где должны появиться выбранные цвета. Скопируйте примеры и проведите три проверки: замените угол 90deg на 135deg, перенесите центр с 50% 30% на 30% 20%, затем добавьте третий цвет. После каждого изменения сравните результат: так синтаксис быстрее связывается с тем, что рисует браузер.
23 просмотров