CSS Не работает фоновый фильтр для дочернего элемента в выдвижном меню - PullRequest
Новая
       12

CSS Не работает фоновый фильтр для дочернего элемента в выдвижном меню

3 голосов
/ 18 июня 2020

Я пытаюсь применить эффект backdrop-filter к выдвижному меню, состоящему из двух вложенных div s. Мне удалось разобраться в том, как это меняет расположение элементов, но по какой-то причине, пока нижняя часть меню вложена внутри верхней «вкладки», фильтры в нижней части не функция, как показано слева. Он работает, если применить только к внутреннему div (как показано справа), но я хотел бы повлиять на оба. Если они не вложены, я не знаю, как сделать так, чтобы сдвиг при наведении курсора работал. m не совсем уверен, как это применимо.

Вот демонстрация: 

body {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px);
  height: 100%;
  width: 100%;
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  text-align: center;
  color: #F0F8FF;
}

/* -------------------GLASS EFFECT------------------- */

.glass {
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.45) 24%,
      hsla(0, 0%, 100%, 0.4) 25%,
      hsla(0, 0%, 100%, 0.2) 45%,
      hsla(0, 0%, 100%, 0.1)
    );
  background-size: 300% 100%;
  border-radius: 10px;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
}
.frame {
  padding: 20px;
}
.centered {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -------------------Menu version------------------- */

.glassUpper {
  position: fixed;
  bottom: 0px;
  width: 35px;
  height: 30px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  padding: 5px 2px 0 2px;
  text-align: center; 
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}
#menuUpperRight {
    right: 40px;
}
#menuUpperLeft {
    left: 40px;
    backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
.glassLower {
  position: fixed;
  bottom: -120px;
  right: 40px;
  width: 200px;
  height: 110px;
  padding: 5px 0px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  text-align: center;
  opacity: 0.75;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}
#menuLowerRight {
  right: 40px;
  border-radius: 10px 0 0 0;
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
#menuLowerLeft {
  left: 0px;
  border-radius: 0 10px 0 0;
  transform: translate3d(0, 0, 0);
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
.glassUpper:hover {
  bottom: 120px;
}
#menuUpperRight:hover #menuLowerRight {
  bottom: 0;
}
<!-- First -->
<div class="glass frame centered">
  <section class="content">
    <p>A light glass-effect frame.</p>
  </section>
</div>

<!-- Menus! -->
  <div class="glassUpper" id="menuUpperRight">
     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="rgba(240, 248, 255, 0.75)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="17.291" x2="12" y2="10.708"/>
      <line x1="12" y1="6.708" x2="12.01" y2="6.708"/>
    </svg>
    <div class="glassLower" id="menuLowerRight">
        <p>Working when applied to child dev only!</p>
      <!-- custom play and pause buttons -->
      <button class="radioButton" id="play">Play</button>
      <button class="radioButton" id="pause">Pause</button>
      <!-- Credits -->
      <button class="bigButton" id="credits">Credits</button>
    </div>
  </div> 

  <div class="glassUpper" id="menuUpperLeft">
     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="rgba(240, 248, 255, 0.75)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="17.291" x2="12" y2="10.708"/>
      <line x1="12" y1="6.708" x2="12.01" y2="6.708"/>
    </svg>

    <div class="glassLower" id="menuLowerLeft">
        <p>Backdrop Filters broken on child div???</p>
      <!-- custom play and pause buttons -->
      <button class="radioButton" id="play">Play</button>
      <button class="radioButton" id="pause">Pause</button>
      <!-- Credits -->
      <button class="bigButton" id="credits">Credits</button>
    </div>
  </div>

1 Ответ

2 голосов
/ 18 июня 2020

Использование дополнительной оболочки может решить эту проблему, тогда вы можете иметь ваши элементы верхний / нижний как отдельные внутри: 

body {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px);
  height: 100%;
  width: 100%;
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  text-align: center;
  color: #F0F8FF;
}

/* -------------------GLASS EFFECT------------------- */

.glass {
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.45) 24%,
      hsla(0, 0%, 100%, 0.4) 25%,
      hsla(0, 0%, 100%, 0.2) 45%,
      hsla(0, 0%, 100%, 0.1)
    );
  background-size: 300% 100%;
  border-radius: 10px;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
}
.frame {
  padding: 20px;
}
.centered {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -------------------Menu version------------------- */

.glassUpper {
  width: 35px;
  height: 30px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  padding: 5px 2px 0 2px;
  text-align: center; 
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}

#menuUpperLeft {
    backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
.glassLower {
  width: 200px;
  height: 110px;
  padding: 5px 0px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  text-align: center;
  opacity: 0.75;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}

#menuLowerLeft {
  border-radius: 0 10px 0 0;
  transform: translate3d(0, 0, 0);
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}

.extra{
  position: fixed;
  top: calc(100% - 35px);
  left: 40px;
  transition:0.5s;
  pointer-events:none;
}
.extra * {
  pointer-events:initial;
}
.extra:hover {
  top: calc(100% - 155px);
}
<!-- First -->
<div class="glass frame centered">
  <section class="content">
    <p>A light glass-effect frame.</p>
  </section>
</div>

<!-- Menus! -->

  <div class="extra">
  <div class="glassUpper" id="menuUpperLeft">
     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="rgba(240, 248, 255, 0.75)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="17.291" x2="12" y2="10.708"/>
      <line x1="12" y1="6.708" x2="12.01" y2="6.708"/>
    </svg>
  </div>
    <div class="glassLower" id="menuLowerLeft">
        <p>Backdrop Filters broken on child div???</p>
      <!-- custom play and pause buttons -->
      <button class="radioButton" id="play">Play</button>
      <button class="radioButton" id="pause">Pause</button>
      <!-- Credits -->
      <button class="bigButton" id="credits">Credits</button>
    </div>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...