CODEWITHSUNDEEP
csssvgclip-path
Kerruba
Kerruba

Reputation: 2019

CSS clip-path using an entire SVG

I'm trying to use the clip-path property in css to mask out a blurred image in a grid, basically to get the glass-blurring effect you see for example in windows 10 as well as other places.

The strcuture that I have is:

<div>
    <div><img src="img/not_blurred.jpg"/></div>
    <div><img src="img/blurred.jpg"/></div>
    <div>
        <span>Some text</span>
    </div>
</div>

To make the blurred image cover the div containing "Some text" while maintaining the proportions with the underling picture I was thinking of using an SVG clipPath with an SVG that covers the entire div containing "Some text"

<div>
    <div><img src="img/not_blurred.jpg"/></div>
    <div><img src="img/blurred.jpg"/></div>
    <div>
        <svg width="100%" height="100%">
            <defs>
                <clipPath id="test" clipPathUnits="objectBoundingBox">
                    <rect width="1" height="1"></rect>
                </clipPath>
            </defs>
        </svg>
        <span>Some text</span>
    </div>
</div>

But the problem is the clippath doesnt get as origin the coordinate (0,0) of the SVG, but the (0,0) of the page. I've created a pen for this if you want to have a look https://codepen.io/Kerruba/pen/MBveoW

Probably I'm understanding something wrongly, but I tried document online on this and couldn't find an answer.

Any help would be very appreciated

Upvotes: 0

Views: 137

Answers (1)

Kerruba
Kerruba

Reputation: 2019

Unfortunately I couldn't find any solution to this problem the way that I defined it. But using JS and a polygon clip-path I was able to recreate the effect I was looking for.

Here how:

HTML 

<div class="grid glass">
    <div class="bg_normal">
        <img src="https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?cs=srgb&dl=above-aerial-aerial-view-991012.jpg&fm=jpg" alt="">
      </div>
      <div class="bg_blur">
        <img src="https://images.pexels.com/photos/991012/pexels-photo-991012.jpeg?cs=srgb&dl=above-aerial-aerial-view-991012.jpg&fm=jpg" alt="">
      </div>
      <div class="title">
        <h1>The greatest place ever!</h1>
      </div>
</div>

CSS 

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.grid {
  min-width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-auto-columns: unset;
  grid-gap: 0;
}


.bg_normal, .bg_blur {
  grid-row: 1 / -1;
  grid-column: 1;
}

.bg_normal img, .bg_blur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg_blur img{
   filter: blur(5px);
}

.title {
  grid-row: 2/-2;
  grid-column: 1;
  z-index: 1;
  background: rgba(200, 200, 200, 0.3);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vmax;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  font-family: 'Jura', sans-serif;
  text-shadow: 0 5px 10px HSL(172, 27%, 39%);
}

Javascript

function setClipPath(target, source) {
    let sbox = source.getBoundingClientRect();
    let [xmin, ymin, xmax, ymax] = [ sbox.left, sbox.top, sbox.right, sbox.bottom];
    target.style.clipPath = `polygon(${xmin}px ${ymin}px, ${xmin}px ${ymax}px, ${xmax}px ${ymax}px, ${xmax}px ${ymin}px
    )`;

}
let blur_background = document.querySelector(".glass .bg_blur");
let text_overlay = document.querySelector(".glass .title");

setClipPath(blur_background, text_overlay);

window.onresize = function(event) {
    setClipPath(blur_background, text_overlay);
}

Here I've prepared a pen to show the effect https://codepen.io/Kerruba/pen/MBveoW?editors=0101

Any comment on how to improve this or macro-issues you spot let me know in the comment

Upvotes: 0

Related Questions