Making Envelope Icon With CSS

There is no limit to style with CSS but everything can not be so easy only with CSS. I found an image of this envelope in dribbble and decided to try it with CSS and made it successfully. In this tutorial, I will guide you step by step how to make this awesome envelope.
The first step is to making a div that will wrap our envelope let's give class 'icon-wrapper'. I am doing this in bootstrap but there is no need of bootstrap to make this envelope if you are using other framework or plain css.  If you don't want to learn step by step get source file on github.

<div class="icon-wrapper"> </div> Now the time to add five div for different layers with class layer for each div and inner1, inner2, inner3, inner4 and inner5 for different layers as bellow. <div class="icon-wrapper"> <div class="layer inner1"> </div> <div class="layer inner2"> </div> <div class="layer inner3"> </div> <div class="layer inner4"> </div> <div class="layer inner5"> </div> </div> Div with class inner3 will be white paper in our design. To make this paper nice, we need to add following elements to our div inner3. <div class="layer inner3"> <div class="top"> <hr /> <hr /> </div> <div class="bottom"> <hr /> <hr /> <hr /> </div> </div> Now the HTML part is done and we will work on css. First of all, we will make our icon-wrapper as 265px width, 265px height, position to relative and overflow hidden. Similarly, our all layer will have absolute position. .icon-wrapper{ width: 265px; height: 265px; position: relative; overflow: hidden; } .layer{ position: absolute; } Now the time to styling each layers. For inner1, we will set left, right and bottom to 0, height 160px and background #ca366f .layer.inner1{ background:#ca366f; left: 0; right: 0; bottom: 0; height: 160px; } for inner2, we need to set left 50%, margin left -93.5px, bottom 66px, width 187.5px, height 188px, rotate to 45 degree and background color #ca366f .layer.inner2{ background: #ca366f; left: 50%; margin-left: -93.5px; bottom: 66px; width: 187.5px; height: 188px; transform: rotate(45deg); } For inner3, width and height need to be 225px, left 50%, margin left -112.5px, translate it to 0 and 50px, apply transition0.4s ease in out and background color to #f2f2f2 .layer.inner3{ width: 225px; height: 225px; background: #f2f2f2; left: 50%; margin-left: -112.5px; transform:translate(0, 50px); transition:all 0.4s ease-in-out; } For inner4, we need to set width and height 300px, rotate to 60 degree, right to -125px, top 142px and background color to #dc447f .layer.inner4{ width: 300px; height: 300px; background: #dc447f; transform: rotate(60deg); right: -125px; top: 142px; } For inner5, set width and height to 350px, right 27px, top 168px. rotate it to -60degree and background color to #ea4c89 .layer.inner5{ width: 350px; height: 350px; background: #ea4c89; transform: rotate(-60deg); right: 27px; top: 168px; }
Now our envelope is looking good but we have few task to do. In inner3 class we have two div with class name top and bottom and horizontal rules inside div. Add following code to style these elements.
.layer.inner3 .bottom{ background: #e7e7e7; bottom: 0; position: absolute; left: 0; right: 0; height: 130px; padding: 15px 30px; } .layer.inner3 .bottom hr{ border-top: 8px solid #ddd; margin-top: 0; margin-bottom: 10px; } .layer.inner3 .top{ top: 0; position: absolute; left: 0; right: 0; height: 130px; padding: 30px 30px 0 30px; } .layer.inner3 .top hr{ border-top: 8px solid #ddd; margin-top: 0; margin-bottom: 10px; } .layer.inner3 .top hr:last-child{ width: 50%; float: left; } When hovering this envelope, white paper will move up. To do this apply following css. .icon-wrapper:hover .layer.inner3{ transform:translate(0, 0); } Now we are done and got an awesome envelope icon built with css. If you want to see all source code go to Github
Making Envelope Icon With CSS Reviewed by Prem Regmi on 8:13:00 PM Rating: 5

No comments:

Designed by Next Bootstrap

Contact Form


Email *

Message *

Powered by Blogger.