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.
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.
#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> |
@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; | |
} |