Поигрался с filter и mix-blend-mode на карточках с фотографиями — можно быстро получить выразительный эффект без подготовки отдельных картинок. Но в реальном макете всё оказалось не так просто: результат зависит от фона, порядка слоёв и даже от того, где у родителя задан opacity. На одном изображении эффект выглядит отлично, на другом текст уже почти не читается.
Хочется понять, где вы проводите границу между удобным CSS-эффектом и визуальным трюком, который потом сложно поддерживать. Какие сочетания фильтров и blend modes у вас прижились в рабочих проектах? И как проверяете контраст и читаемость, если контент или фон меняются?
Поделитесь примерами и подводными камнями: особенно интересуют затемнение фотографий под текст, hover-состояния и ситуации, когда один и тот же стиль должен выглядеть предсказуемо на разных изображениях. Может, есть простые правила, которые помогают не переборщить и не получить неожиданный результат при вложенных слоях?
Хочется понять, где вы проводите границу между удобным CSS-эффектом и визуальным трюком, который потом сложно поддерживать. Какие сочетания фильтров и blend modes у вас прижились в рабочих проектах? И как проверяете контраст и читаемость, если контент или фон меняются?
Поделитесь примерами и подводными камнями: особенно интересуют затемнение фотографий под текст, hover-состояния и ситуации, когда один и тот же стиль должен выглядеть предсказуемо на разных изображениях. Может, есть простые правила, которые помогают не переборщить и не получить неожиданный результат при вложенных слоях?
Комментарии 7
Обсуждение темы — по порядку