University Marketing & Communications

June 7, 2013

The W is on a diet

By Kilian Frey

wI’ve recently developed an obsession with cutting down on HTTP calls for the next installment of our theme, and when I stumbled across an article about recreating logos in CSS, I was intrigued. I’d recently been toying with using SVG for more of our graphics, but IE shows up drunk to that party. To create our patch in CSS was actually pretty simple given how nicely geometric it is. Here’s screenshot of what the patch looks like with a drop shadow applied to the individual divs making up the patch:

The original article uses pixels for placement of the elements, but this creates the problem of the logo not being scalable (we’d like the patch to be portable). Using percentages works just fine provided that the container (in this case “.patch”) is sized proportionally. The classes .w1-.w7 make up the individual divs within the .patch container. Here’s the entirety of the CSS:

  .patch {
    position: absolute;
    display: block;
    width: 95px;
    top: -35px;
    height: 95px;
    background-color: #d7a900;
    z-index: 999;
  }
  .patch div {
    position: absolute;
    background-color: #ffffff;
  }
  .w1 {
    width: 23.5%;
    height: 8%;
    left: 18%;
    top: 29.5%;
  }
  .w2 {
    top: 29.5%;
    height: 44.3%;
    width: 7%;
    left: 43.7%;
    -webkit-transform: skew(-15deg, 0deg);
    -moz-transform: skew(-15deg, 0deg);
    -ms-transform: skewX(-15deg) skewY(0deg);
    -o-transform: skew(-15deg, 0deg);
    transform: skew(-15deg, 0deg);
  }
  .w3 {
    top: 29.5%;
    height: 8%;
    width: 17.5%;
    left: 65.8%;
  }
  .w4 {
    left: 52%;
    top: 39.5%;
    width: 7%;
    height: 34.5%;
    -webkit-transform: skew(14deg, 0deg);
    -moz-transform: skew(14deg, 0deg);
    -ms-transform: skewX(14deg) skewY(0deg);
    -o-transform: skew(14deg, 0deg);
    transform: skew(14deg, 0deg);
  }
  .w5 {
    width: 12.2%;
    height: 37%;
    -webkit-transform: skew(14deg, 0deg);
    -moz-transform: skew(14deg, 0deg);
    -ms-transform: skewX(14deg) skewY(0deg);
    -o-transform: skew(14deg, 0deg);
    transform: skew(14deg, 0deg);
    left: 27.7%;
    top: 36.8%;
  }
  .w6 {
    top: 33.8%;
    left: 66.7%;
    -webkit-transform: skew(-14.5deg, 0deg);
    -moz-transform: skew(-14.5deg, 0deg);
    -ms-transform: skewX(-14.5deg) skewY(0deg);
    -o-transform: skew(-14.5deg, 0deg);
    transform: skew(-14.5deg, 0deg);
    height: 40.2%;
    width: 7.3%;
  }
  .w7 {
    width: 6.5%;
    height: 43.5%;
    top: 29.5%;
    left: 56.6%;
    -webkit-transform: skew(14deg, 0deg);
    -moz-transform: skew(14deg, 0deg);
    -ms-transform: skewX(14deg) skewY(0deg);
    -o-transform: skew(14deg, 0deg);
    transform: skew(14deg, 0deg);
  }

Compatibility

IE8 and down do not have access to the skew() property, so for the time being I’m just loading an IE conditional with the traditional image as a background. There is a ray of hope in using -ms-filter to solve it, though I’ve yet to get it to work.