Semantic Twitter Logo using CSS

twitter-logo.html

<div class="twitter-logo">
    <span class="head">Welcome to Twitter.</span>
    <span class="beak-top">Find out what’s happening,</span>
    <span class="beak-bottom">right now,</span>
    <span class="wing-top">with the people</span>
    <span class="wing-middle">and organizations</span>
    <span class="wing-bottom">you care about.</span>
    <span class="body">Logo remade by <a href="//jonweb.co.uk">Jonathan Cousins (@evolutionxbox)</a></span>
</div>
  
<h1>Twitter logo (CSS3) by Jonathan Cousins - @evolutionxbox</h1>
<h2>(Modified from @upperdog_se)</h2>
<p>This is my attempt at a CSS3 twitter logo. It is slightly more semantic than some I have seen which uses just div's.</p>
<p>This one, however, uses 'after' psuedo elements to get to the same result.</p>
<!-- by Jonathan Cousins - @evolutionxbox -->

twitter-logo.scss

.twitter-logo {
  display: block;
  height: 273px;
  overflow: hidden;
  padding: 0;
  position: relative;
  margin: 100px auto;
  width: 334px;

  span {
    background-color: #2daae1;
    border-radius: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-indent: -999em;

    &:after {
      background-color: #fff;
      border-radius: 100%;
      content: ' ';
      display: block;
      position: absolute;
      z-index: 2;
    }
  }

  &:hover {
    overflow: visible;

    span {
      background-color: rgba(45, 170, 225, 0.5);
      box-shadow: 0px 0px 1px #000;
      &:after {
        background-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0px 0px 1px #000;
      }
    }
  }
}

.head {
  height: 135px;
  left: 164px;
  top: 0;
  width: 135px;
  z-index: 8;
}

.beak-top {
  height: 130px;
  left: 198px;
  top: -79px;
  width: 130px;
  z-index: 7;

  &:after {
    height: 235px;
    left: -52px;
    top: -132px;
    width: 235px;
  }
}

.beak-bottom {
  height: 130px;
  left: 208px;
  top: -58px;
  width: 130px;
  z-index: 6;

  &:after {
    height: 235px;
    left: -41px;
    top: -134px;
    width: 235px;
  }
}

.wing-top {
  height: 140px;
  left: 16px;
  top: -24px;
  width: 140px;
  z-index: 5;

  &:after {
    height: 390px;
    left: -35px;
    top: -282px;
    width: 390px;
  }
}

.wing-middle {
  height: 140px;
  top: 23px;
  left: 14px;
  width: 140px;
  z-index: 4;

  &:after {
    height: 140px;
    left: -44px;
    top: -60px;
    width: 140px;
  }
}

.wing-bottom {
  left: 37px;
  height: 140px;
  top: 71px;
  width: 140px;
  z-index: 3;

  &:after {
    height: 140px;
    left: -55px;
    top: -45px;
    width: 140px;
  }
}

.body {
  height: 390px;
  left: -89px;
  top: -117px;
  width: 390px;
  z-index: 2;

  &:after {
    height: 285px;
    left: -43px;
    top: 75px;
    width: 285px;
  }
}

body {
  color: #333;
  font: 16px/1.2 Arial, sans-serif;
  margin: 0 auto;
  text-align: center;
  width: 960px;
}