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


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

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

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

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

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

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



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


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

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

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

Типографика и современный CSS

Пока некоторые CSS свойства, отвечающие за разного рода красивости (вроде filter, mix-blend-mode или transition) привлекают внимание всех и каждого, другие совсем мало освещаются в интернете. Взять... читать далее

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

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

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

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

Каскадные Таблицы Стилей / CSS хитрости IE 7: -ms-interpolation-mode

Эта тема в сети не новая, но тут статью об этом не нашла. Оказывается, у IE, начиная с версии 7, есть поддержка интерполяции (режима масштабирования) изображений и управления им через CSS-свойство... читать далее

Блог им. NamelessOne / Стилевые описания для нескольких селекторов, указанных одновременно

Добрый день. Хочу поделиться с хабрасообществом одним полезным свойством, которое не так часто используется, хотя при грамотном использовании способно сократить размер css и html кода. Речь идет о... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте