1

Мне необходимо создать эффект матового стекла в выпадающем меню. Я смотрел кучу примеров но все они завязаны на том что размывают картинку фона. А мне необходимо размывать все что находится за этим меню Все дивы и текст размывались.

Я пытался как то адаптировать под свои нужды но получается как то блекло

.test2{
background: #3333339e;
width: 250px;
height: 350px;
position: absolute;
top: 50px;
left: 50px;
overflow: hidden; 
 }
 .test2:before {
  content: '';
  width: 300px;
  height: 400px;
  background: inherit;
  position: absolute;
  left: -25px;
  top: -25px;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.31);
  filter: blur(10px);
}

а

Нужно что то вроде этого правое изображение а

1
  • Скинь пожалуйста html, я тебе сделаю=)
    – Keeplod
    Commented 26 февр. 2019 в 11:54

1 ответ 1

2

Используйте для этих целей backdrop-filter. Перед использованием проверьте поддержку браузерами (WinXP+Chrome49 - полёт нормальный, даже без префиксов). Также, следует учесть, что данное свойство применяется только к прямоугольным областям, что видно при наведении на красный блок.

.text {
  width: 160px;
  height: 120px;
  border: 3px solid #fa0;
  overflow: scroll;
}

.blur {
  position: absolute;
  top: 30px;
  left: 80px;
  width: 160px;
  height: 120px;
  border: 8px solid #f30;
  font: bold 16px 'Arial';
  transition: .6s ease;
  backdrop-filter: blur(2px);
}
.blur:hover {
  border-radius: 50%;
}

.blur2 {
  position: absolute;
  top: 75px;
  left: 30px;
  width: 160px;
  height: 120px;
  border: 4px solid #0b0;
  font: bold 16px 'Arial';
  backdrop-filter: blur(8px);
}
<div class="text">Мне необходимо создать эффект матового стекла в выпадающем меню. Я смотрел кучу примеров но все они завязаны на том что размывают картинку фона. А мне необходимо размывать все что находится за этим меню Все дивы и текст размывались.</div>
<div class="blur">Красненький</div>
<div class="blur2">Зелёнивенький :)</div>

13
  • У меня нет не сафари поэтому у меня он не работает.
    – zeni1agent
    Commented 26 февр. 2019 в 11:30
  • @zeni1agent причём здесь сафари?
    – UModeL
    Commented 26 февр. 2019 в 11:34
  • видимо при том, что поддерживается только в сафари и эдже
    – teran
    Commented 26 февр. 2019 в 11:36
  • 1
    мы верим что у вас работает :) просто процент поддерживаемости этого фильтра таков, что он пока что не применим в разработке. хотя другого решения этой задачи и нет, наверное.
    – teran
    Commented 26 февр. 2019 в 12:17
  • 1
    кто бы и что не говорил в хроме работает Commented 26 февр. 2019 в 23:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.