Как делать такие условные заголовки?

Question

[lukoie]

Вот тут заголовок для Эмми более короткий чем остальные, потому он большего размера чем остальные.
А заголовок для "миссии невыполнима" - черным шрифтом, раз на светлом фоне.
Насколько я понял, цвет подложки вычисляется из цвета фона, и в зависимости от показателя HSB текст будет черным или белым? Но и цвет текста у первой плитки тоже светло сиреневенький(хотя, это полупрозрачность белого текста).
Как такое делается(кроме как, естественно, ручками).

Comments

[hackuun]

Глянул внимателней. Тут вибрант вычисляется. На сервере. Вероятно также яркость цвета и если яркий, то текст темный.

Можно ссылку на сайт? А то я зашел на кинопоиск и там другое.

[devalone]

hackuun, это скорее всего https://zen.yandex.ru/

[lukoie]

hackuun, да, это дзен кинопоиска
мне ниже дали ответ, точно в точку по реализации

[hackuun]

lukoie, там нету ни слова об эффектах, блур и переход цвета в картинку

[lukoie]

hackuun, дык это ж обычный цсс градиент с транспаренси

[hackuun]

lukoie, лолка. какой нафиг градиент? ЭТО КАРТИНКА. Открой сайт что-ли

[lukoie]

hackuun, во первых я этот сайт и кинул тут, что-ли, т.к. вопрос это мой, что-ли.
градиентом я это делаю у себя, мне не нужно формировать картинку, а даже если и надо было бы, для этого есть имиджемагия, типа
convert -size 400x400 gradient:none-rgba(100%,0,0,0.5) gradient.png
так что для меня это не вопрос. я спрашивал про цвет, и ниже дали ссыль на "цветового крадуна", который такие штуки и делает, ну и условность цвета в зависимости от светлости фона тоже как раз в точку в ответе.

[hackuun]

lukoie, градиентом, увы, так красиво не получится.

[lukoie]

hackuun, чувак, ну перестань
вот реально за минуту накидал тебе: https://jsfiddle.net/vzwxh35d/
остается только дополировать

[hackuun]

lukoie, Ну и что? Гавно же, разница видна невооруженным взглядом. В оригинале есть зашибенный блур и нету этих омерзительных градиентных полос. Ты НИКОГДА так не сделашь CSS. Да и вручную это делать только нуб будет. Юзай плагин PostCSS для градиентов.

[Александр Таратин]

hackuun, Тюю... чего так токсично то вести себя???
https://jsfiddle.net/8ujmn5zs/62/

[lukoie]

hackuun, прекрасно оно делается цсс-ом, главное ручки прямые иметь. Я тебе показал пример сделанный за минуту(!), что такое осуществимо.
За 15-20 минут делается окончательный вариант, если нужно пиксельперфекно под показанный пример.

Если надо заморочится этим самым "зашибенным блуром", который на самом деле является заглушкой для предзагрузочного плейсхолдера, это тоже делается имиджмагиком. Либо точно так же цсс, но опять же, напоминаю о прямых руках и достаточности знаний. В моем случае вопрос о нем не стоял, потому я его и не показывал в песочнице.

Постцсс или другие крутые штуки бесполезны пока не можешь сделать того же нативными средствами. А вот когда можешь - вполне обоснованно пользоваться упростителями жизни. С другой стороны, надо знать где это стоит делать, а где это будет избыточным.

Answer 1

[Александр Таратин]

Белый или черный
https://github.com/Taraflex/Brackets-Color-Highlig...
https://github.com/Taraflex/Brackets-Color-Highlig...
Цвет из картинки лучше вычислить заранее на сервере, ибо на клиенте не выйдет отобразить цветную карточку до загрузки картинки
https://github.com/ksubileau/color-thief-php
https://github.com/thephpleague/color-extractor
https://github.com/brianmcdo/ImagePalette
https://www.phpclasses.org/package/3370-PHP-Extrac...
ну и еще можно нагуглить

UPD
Градиентный блур на js
https://jsfiddle.net/8ujmn5zs/62/