A Pen by Ben Norris.

CSS3-Mailer-Icon.markdown

CSS3 Mailer Icon

This is a CSS version of Michele Angeloro's Dribbble shot: http://dribbble.com/shots/1259851-Advertisers.

Extra hover animation fun not in original.

A Pen by Ben Norris on CodePen.

License.

index.jade

#wrapper
  #envelope
    #page
      #actions
      #text
      
p This is a pure CSS version of <a href="http://dribbble.com/shots/1259851-Advertisers">Michele Angeloro's Dribbble shot.</a>

style.scss

@import "compass";
/*Vars*/
$lighter-green: #91cc51;
$light-green: #8ec850;

/*Background*/
:root {
  background-color: $lighter-green;
  background-image: linear-gradient(to right, $light-green 50%, $lighter-green 50%);
  // background-image: linear-gradient(45deg, $light-green 50%, $lighter-green 50%); // I really want to figure out why this doesn't work
}

#wrapper {
  position: absolute;
  left: 50%;
  margin-left: -6.125em;
  top: 50%;
  margin-top: -6.125em;
  width: 12.25em;
  height: 12.25em;
  border-radius: 0 0 .75em .75em;
  overflow: hidden;
  // This line now controls the size of the whole thing
  font-size: 16px;
}
#envelope {
  width: 100%;
  height: 65%;
  margin-top: 35%;
  background-color: #c01f37;
  &:before, &:after {
    content: '';
    width: 120%;
    height: 100%;
    position: absolute;
    right: 0;
    z-index: 10;
    transform: rotate(-33deg);
    transform-origin: (top right);
    background-color: #ff1742;
  }
  &:after {
    left: 0;
    transform: rotate(33deg);
    transform-origin: (top left);
    background-color: #ff294c;
    box-shadow: 0 0 4px hsla(0,0%,0%,.1);
  }
}
#page {
  position: absolute;
  top: 0;
  left: 6.5%;
  width: 87%;
  height: 81%;
  border-radius: 5%;
  background-color: #fff;
  transition: top .3s;
  &:hover {
    top: 12%;
  }
  // Search bar
  &:before {
    content: '';
    position: absolute;
    top: 6%;
    right: 6%;
    width: 41%;
    height: 6%;
    border-radius: .375em;
    border-radius: 8% / 50%; // (8% of width, 50% of height)
    background-color: #e5e5e5;
  }
}

#actions {
  position: absolute;
  top: 6%;
  left: 6%;
  width: 6%;
  height: 6%;
  border-radius: 50%;
  background-color: #e5002d;
  &:before, &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 130%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ffa63d;
  }
  &:after {
    left: 260%;
    background-color: #5cc729;
  }
}

#text {
  position: absolute;
  top: 38%;
  left: 50%;
  margin-left: -24.5%;
  width: 49%;
  height: 19%;
  background-color: #b3b3b3;
  background-image: repeating-linear-gradient(to bottom, #b3b3b3 0, #b3b3b3 .375em, #fff .375em, #fff .75em);
  // Grey final line
  &:before, &:after {
    content: '';
    position: absolute;
    bottom: -40%;
    width: 43%;
    height: 20%;
    background-color: #b3b3b3;
  }
  // Green heading line
  &:after {
    width: 65%;
    top: -40%;
    background-color: #a4d867;
  }
}

p {
  position: absolute;
  bottom: 0;
  right: 1.5em;
}