Есть ли общепринятый способ создания эффекта перекосного «матового стекла» в CSS / SVG? - PullRequest
Новая
       4

Есть ли общепринятый способ создания эффекта перекосного «матового стекла» в CSS / SVG?

0 голосов
/ 03 января 2019

Я хочу сделать заставку для сайта.У страницы будет один фон, который будет обрезан с левой стороны наклонным делителем, скажем, с постоянной 110 градусов от горизонтали (или эквивалент, продолжайте читать).Этот div размыт фон позади него и позволит разместить на нем контент, например текст.См. страницу ресурсов бренда YouTube : вместо того, чтобы иметь простой белый фон слева, я бы хотел, чтобы это размыло фоновое изображение, которое находится под ним.

Я еще не нашелспособ объединить всю информацию, которую я нашел, в способ, который работает и поддерживается большинством браузеров.Например, я недавно попробовал перекошенный div, который делил фон с родительским контейнером, как в этом посте , о котором спрашивают, но пути к клипам CSS пока не поддерживаются, и белый div не будет обрежьте его для моего варианта использования (для ясности, это решение заканчивается перекошенным фоновым изображением).

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
<div class="splash">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
        <filter id="blur" x="0" y="0">
            <feGaussianBlur stdDeviation="1"></feGaussianBlur>
        </filter>
        <clipPath id="clip">
            <polygon points="0,0 100,100 0,100"></polygon>
        </clipPath>
        <image clip-path="url('#clip')" filter="url('#blur')" x="0" y="0" width="100" height="100" xlink:href="https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg"></image>
    </svg>
</div>
</body>
</html>

Sass: 

html, body
  position: relative

  margin: 0
  overflow-x: hidden
  height: 100%

.splash
  position: absolute
  width: 100%
  height: 100%
  overflow: hidden

  background-image: url("https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg")
  background-size: cover
  background-repeat: no-repeat
  background-color: lightgrey
  background-attachment: fixed

  svg
    position: absolute
    width: inherit
    height: inherit

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 03 января 2019

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

svg {
  width: 100vw;
  height: 200px;
  position: absolute;
  top: 0;
}

.container {
  position: relative;
  z-index: 1;
  margin-top: 100px;
  padding-left: 50px;
}
<svg width="1024" height="200" viewBox="0 0 1024 200" preserveAspectRatio="none">
  <defs>
    <pattern id="pat" viewBox="0 0 1024 200" width="100%" height="100%">
      <image xlink:href="https://picsum.photos/1024/200?image=1029" width="1024" height="200"/>
    </pattern>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
  </defs>
  <!-- background no filter -->
  <rect width="1024" height="200" fill="url(#pat)"/>
  <!-- foreground triangle, blurred -->
  <path d="M0,0L1024,200H0Z" fill="url(#pat)" filter="url(#blur)"/>
</svg>
<div class="container">
  <h1>some text</h1>
  <p>Lorem ipsum</p>
</div>
0 голосов
/ 03 января 2019

Вы можете рассмотреть косое преобразование без необходимости clip-path.Вот базовый пример, где хитрость заключается в том, чтобы указать правильное значение background-position, чтобы создать иллюзию одного изображения. 

.box {
  height:300px;
  background-image:url(https://picsum.photos/600/800?image=1069);
  background-position:left center;
  background-size:cover;
  position:relative;
  overflow:hidden;
}
.skew,
.skew::before{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:top left;
  transform:skewY(30deg);
  overflow:hidden;
  background-image:inherit;
  background-position:inherit;
  background-size:0 0;
}
.skew::before {
  content:"";
  transform:skewY(-30deg);
  filter:blur(10px);
  background-size:cover;
}

/*to illustrate the separation*/
.skew {
  border-top:1px solid;
}
/**/
.container {
  position:relative;
  z-index:1;
  margin-top:150px;
  padding-left:50px;
}

body {
 margin:0;
}
<div class="box">
  <div class="skew"></div>
  <div class="container">
    <h1>some text</h1>
    <p>Lorem ipsum</p>
  </div>
</div>

<div class="box" style="background-image:url(https://picsum.photos/600/800?image=3)">
  <div class="skew"></div>
  <div class="container">
    <h1>some text</h1>
    <p>Lorem ipsum</p>
  </div>
</div>

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

var w = window.innerWidth;
var h = 300; /*the height of the box*/
document.querySelector('.box .skew').style.transform="skewY("+(Math.atan(h/w)*180/Math.PI )+"deg)";
document.querySelector('.box .skew span').style.transform="skewY(-"+(Math.atan(h/w)*180/Math.PI )+"deg)";

window.onresize = function(event) {
    w = window.innerWidth;
    document.querySelector('.box .skew').style.transform="skewY("+(Math.atan(h/w)*180/Math.PI )+"deg)";
    document.querySelector('.box .skew span').style.transform="skewY(-"+(Math.atan(h/w)*180/Math.PI )+"deg)";
};
.box {
  height:300px;
  background-image:url(https://picsum.photos/600/800?image=1069);
  background-position:left center;
  background-size:cover;
  position:relative;
  overflow:hidden;
}
.skew,
.skew span{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:top left;
  transform:skewY(30deg);
  overflow:hidden;
  background-image:inherit;
  background-position:inherit;
  background-size:0 0;
}
.skew span{
  transform:skewY(-30deg);
  filter:blur(10px);
  background-size:cover;
}
/*to illustrate the separation*/
.skew {
  border-top:1px solid;
}
/**/
.container {
  position:relative;
  z-index:1;
  margin-top:150px;
  padding-left:50px;
}

body {
 margin:0;
}
<div class="box">
  <div class="skew"><span></span></div>
  <div class="container">
    <h1>some text</h1>
    <p>Lorem ipsum</p>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...