Вопрос про наследование фильтров в CSS

adward
(@idiatulla)

6 лет, 7 месяцев назад
Есть желание на сайте использовать такой эффект — когда пользователь открывает меню сайта — хочу чтобы остальной сайт слегка размыло, чтобы заакцентировать внимание пользователя только на меню.

Cначала я отслеживаю событие возникновения меню и через jQuery присваиваю тегу body стиль blur:
jQuery('body').addClass('blur');

когда меню исчезает — я и класс удаляю:
jQuery('body').removeClass('blur');

а вот сам класс:
```
body.blur {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
}
```
Тут всё прекрасно, всё работает, но есть одно но. Так как менюха является дочерним элементом для body — то и меню, собственно, тоже размывается.

Я даже довесил событие возникновения менюхи применением стиля для меню:
```
body.blur #navigation {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
}
```
К сожалению, и это не сработало 🙁

Даже не знаю, как мне быть. Есть какие либо у вас мысли, коллеги? Был бы благодарен.

Просмотр 6 ответов — с 1 по 6 (всего 6)

Модератор Denis Yanchevskiy
(@denisco)

WordPress-разработчик, denisco.pro

6 лет, 7 месяцев назад
А так?
```
#navigation {
    -webkit-filter: none !important;
  -moz-filter: none !important;
  filter: none !important;
}

body * {
    -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
}
```
Автор adward
(@idiatulla)

6 лет, 7 месяцев назад

если применять фильтр ко всем элементам внутри body по очереди — у проца начинается 100% расход и всё замирает. очень не эффективное решение.
Модератор Denis Yanchevskiy
(@denisco)

WordPress-разработчик, denisco.pro

6 лет, 7 месяцев назад
Ну тогда, помоему, только делать враппер для содержимого сайта, а меню выносить в отдельный контейнер. Ну и ради эксперимента можно попробовать ограничить выборку селектора
```
body > * {
    -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
}
```
Автор adward
(@idiatulla)

6 лет, 7 месяцев назад

нет, не сработало.

что интересно, что если делать вот так

#navigation {
-webkit-filter: none !important;
-moz-filter: none !important;
filter: none !important;
}

или даже так:

#navigation {
-webkit-filter: blur(0px); !important;
-moz-filter: blur(0px); !important;
filter: blur(0px); !important;
}

то ничего не происходит. Однако же если сделаем вот так:

#navigation {
-webkit-filter: blur(10px); !important;
-moz-filter: blur(10px); !important;
filter: blur(10px); !important;
}

то, зараза, работает!
вот блин где тут логика, понять не могу (

Модератор Sergey Biryukov
(@sergeybiryukov)

Live and Learn

6 лет, 7 месяцев назад

вот блин где тут логика, понять не могу (

Логику вы сами описали выше:

Так как менюха является дочерним элементом для body — то и меню, собственно, тоже размывается.

Отменить размытие для конкретного дочернего элемента нельзя, его можно только размыть ещё сильнее 🙂

Думаю, решение здесь только одно: как подсказал denisco, разместить меню и всё остальное содержимое в разных контейнерах.

Модератор Sergey Biryukov
(@sergeybiryukov)

Live and Learn

6 лет, 7 месяцев назад

когда пользователь открывает меню сайта — хочу чтобы остальной сайт слегка размыло, чтобы заакцентировать внимание пользователя только на меню.

Можно попробовать добавлять отдельный фоновый слой на весь экран (по принципу lightbox-плагинов) и размывать или затемнять только его, а не <body>.

Значение z-index у фона должно быть больше, чем у основного содержимого, но меньше, чем у меню.

Просмотр 6 ответов — с 1 по 6 (всего 6)

Тема «Вопрос про наследование фильтров в CSS» закрыта для новых ответов.

Метки темы

Просмотр