Как сделать эффект морозного стекла для заголовка на свитке - PullRequest
Новая
       24

Как сделать эффект морозного стекла для заголовка на свитке

2 голосов
/ 09 октября 2019

Я пытаюсь создать эффект морозного стекла для заголовка. Заголовок имеет белый фон с черным текстом и является фиксированным. Идея заключается в том, что содержимое, которое находится за этим заголовком (при прокрутке вниз), отображается с эффектом морозного стекла.

Мне удалось частично изменить непрозрачность моего заголовка до 0,9, но я не могу получитьэффект размытия (через фильтр) для работы. Кто-нибудь знает, что я должен изменить? Вот мой код: 

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  color: black;
}

* {
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

main {
  width: 100%;
  background: lightblue;
	
	section {
		padding: 80px;
	}
	
	h1 {
		margin-bottom: 20px;
	}
	
	p {
		margin-bottom: 20px;
	}
} 

.outer-header {
    // background-repeat: no-repeat;
    // background-attachment: fixed;
    // background-size: cover;
    // background-position: top;
    // background-image: url(https://4bp.blogspot.com/-1f1sdfix3dy/Uh92eZAQ90I/AAAAAAAAHM4/5oiB4zC_tQ4/s1600/Photo-Background-White4.jpg);
    background: white;
    height: 80px;
    position: sticky;
    top: 0px;
    left: 0px;
    opacity: 0.9;
    overflow: hidden;
    z-index:4;

    &::after {
      z-index: -1;
      content: "";
      background: inherit;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      box-shadow: inset 0 0 200px rgba(255, 255, 255, 0.05);
      filter: blur(10px);
      //     filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='svgMask'><feGaussianBlur stdDeviation='10' /></filter></svg>#svgMask");
    }
  }

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }

  img {
    height: 50px;
    cursor: pointer;
    object-fit: cover;
  }

h1 {
  position: relative;
}

  .logo-text {
    font-size: 33px;
    position: absolute;
    left: 50px;
    top: 6px;
  }

  nav,
  ul {
    display: flex;
    grid-column-gap: 20px;
    justify-items: end;
    align-items: center;
  }
<div class="outer-header">
  <header>
    <h1>
    <img src="https://source.unsplash.com/random/287x287" />
      <span class="logo-text">Company</span>
    </h1>
    <nav>
      <li>Link 1</li>
            <li>Link 2</li>
      <li>Link 3</li>

    </nav>
  </header>
  </div>
  <main>
    <section>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
    nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
    sit. Repellat quia deleniti enim in.
  </p>
</section>
    
    <section>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
    nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
    sit. Repellat quia deleniti enim in.
  </p>
</section>
        <section>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
    nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
    sit. Repellat quia deleniti enim in.
  </p>
</section>    <section>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
    nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
    sit. Repellat quia deleniti enim in.
  </p>
</section>    <section>
  <h1>Heading</h1>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic est autem vel
    nam laborum ad at! Labore iusto quae porro nostrum dicta esse consequatur
    sit. Repellat quia deleniti enim in.
  </p>
</section>
  </main>

1 Ответ

2 голосов
/ 09 октября 2019

Вы ищете (все еще экспериментальный) backdrop-filter свойство. Тем не менее, поддержка браузера все еще немного скудна. Для Firefox он появится в следующей версии 70 за флагом разработчика. Safari по-прежнему требует префикса -webkit- вендора. Но вы можете протестировать этот рабочий пример в текущей версии (76+) Chrome. 

body {
 background: url(http://placekitten.com/800/600) no-repeat;
}

#overlay {
  width: 50vw;
  height: 50vh;
  background: rgba(255,255,255,0.4);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
<div id="overlay"></div>
...