Согласно теории, направление градиента перпендикулярно линии градиента. А само направление задаётся в виде угла наклона линии градиента, либо ключевыми словами и выражениями.
Меня заинтересовало выражение написания “to top left” и ему подобные. Что означает движение с нижнего правого угла к левому верхнему.
Изначально я подумал что такое выражение тождественно значению в 45 градусов. Но эксперимент показал иное (в CSS коде примера важен только прописанный классу first).
Возникло предположение, что линией градиента стала диагональ прямоугольника, угол которой БЫЛ БЫ равен 45 градусам, в случае квадратного блока, а здесь прямоугольник со сторонами 300 и 700px. Для подтверждения, я нашёл данный угол через арктангенс и соотношение сторон и он оказался равен приблизительно 22 градусам.
И вот уже этот результат буквально идентичен “to top left”, т.е. браузер делает расчёт исходя из ширины и высоты контейнера, и линию градиента проводит по диагонали блока. Надо полагать, что при “резиновом блоке” угол заливки также будет меняться.
Да, чуть позже я пришёл к более простому подтверждению этого предположения. Если задать чёткую границу перехода градиента, и переход сделать в 50%, т.е. посередине, то эта граница должна проходить по диагонали.
Может, я что-то не понимаю, но, вроде, этот момент был указан в теории: если блоки квадратные, то градиенты to top right и 45deg будут выглядеть одинаково. А вот если сделать блок прямоугольным, то to top right будет сохранять “попадание” градиента в правый верхний угол - само собой, угол наклона будет меняться в зависимости от пропорций прямоугольника, а если будет задан угол 45deg, то он так и будет 45deg независимо от пропорций прямоугольника, т.е. “попадать” в углы уже не будет, нет?
Возможно вы проходили платные курсы Академии? По фонам, по-моему, два дополнительных курса есть по подписке. Я пока прохожу бесплатный блок. Хочу сперва общее представление получить, а потом углубляться в тонкости. В бесплатном мне такой информации не попадалось.
Довелось ставить очередные эксперименты, чтобы уяснить для себя операторы: closest-side, farthest-side, closest-corner, farthest-corner для радиального градиента.
background: radial-gradient(circle farthest-corner
at 70% 20%, white 1%, red 1%, red 49%, darkblue 50%);
Указанные проценты 70% и 20% определяют не только положение центра радиального градиента в контейнере, но и влияют на диаметр самого градиента.
Как оказалось, диаметр круга представляет собой расстояние от центра до:
closest-side - ближайшей стороны;
farthest-side - самой удалённой стороны;
closest-corner - ближайшего угла;
farthest-corner - самого удалённого угла.
Т. е. я потратил “кучку” времени фактически на перевод Одно утешение, в педагогике исследовательский метод ценится выше, как способ лучшего понимания и запоминания материала.
Одно утешение, в педагогике исследовательский метод ценится выше, как способ лучшего понимания и запоминания материала.