Css3 размытие. Продвинутые CSS фильтры

main.de-emphasized {
filter: blur(5px);
}

Как подтверждает рисунок ниже, это уже огромный шаг вперед. Однако сейчас размытие применяется немедленно, что выглядит не слишком естественно и ухудшает впечатление пользователя от взаимодействия со страницей. Поскольку фильтры CSS поддерживают анимацию, мы можем заставить размытие страницы проявляться плавно и постепенно:
main {
transition: .6s filter;
}
main.de-emphasized {
filter: blur(5px);
}

Часто бывает полезно комбинировать два эффекта снижения значимости (затемнение и размытие).
Один из способов сделать это - использовать фильтры brightness() и/или contrast() :

main.de-emphasized {
filter: blur(3px) contrast(.8)
brightness(.8);
}

Результат вы видите на рисунке. Затемнение посредством фильтров CSS означает, что если они не поддерживаются, то никакое резервное решение не применяется. Возможно, затемнение лучше воплощать с помощью какого-нибудь другого метода, который также может служить резервным решением (например, используя свойство box-shadow , как мы делали в предыдущем секрете). Это также избавит нас от «эффекта сияния», который можно наблюдать по краям на рисунке.

Я не смог коротко перевести на русский backdrop и background, сохранив смысловую разницу между ними, поэтому поясню сейчас:
backdrop - то, что находится за элементом, и может быть видно через него, обрезано по его рамке;
background - тоже фон, но является частью элемента, к нему и относится свойство background.

Вернемся в 2011 год, браузеры начали вводить CSS фильтры из спецификаций . В это время поддерживались в основном SVG фильтры, а Firefox был единственным браузером, который мог применить их к HTML контенту (в основном, ничего не изменилось).

CSS фильтры такие как blur(), contrast() или grayscale() - отличное дополнение к CSS, несмотря на то, что SVG может позволить сделать восхитительные вещи. Больше узнать о них вы можете на множестве ресурсов.

backdrop-filter

Я был настроен скептически, но я начал играться в WebKit nightlies в феврале, и изменил свое мнение - это очень круто. Каждый согласится со мной, что подтверждается моим Vine (сервис, похожий на Сoub - прим. переводчика) постом, который собрал более 20 тысяч просмотров за 48 часов.

В июне, Apple анонсировала на WWDC, что эти свойства будут доступны в Safari 9. Это хорошая новость. Самое время проверить, (автор использует бету iOS 9 и Safari 9).

С этим свойством вы можете получить эфекты, которых добиться было тяжело. Самое банальное - размытие как в iOS:

Header { background-color: rgba(255,255,255,.6); backdrop-filter: blur(5px) }
Каждый элемент за header`ом размыт на 5px. Это так просто.

filter()

Element { background: filter(url(path/to/img.jpg), blur(5px)); }
В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она - вариация background-filter (или background-opacity, background-blur), но она намного мощнее.

Живой пример на JSBin (только Safari 9).

Хорошая новость в том, что даже без упоминания Apple, она доступна в Safari 9.

Несколько вещей, которые надо знать:

• есть баг с background-size
• функцию можно анимировать
• функция требует префиксi: -webkit-filter()

Я с нетерпением жду, когда в браузерах введут эти фичи. SVG тоже может это делать, но такие же крутые эфекты можно легко сделать с CSS. С прошлого года, много споров вокруг CSS были сфокусированы на архитектуре, методологии, инструментах. Хорошо помнить о том, что CSS так же и о графическом дизайне (вместе с SVG).

OK, сейчас поддержка минимальна, но это станет возможным на миллионах iPhone`ов и iPad`ов до конца года.

Я не смог коротко перевести на русский backdrop и background, сохранив смысловую разницу между ними, поэтому поясню сейчас:
backdrop - то, что находится за элементом, и может быть видно через него, обрезано по его рамке;
background - тоже фон, но является частью элемента, к нему и относится свойство background.

Вернемся в 2011 год, браузеры начали вводить CSS фильтры из спецификаций . В это время поддерживались в основном SVG фильтры, а Firefox был единственным браузером, который мог применить их к HTML контенту (в основном, ничего не изменилось).

CSS фильтры такие как blur(), contrast() или grayscale() - отличное дополнение к CSS, несмотря на то, что SVG может позволить сделать восхитительные вещи. Больше узнать о них вы можете на множестве ресурсов.

backdrop-filter

Я был настроен скептически, но я начал играться в WebKit nightlies в феврале, и изменил свое мнение - это очень круто. Каждый согласится со мной, что подтверждается моим Vine (сервис, похожий на Сoub - прим. переводчика) постом, который собрал более 20 тысяч просмотров за 48 часов.

В июне, Apple анонсировала на WWDC, что эти свойства будут доступны в Safari 9. Это хорошая новость. Самое время проверить, (автор использует бету iOS 9 и Safari 9).

С этим свойством вы можете получить эфекты, которых добиться было тяжело. Самое банальное - размытие как в iOS:

Header { background-color: rgba(255,255,255,.6); backdrop-filter: blur(5px) }
Каждый элемент за header`ом размыт на 5px. Это так просто.

filter()

Element { background: filter(url(path/to/img.jpg), blur(5px)); }
В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она - вариация background-filter (или background-opacity, background-blur), но она намного мощнее.

Живой пример на JSBin (только Safari 9).

Хорошая новость в том, что даже без упоминания Apple, она доступна в Safari 9.

Несколько вещей, которые надо знать:

• есть баг с background-size
• функцию можно анимировать
• функция требует префиксi: -webkit-filter()

Я с нетерпением жду, когда в браузерах введут эти фичи. SVG тоже может это делать, но такие же крутые эфекты можно легко сделать с CSS. С прошлого года, много споров вокруг CSS были сфокусированы на архитектуре, методологии, инструментах. Хорошо помнить о том, что CSS так же и о графическом дизайне (вместе с SVG).

OK, сейчас поддержка минимальна, но это станет возможным на миллионах iPhone`ов и iPad`ов до конца года.