Andy Tschiersch Andy Tschiersch - 1 month ago 7
CSS Question

How to realize a curved header with shadow border, without using images

I'm trying to build a header like you can see in the code example below. In this example I am using 3 different background images. But I do not want to use images, because they becomes ugly on mobile devices with high resolution displays.

Are there other possibilities to realize such header with pure CSS or maybe with vector techniques (SVG, clip or similar)?



body {
margin: 0;
}
#header {
height: 50px;
}
#header .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#header .bg > div {
float: left;
}
#header .bg .left {
width: calc(25% - 59px);
height: 117px;
background-image: url("http://fs5.directupload.net/images/161026/hkplooah.png");
}
#header .bg .curve {
width: 59px;
height: 116px;
background-image: url("http://fs5.directupload.net/images/161026/kk3zkqox.png");
}
#header .bg .right {
width: 75%;
height: 68px;
background-image: url("http://fs5.directupload.net/images/161026/vaucnr84.png");
}
#content {
height: 200px;
background: #cee4fa;
}

<div id="header">
<div class="bg">
<div class="left"></div>
<div class="curve"></div>
<div class="right"></div>
</div>
</div>
<div id="content"></div>




Answer

You mean something like this using filter, feGaussianBlur, and feMerge?

body {
  background: lightblue;
}
<svg version="1.1" id="ExampleForStackOverflow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="10%" viewBox="0 0 800 400" enable-background="new 0 0 800 400" xml:space="preserve">
  <defs>
        <filter id="slight-glow">
            <feColorMatrix type="matrix" values=
                        "0 0 0 0   0
                         0 0 0 0   0
                         0 0 0 0   0
                         0 0 0 0.7 0"/>
            <feGaussianBlur stdDeviation="3.5" result="coloredBlur"/>
            <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
          </feMerge>
    </filter>
  </defs>
<linearGradient id="SOExample1" gradientUnits="userSpaceOnUse" x1="399.5005" y1="83.313" x2="399.5005" y2="2.9984">
	<stop  offset="0" style="stop-color:#CCCCCC"/>
	<stop  offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path filter="url(#slight-glow)" fill="url(#SOExample1)" stroke="#555555" stroke-miterlimit="10" d="M-0.5,0.5v82h158c18.625-1,23.751-16.5,28.023-24.384
	c5.414-9.991,13.424-19.616,22.901-19.616H799.5v-38H-0.5z"/>
</svg>

CodePen to tinker with and tweak for concept refinement...

Hope this helps, cheers.

Comments