Если изображение стоит тысячи слов, то смешение двух изображений вместе должно стоить много раз.
Когда вы слышите CSS Blend Modes о котором говорят, волнение действительно связано с тем, что вы видите, что возможности дизайна, которые открываются с наличием режимов смешивания в CSS, намного больше, чем вы понимаете. три новых свойства CSS, которые получили довольно хорошую поддержку в современных браузерах.
Эти свойства включают в себя:
background-blend-mode для смешивания фона элемента изображения, градиенты и фоновые цвета
mix-blend-mode для смешивания элементов над другими элементами и, наконец,
изоляции меньшей используемое в смешанном режиме для хранения элементов от смешивания.
Однако в этой статье основное внимание будет уделено background-blend-mode свойство с наиболее распространенным поддержки и того, как вы можете использовать его сегодня для создания привлекательных фонов и
Свойство background — это свойство фотоизображений для вашего сайта, которое когда-то было возможно только в Photoshop. где мы можем использовать градиенты CSS. Такие функции, как linear-gradient () radial-gradient () и повторяющийся-линейный градиент () и повторяющийся радиальный градиент () разновидности этих двух имеют широкую поддержку и более критично, стандартизованный синтаксис в браузерах.
Но свойство background также может принимать более одного градиента, отображаемого поверх каждого другие, причем каждая функция разделяется запятой. Lea Verou продемонстрировал впечатляющие модели, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд.
Но теперь, когда у нас есть свойство background-blend-mode мы можем создать еще более новые градиенты и рисунки.
Spectrum background
Давайте наложим три градиента, чтобы создать фон с почти полным спектром цветов, который можно отобразить на мониторе.
Эффект, использованный ранее, был возможен только с изображением, весом в несколько десятков килобайт , Но мы только что воспроизвели эффект с CSS менее чем за 200 байт, не говоря уже о сохранении HTTP-запроса.
Plaid background
Мы также можем создать некоторые интересные плед-шаблоны с градиентами background-blend-mode .
С помощью Yoksel и Una Kravets я подготовил сборник из 24 дополнительных градиентов режима смешивания, чтобы сделать ваш сайт быстрым и привлекательным
Фотоэффекты с фоном-blend-mode
В то время как background-image позволяет нам устанавливать несколько градиентов на элементе, один трюк заключается в том, что мы можем также установите мульти Несколько изображений с синтаксисом url () аналогичным образом. Когда мы объединим это с background-blend-mode и такими свойствами, как фильтр вот что может стать действительно интересным.
Эффект эскиза карандаша
Мы можем использовать CSS, чтобы сделать фотографию слева, как будто она была нарисована карандашом и бумагой. Нет Photoshop, нет холста HTML5, нет WebGL, нет библиотек JavaScript. Пять свойств CSS — это все, что нам нужно.
Хотя мы можем использовать другие элементы блочного уровня, такие как
вот HTML, который мы будем использовать для начала.
Давайте начнем стилизацию. Замените chapel.jpg с URL-адресом изображения, которое вы используете.
Ниже в первом квадрате есть результат нашего первого шага:
Теперь добавим режим смешивания:
background-blend-mode: difference;
О нет, где все прошло? У нас остался совершенно черный квадрат. Режим разностной смеси берет два фонов и вычитает пиксель за пикселем более темный цвет одного фона из более светлого цвета другого фона.
Если это путает то, что здесь происходит, давайте посмотрим, что произойдет (19459011) и calc () .
Используя запятую, мы устанавливаем две позиции фона, каждая из которых соответствует одной копии фонового изображения. Первое изображение, мы перемещаемся от центра по оси х влево на один пиксель и от центра по оси Y вверх вверх по пикселю.
. Мы остаемся с двумя фоновыми изображениями, которые слегка смещены, но вся картина по-прежнему сосредоточена в нашем элементе , Теперь, когда режим разностной смеси обнаруживает различия между двумя изображениями, он показывает края на фотографии.
Наконец, мы будем использовать свойство filter чтобы инвертировать фотографию и сделать ее полутоновой.
Мы можем воссоздать эффект доски, шаги для эффекта эскиза карандаша, опуская инверсию (1) на последнем шаге.
Эффект ночного видения
Давайте попробуем воссоздать еще один эффект с режимами наложения CSS и сделать снимок, как будто мы просматриваем его через объектив ночных очков.
На нашем фоне есть три части, которые мы будем смешивать с режимом наложения наложения . Этот режим смешивания осветляет и затемняет фон и работает как комбинация двух других режимов смешивания, multiply и screen .
Сначала мы настроим фоновое изображение, [1945903]
Не так уж плохо, может быть, мы хотим остановиться там. У меня есть еще одна идея, которая могла бы сделать эффект более аутентичным, и это добавить некоторые линии искусственного сканирования на задний план с повторяющимся градиентом фона.
Я создал галерею из 20 эффектов изображения CSS, которые вы можете
Поддержка браузера и грациозная деградация
Хорошей новостью является то, что свойство background-blend-mode имеет полную поддержку в Firefox, Chrome , и Opera.
. Несколько хороших новостей является то, что у нее достаточно поддержки в Safari для поддержки всех эффектов, которые мы рассмотрели здесь, в то время как Safari в настоящее время не имеет поддержки для насыщения цвет и светимость .
Плохая новость заключается в том, что Internet Explorer и IE Edge не поддерживают каких-либо свойств режима смешивания CSS
Это означает, что нам нужно планировать будущее для браузеров, которые еще не поддерживают background-blend-mode . Правильное правило CSS @supports делает это довольно простым. Вот два примера.
В первом примере мы возьмем наш спектр фонового градиента и обеспечим резервную ошибку, если свойство background-blend-mode не поддерживается. Мы используем background: gray, для этого примера как резерв, но любой его CSS можно использовать на его месте.
И вот эффект эскиза карандаша с отступлением. Мы тестируем два важных свойства, для которых нам нужна поддержка эффекта: фильтр и background-blend-mode . Если браузер пользователя не поддерживает их (или если браузер не поддерживает CSS @supports ), мы вернемся к простой оригинальной фотографии.
.pencil- Эффект { background-image: url (photo.jpg); background-size: cover;
(1 оценок, среднее: 4,00 из 5)
Загрузка...
