Поддержка Темы и шаблоны Вопрос про наследование фильтров в CSS

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

    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

    А так?

    #navigation {
        -webkit-filter: none !important;
      -moz-filter: none !important;
      filter: none !important;
    }
    
    body * {
        -webkit-filter: blur(1px);
      -moz-filter: blur(1px);
      filter: blur(1px);
    }

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

    Модератор Denis Yanchevskiy

    (@denisco)

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

    Ну тогда, помоему, только делать враппер для содержимого сайта, а меню выносить в отдельный контейнер. Ну и ради эксперимента можно попробовать ограничить выборку селектора

    body > * {
        -webkit-filter: blur(1px);
      -moz-filter: blur(1px);
      filter: blur(1px);
    }

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

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

    #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

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

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

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

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

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

    Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

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

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

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

Просмотр 6 ответов — с 1 по 6 (всего 6)
  • Тема «Вопрос про наследование фильтров в CSS» закрыта для новых ответов.