Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.inbox
.cover
.envelope
.check
//Not Required
alsolike(
"QbqMXE", "Toggle Buttons",
"VYRzaV", "Open Close",
"BNYLKJ", "css Spinner"
);
<script src="http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import "compass";
*, *:after, *:before{
@include box-sizing(border-box);
}
.inbox{
width: 300px;
@include border-radius(15px);
margin: auto;
position: relative;
height: 330px ;
overflow: hidden;
cursor: pointer;
z-index: 200;
&:hover{
.cover{
@include rotateX(0deg); z-index: 2;
@include transition(all .3s);
}
.check{
top:10px;
opacity: 1;
@include transition(all .3s .2s);
}
}
}
.envelope{
width: 100%;
height: 200px;
background: #3E71DA;
position: absolute;
bottom: 0;
&:after , &:before{
content: '';
position: absolute;
bottom: 0;
border-style: solid;
z-index: 4;
}
&:after{
right: 0;
border-color:transparent #96DDFC;
border-width: 200px 285px 0px 0px;
}
&:before{
left: 0;
border-color:transparent #36BBF7;
border-width: 200px 0px 0px 285px;
}
}
.cover{
background: #3760C9;
width: 300px;
height: 20px;
position:absolute;
top:110px;
z-index: 15;
@include animation(2s open 2 alternate);
@include border-radius(15px 15px 0 0 );
@include transform-origin(50% , 100% );
@include rotateX(180deg);
@include transition(all .3s .2s);
&:after{
content: '';
position: absolute;
border:147px solid transparent;
border-bottom:110px solid #3760C9 ;
@include border-radius(15px );
bottom: 15px;
left: 3px;
}
}
.check{
width: 80px;
height: 150px;
border-bottom:30px solid #E5E5E5;
border-right:30px solid #E5E5E5;
@include rotate(45deg);
position: absolute;
left: 135px;
top:150px;
z-index: 3;
opacity: 0;
@include animation(1s move 1s 2 alternate);
@include transition(.3s);
}
@include keyframes(open){
100%{@include rotateX(0deg); z-index: 2;}
}
@include keyframes(move){
70% ,100%{top:10px; opacity: 1; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment