Comments 30
Поблажило, глоток свежего воздуха среди прочего контента. Можно заливать плашки стандартными градиентами Фотошопа и воровать из них длинные списки цветов, чтобы получать красивое.
Дальше в статье есть переход через LAB, который кажется глазу очень естественным.
Естественный как раз hsl, ведь при смешивании синего с желтым как раз получается зелёный.
Погодите. В Lab же тоже посередине между жёлтым и синим лежит серый, нет?
И автор статьи принял по итогу совершенно правильное решение – воткнуть посередине такой цвет, чтобы градиент был не "точным", а "красивым". Единственное – мне казалось, что дизайнеры его для таких (достаточно редких) случаев обычно руками подбирают.
Не могу не упомянуть, что у автора оригинальной статьи осенью вышел просто невероятный интерактивный курс по современному CSS. Вряд ли вы видели что-то подобное раньше. Крайне рекомендую!
А можно хотя бы название курса, или где его можно найти?
https://courses.joshwcomeau.com/css-for-js
Для россиян у автора есть очень приличная региональная скидка, почти в половину стоимости. При покупке есть галка.
А можно скриншот как эта галка выглядит? На какой именно она странице. (Не то, чтобы хочу купить, просто сама тема «Purchasing Power Parity» заинтриговала.)
Вот.
Курс недешевый. Но есть резон. Автор вложид в него просто нереальное количество труда, это не просто груда видео в ютубе или плюралсайте каком-нибудь. Во-первых, автор просто невероятно четко и ясно излагает мысли свои. Посмотрите ЛЮБУЮ его статью. Я купил курс, когда прочитал его статью про pixel perfect design. Чувствуется талант и опыт, и умение донести это до слушателя. Во-вторых, он всегда не просто красиво оформляет статьи, а еще и делает кучу отполированного интерактива для экспериментов прямо по ходу чтения! И тут целый курс такого контента! К примеру, в курсе есть интерактивные задачки в каждом топике для закрепления материала. Дается с десяток все усложняющихся задач, вы сразу на месте в интерактивном конструкторе их решаете, и вам поясняют точно, где и ПОЧЕМУ вы ошиблись. Например, так было очень легко понять border collapse. В-общем, я нигде ни в каком курсе не видел подобного. Я даже не поленился все эти комментарии тут написать, хотя никогда ничего особо не комментирую :)
Это на какой странице?
Прямо на домашней https://css-for-js.dev/, внизу. Прокручивается до этого места по кропке розовой Enrol now
Всегда не любил такие скроллящиеся интерфейсы, но сейчас похоже моя нелюбовь достигла апеофоза. Реально — несколько раз был на этой странице, из любопытства искал именно эту штуку — и не находил (высота страницы 26.5 экранов, но очевидной структуры или оглавления у неё нету); всё, что находил, — пункт «Do you support Purchasing Power Parity (PPP) / regional licenses?» в FAQ внизу. Ну, Вам в любом случае спасибо.
Да, согласен, я тоже помучился немного искать где это было. :) Пожалуй, можно списать на жанр этакого лендинга-завлекалки. А вообще у автора очень красивые и продуманные интерфейсы внутри курса, там полно дизайна и интерактива. Прям куча работы проделана. Кстати, он писал недавно что готовит второй курс, кажется по анимациям.
Интересно, а как в природе работает? Например сделать "Рассвет" от светло-розового до синего через голубой - совсем не просто, и с этими двумя моделями - врядли выйдет...
В природе совсем другие модели, как минимум функция излучения абсолютно черного тела и рэлеевского рассеяния для газов (в этом примере). Естественно, такие на порядки более сложные вещи, чем обычная линейная интерполяция, дают более интересные результаты :)
Элементарно, Ватсон: природа не даёт единственно верного решения, каким должен быть "градиент". Вполне может быть, например, от чёрного к белому через красный и жёлтый.
Рисуете схематично шарики земли и атмосферы, ищете показатели преломоления атмосферы, смотрите, какие длины волн на какой высоте приходят к наблюдателю. Как два пальца об асфальт.
Неделька работы и готово :)))
Что не так с цветами на экране
Берём и исправляем гамму, и получается линейный градиент здорового человека :)
Действительно глоток свежего воздуха, меняющего мышление. Можно брать и использовать. Почему-то в tecplot этого нет.
К слову, в художке когда рассказывают как "растягивать" градиенты, например, маслом, объясняют, что далеко расположенные по цветовому кругу друг от друга оттенки необходимо объеденять через промежуточные цвета, иначе переход будет грязным.
Хмммм... Это то, чему обучают в художественной школе. Прикольно смотреть, как мир переоткрывает для себя такие базовые вещи управления цветом.
Собственно, как сейчас помню: где-то начало 2000х, школа, урок живописи, акварель. Если попытаться сделать градиентный перелив из двух контрастных цветов (как тут в статье желтый и синий, а еще можно красный и зеленый, ну или еще что-то такое, что на цветовом круге находится примерно друг напротив друга), то в середине получится грязная кашица. И чтобы этого избежать, мы в середине добавляем новый цвет, находящийся между ними посередине. Вуаля, градиент стал ярким и красивым.
Эх, когда-то я считал, что художка для дизайнера не обязательна. Но чем старше становлюсь, тем больше понимаю, что базовые и очевидные для меня вещи, вложенные в голову художкой, для большинства дизайнеров не являются таковыми.
Создание красивых градиентов на CSS