CODEWITHSUNDEEP
csssvgmask
Reza ghasemi
Reza ghasemi

Reputation: 198

Creative SVG Mask

i want to create a mask over a picture using svg file.

it will use for header section, a header with 50% opacity mask over it.

but i have problem in responsive. in high resolutions, behind mask will empty and solid color, and in low resolutions, picture will overflow from mask.

please look at my try and help me.

body{
  background:#eee;
  padding:0;
  margin:0;
}
#header{
  position:relative;
  background:url(https://images.unsplash.com/photo-1531826267553-c4979aefab12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80);
  background-attachment: scroll;
  background-repeat: none;
  background-size:100% auto;
  background-position: 0 50%;
  padding-top:10px;
  padding-bottom:200px;
}
#header:before {
  background: rgba(36, 55, 84, 0.5);
  content: "";
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
  right: 0;
  top: 0;
}
#header:after {
  background:  url(https://svgshare.com/i/LSs.svg);
  content: "";
  width: 100%;
  height: 200px;
  position: absolute;
  background-attachment: scroll;
  background-size: 100%;
  background-repeat: no-repeat;
  right: 0;
  top:calc(100% - 100px);
}
#header .header-content{
  z-index: 1;
  margin-top: 130px;
  position: relative;
  margin-bottom: -50px;
}
#header .header-content h1 {
  color: #fff;
  text-align:center;
}
<html>
  <head></head>
  <body>
    <div id="header">
      <div class="header-content">
        <h1>Welcome to our website</h1>
      </div>
    </div>
  </body>
</html>

thanks

Upvotes: 2

Views: 111

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

You can simplify your code like below using multiple background. Note that I have used the SVG inline and added preserveAspectRatio="none" to it

body {
  background: #eee;
  padding: 0;
  margin: 0;
}

#header {
  background: 
    linear-gradient(rgba(36, 55, 84, 0.5),rgba(36, 55, 84, 0.5)) top/100% calc(100% - 100px),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 450 35" preserveAspectRatio="none" ><path opacity="0.5" fill="%23243754"  d="M0,35h1.333l417-15c0,0,31.666-1.001,31.666-20H0V35z"/><path fill="%23EEEEEE" d="M0,35h1.333l417-15c0,0,31.666-1.001,31.666-20L450,35H0z"/></svg>') bottom/100% 100px,
    url(https://images.unsplash.com/photo-1531826267553-c4979aefab12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80) center/cover;
  background-repeat: no-repeat;
  padding-top: 10px;
  padding-bottom: 200px;
}

#header .header-content {
  margin-top: 130px;
}

#header .header-content h1 {
  color: #fff;
  text-align: center;
}
<div id="header">
  <div class="header-content">
    <h1>Welcome to our website</h1>
  </div>
</div>

But since it's supposed to work as a mask you should use it as mask like below. Only the second path of the SVG is needed (the part we need to hide)

body {
  background: linear-gradient(to right,red,blue);
  padding: 0;
  margin: 0;
}

#header {
  background: 
    linear-gradient(rgba(36, 55, 84, 0.5),rgba(36, 55, 84, 0.5)),
    url(https://images.unsplash.com/photo-1531826267553-c4979aefab12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80) center/cover no-repeat;
  padding-top: 10px;
  padding-bottom: 200px;
  -webkit-mask:
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 450 35" preserveAspectRatio="none" ><path fill="black" d="M0,35h1.333l417-15c0,0,31.666-1.001,31.666-20L450,35H0z"/></svg>') bottom/100% 100px no-repeat,
     linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
  mask:
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 450 35" preserveAspectRatio="none" ><path fill="black" d="M0,35h1.333l417-15c0,0,31.666-1.001,31.666-20L450,35H0z"/></svg>') bottom/100% 100px no-repeat,
     linear-gradient(#fff,#fff);
  mask-composite:exclude;
}

#header .header-content {
  margin-top: 130px;
}

#header .header-content h1 {
  color: #fff;
  text-align: center;
}
<div id="header">
  <div class="header-content">
    <h1>Welcome to our website</h1>
  </div>
</div>

Upvotes: 4

Related Questions