Search code examples
cssradial-gradients

CSS cutouts and layering

Click here for work in progress

body {
  background: white;
}
.cutout {
  height: 30em;
  margin-top: -100px;
  padding-top: 100px;
  position: relative;
}
.cutout.top {
  margin-top: 0;
  padding-top: 20px;
}
.cutout.last {
  background: green;
}
.cutout.red {
  backround: red;
  background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 75px, #ff0000 50px);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#00000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  z-index: 10;
}
.cutout.white {
  background: white;
  background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 75px, #ffffff 50px);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#00000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  z-index: 9;
}
.cutout.image {
  background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 100px, rgba(255, 255, 255, 0) 50px), url('http://www.theholistichorses.com/wp-content/uploads/2014/02/img_10.jpg');
  z-index: 8;
}
.cutout.image:after {
  content: "";
  color: blue;
  width: 74px;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 10;
}
.cutout.blue {
  background: blue;
  background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 75px, #0000ff 50px);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#00000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  z-index: 8;
}
.cutout.green {
  background: green;
  background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 75px, #008000 50px);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#00000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  z-index: 6;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

<div class="cutout top red">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Strippy Strippy</h1>
        <p>Cum primis habemus salutandi eu, his ad saperet abhorreant, hinc fugit consul eam ad. Sea quodsi invenire an, nihil repudiare vis at. Mei paulo efficiendi liberavisse id. Id vix omnes definiebas, ei pro option contentiones. Delenit scripserit cu mea, modus nonumy mediocritatem ad eos. Et diam altera fabellas duo, nullam alterum conceptam ut mei.</p>
      </div>
    </div>
  </div>
</div>
<div class="cutout white">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Strippy Strippy</h1>
        <p>Cum primis habemus salutandi eu, his ad saperet abhorreant, hinc fugit consul eam ad. Sea quodsi invenire an, nihil repudiare vis at. Mei paulo efficiendi liberavisse id. Id vix omnes definiebas, ei pro option contentiones. Delenit scripserit cu mea, modus nonumy mediocritatem ad eos. Et diam altera fabellas duo, nullam alterum conceptam ut mei.</p>
      </div>
    </div>
  </div>
</div>
<div class="cutout image">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Strippy Strippy</h1>
        <p>Cum primis habemus salutandi eu, his ad saperet abhorreant, hinc fugit consul eam ad. Sea quodsi invenire an, nihil repudiare vis at. Mei paulo efficiendi liberavisse id. Id vix omnes definiebas, ei pro option contentiones. Delenit scripserit cu mea, modus nonumy mediocritatem ad eos. Et diam altera fabellas duo, nullam alterum conceptam ut mei.</p>
      </div>
    </div>
  </div>
</div>
<div class="cutout blue">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Strippy Strippy</h1>
        <p>Cum primis habemus salutandi eu, his ad saperet abhorreant, hinc fugit consul eam ad. Sea quodsi invenire an, nihil repudiare vis at. Mei paulo efficiendi liberavisse id. Id vix omnes definiebas, ei pro option contentiones. Delenit scripserit cu mea, modus nonumy mediocritatem ad eos. Et diam altera fabellas duo, nullam alterum conceptam ut mei.</p>
      </div>
    </div>
  </div>
</div>
<div class="cutout green last">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Strippy Strippy</h1>
        <p>Cum primis habemus salutandi eu, his ad saperet abhorreant, hinc fugit consul eam ad. Sea quodsi invenire an, nihil repudiare vis at. Mei paulo efficiendi liberavisse id. Id vix omnes definiebas, ei pro option contentiones. Delenit scripserit cu mea, modus nonumy mediocritatem ad eos. Et diam altera fabellas duo, nullam alterum conceptam ut mei.</p>
      </div>
    </div>
  </div>
</div>

So, I've got this layout I'm trying to cobble together for a site I'm working on. I've had (what I think) is a pretty good run at it but I'm a bit stuck on IE9 gradients.

I'm using gradients to get the rounded tag effect with a radial gradient being used as a cutout. The tag needs to appear to belong to the top of the div and have that same background. The issue is images. I've got as far as cutting the shape out of the top div (I'll sort the one for under the image out later once I know if this is viable or not) but can't get it looking right in IE9.

Does anyone know if this is possible? I've tried Colourzilla and their fallback (only on the blue one) but it's right.

My question is, is this possible to do in IE9?

Check the link in Chrome / Safari to see what it's meant to look like.

Solution

  • So I'm going to answer my own question here. SVG was the answer.

    <svg class="svg-graphic" width="100%" height="470" preserveAspectRatio="xMinYMin slice" view-box="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
            <g>
                <mask id="hex-mask">
                    <rect width="100%" height="40" x="0" y="0" fill="white"></rect>
                </mask>
                <clipPath id="hex-mask1">
                    <circle r="40" cx="50%" cy="40" fill="blachedalmond"></circle>
                </clipPath>
                <pattern patternUnits="userSpaceOnUse" id="rogerMoreAbout" width="100%" height="100%">
                    <image preserveAspectRatio="xMinYMin slice" width="100%" height="100%" xlink:href="/.imaging/Desktop/dam/6747e9e0-4e1f-48ef-9b9d-1c625f14e1ca.jpg"></image>
                </pattern>
            </g>

            <rect width="100%" height="100%" fill="url(#rogerMoreAbout)"></rect>
            <rect width="100%" height="40" fill="white" mask="url(#hex-mask)"></rect>
            <rect width="100%" height="100%" clip-path="url(#hex-mask1)" fill="url(#rogerMoreAbout)"></rect>

        </svg>

    We used an image pattern to display the image and to cut out the circle from. This was then used to "cut" out of the solid rectangle that was layered on top.

    Hopefully this will help someone in future.