[Перевод] Улучшенные эффекты с режимом смешивания фоновых слоев в CSS

Скрипты и советы | 13 сентября 2018 1 500

Уроки CSS на Хабрахабре, habrahabr.ru, Разработка веб-сайтов

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

Когда вы слышите обсуждение функций CSS Blend Modes, то обычно речь идет о трех новых свойствах CSS, которые получили хорошую поддержку в современных браузерах.

Вот эти свойства:

background-blend-mode — для смешивания фоновых изображений, градиентов и цветов фона элементов;

mix-blend-mode — для смешивания элементов с другими элементами;

isolation – менее используемое свойство, которое применяется вместе с mix-blend-mode для предотвращения смешивания элементов.



Как бы то ни было, эта статья будет посвящена background-blend-mode, свойству, которое пользуется наиболее широкой поддержкой, и возможностям его использования для создания на своем сайте привлекательных фонов и фотоэффектов, которые когда-то были возможны только в Photoshop.
Читать дальше →
Типографика и современный CSS

Пока некоторые CSS свойства, отвечающие за разного рода красивости (вроде filter, mix-blend-mode или transition)...

Подробнее
[Перевод] Три способа создания клякс с помощью CSS и SVG

Кляксы (Blob) - это гладкие, аморфные, желеобразные формы, обычно причудливые и забавные. Их можно использовать в...

Подробнее
[Перевод] CSS и множественный фон

CSS-свойство background — это одно из самых часто используемых свойств. Но сообщество веб-разработчиков пока не слишком...

Подробнее
Internet Explorer / Ссылка Поддержка CSS3-свойства writing-mode

Довольно объемная статья с подробным изложением описания CSS-свойства writing-mode, которое появилось еще в IE5.5,...

Подробнее
[recovery mode] История вируса «Программа, которая увольняет людей»

Когда вы слышите фразу “продвижение” — то вам всем в голову приходит примерно одно и тоже: сайт, seo, контекст,...

Подробнее
[Перевод] CSS: интересные возможности border-radius

Что можно сделать с помощью CSS-свойства border-radius? Автор материала, перевод которого мы публикуем, говорит, что...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями