How to create a 3D envelope with CSS

You might have seen 3D envelopes in some websites, which pops up its content on mouseover. Today in this tutorial you are going to learn the codes behind this unique envelope design. I have created this effect with CSS3, there are more ways to create this. But this tutorial will be limited to CSS only.

I have used the CSS3 pseudo classes to design this 3D envelope. Below is a screenshot and a link to the demo of the final result.

Demo

The necessary HTML markup for the effect

Following is the basic HTML, which has been used while creating the envelope effect

<body>
      <div id="envelope">
      <div id="back"></div>
      <div id="letter">PLACE SOME TEXT HERE</div>
    </div>
</body>

As I said before the CSS part has been divided into three part viz PART-A, PART-B and PART-C. Following is the stepwise illustration.

PART-A

In this part we will be learning to create the basic envelope structure, take the help of the below screenshot to get it better.

We shall be experimenting on the div with ID #envelope. First will apply the CSS on #envelope and after that we shall use its two pseudo classes #envelope:before and #envelope:after to do the rest of the styling. Here is the CSS for PART-A

#envelope {
  width: 300px;
  height: 200px;
  margin: 15% auto;
  background-color: #F3E2A9;
  position: relative;
  border: 1px solid #F5DA81;
  box-shadow: 0px 3px 8px 2px #ccc;
}

#envelope:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top: 0px;
  right: 0px;
  border-left: 300px solid transparent;
  border-bottom: 200px solid #FDDE78;
   z-index: 3;
  }

#envelope:after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-right: 300px solid transparent;
  border-bottom: 200px solid #F5DA81;
   z-index: 4;
  }

PART-B

In this part we will design the letter in the envelope, which will come out slightly tilted mode on mouseover.

Here we shall apply the CSS to the div with the ID #letter,and later give it a hover effect. Below is the CSS for this part

#letter {
  padding: 10px;
  font-size: 14px;
  color: #424242;
  text-align: center;
  display: block;
  width: 200px;
  height: 250px;
  background: white;
  border: 1px solid #E6E6E6;
  position: relative;
  top: -100px;
  left: 42px;
  transition: 0.3s ease;
  border-radius: 5px;
}

#letter:hover {
   -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  top: -150px;
}

PART-C

In this last part we will design the upper part of the envelope, that is the triangle like structure behind the letter which will complete the envelope effect.

I have created a triangle with the help of the ID #back and then set the z-index equal to a value less than #letter, which makes it to be appear behind the letter. Below is the CSS used.

#back{
  width: 0px;
  height: 0px;
  border-right: 150px solid transparent;
  border-left: 150px solid transparent;
  border-bottom: 150px solid #FDDE78;
  position: absolute;
  top: -150px;
  left: 0px;
  z-index: -1;
}

So combining these three PARTs we can easily have a 3D envelope, which can be used in websites for various purposes. This is all about creating a 3D envelope with CSS.

Codeflaps