mefody.dev

Эффект полутонов в 3 строчки CSS



Ана Тюдор показывает, как совместить всего три свойства — background, background-blend-mode, filter — чтобы получить красивый эффект рисования однотонными точками (и не только). Вся магия в том, что filter: contrast превращает полутона в превалирующий цвет. Было разблюренное чёрное пятно на белом фоне — получится яркий чёрный кружок с чёткими белыми краями.



Если соединить два фона внутри background, поиграться с режимами смешивания и бахнуть поверх контрастом, то получается красивое.



В статье очень много демок, которыми можно вдохновиться на создание своих паттернов для интерфейсов.



https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/