It is a acutall postit menu bar.
A Pen by Jeonghwan Kim on CodePen.
<ul class="post-it"> | |
<li><a href="#">SUNDAY</a></li> | |
<li><a href="#">MONDAY</a></li> | |
<li><a href="#">TUESDAY</a></li> | |
<li><a href="#">WENDSDAY</a></li> | |
<li><a href="#">THURSDAY</a></li> | |
<li class="active"><a href="#">FRIDAY</a></li> | |
<li><a href="#">SATERDAY</a></li> | |
</ul> | |
<div class="note">HERE IS NOTE.</div>http://codepen.io/JeonghwanKim/pen/IhsdC# |
* { | |
margin:0; padding:0; | |
} | |
body { | |
background: #ddd; | |
} | |
.post-it { | |
padding-left: 100px; | |
padding-top: 100px; | |
margin-bottom: -20px; | |
} | |
.post-it > li{ | |
list-style: none; | |
float: left; | |
width: 120px; | |
overflow: hidden; | |
text-decoration: none; | |
position: relative; | |
margin-left: -55px; | |
box-shadow: 2px 0px 1px rgba(0,0,0,0.5); | |
-webkit-transform-origin: bottom left; | |
-moz-transform-origin: bottom left; | |
-o-transform-origin: bottom left; | |
transform-origin: bottom left; | |
-webkit-transform: rotateZ(-40deg); | |
-moz-transform: rotateZ(-40deg); | |
-o-transform: rotateZ(-40deg); | |
transform: rotateZ(-40deg); | |
-webkit-transition: all 0.3s ease; | |
-moz-transition: all 0.3s ease; | |
-o-transition: all 0.3s ease; | |
transition: all 0.3s ease; | |
} | |
.post-it > li > a { | |
color: white; | |
display: block; | |
width: 100%; | |
padding: 10px 20px; | |
white-space:nowrap; | |
font-family: Impact "Trebuchet MS" ; | |
text-decoration: none; | |
} | |
.post-it > li.active { | |
z-index: 2; | |
} | |
.post-it > li:hover, | |
.post-it > li:focus, | |
.post-it > li.active { | |
box-shadow: 10px 0px 6px rgba(0,0,0,0.5); | |
-webkit-transform: rotateZ(-40deg) rotateY(-19deg) rotateX(-19deg); | |
} | |
.post-it > li:nth-child(1) { | |
background: #FF0000; | |
} | |
.post-it > li:nth-child(2) { | |
background: #FF3300; | |
} | |
.post-it > li:nth-child(3) { | |
background: #FFCC00; | |
} | |
.post-it > li:nth-child(4) { | |
background: #009933; | |
} | |
.post-it > li:nth-child(5) { | |
background: #0066CC; | |
} | |
.post-it > li:nth-child(6) { | |
background: #000099; | |
} | |
.post-it > li:nth-child(7) { | |
background: #9900CC; | |
} | |
.post-it > li:nth-child(8) { | |
background: #000000; | |
} | |
.post-it::after { | |
content: ""; | |
display:block; | |
clear:both; | |
} | |
@media (max-width: 550px) { | |
.post-it { | |
padding-left: 0px; | |
padding-top: 0px; | |
margin-left: 0px; | |
margin-bottom: 10px; | |
} | |
.post-it > li { | |
clear: both; | |
width: 100%; | |
margin-left:0; | |
-webkit-transform-origin: bottom left; | |
-moz-transform-origin: bottom left; | |
-o-transform-origin: bottom left; | |
transform-origin: bottom left; | |
-webkit-transform: rotate(0deg); | |
-moz-transform: rotate(0deg); | |
-o-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
.post-it > li:hover, | |
.post-it > li:focus { | |
box-shadow: 0px -6px 10px rgba(0,0,0,0.5); | |
} | |
.post-it > li > a { | |
text-align: center; | |
padding-left: 0px; | |
} | |
.post-it .active { | |
-webkit-transform: skew(-20deg); | |
-moz-transform: skew(-20deg); | |
-o-transform: skew(-20deg); | |
transform: skew(-20deg); | |
} | |
} | |
.note { | |
background: #fff; | |
height: 200px; | |
padding-top: 30px; | |
position: relative; | |
} |