CSS
html, body {
height: 100%;
position: relative;
}
body {
margin: 0;
background: radial-gradient(circle at 25% 0%, #eeeeee 10%, #aaaaaa);
}
.mm-menu {
font-size: 1rem;
position: relative;
width: 22.5em;
height: 4.5em;
border-radius: 0.15em;
background: #c4cac8;
box-shadow: 0 -1px 0.3em rgba(0, 0, 34, 0.2) inset, 0 -1px 1px rgba(0, 0, 34, 0.03) inset;
margin: -2.25em auto 0;
top: 50%;
}
.mm-item > [class*="fa-"] {
display: block;
font-size: 2em;
text-align: center;
line-height: 2.25em;
color: #c9c9c9;
text-shadow: 0 -0.03em rgba(0, 0, 0, 0.21), 0 0.03em 0.06em rgba(255, 255, 255, 0.5);
}
.mm-item {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
position: relative;
top: -0.25em;
float: left;
width: 4.5em;
height: 4.5em;
text-decoration: none;
border-radius: 0.15em;
transition: 250ms;
background: linear-gradient(#f6f7f9, #d6d8dc) 0 50%;
background-size: 100% 200%;
}
.mm-item:hover {
top: -0.35em;
background-position: 0 0%;
}
.mm-item:focus,
.mm-item:active {
outline: none;
top: -0.15em;
background-position: 0 100%;
}
.mm-item,
.mm-item:first-of-type:focus,
.mm-item:first-of-type:active,
.mm-item:hover:focus + .mm-item,
.mm-item:hover:active + .mm-item {
box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.15) inset, 0 0 0 0 transparent inset, 0.2em 0.2em 0.3em -0.07em rgba(255, 255, 255, 0.6) inset, -0.2em -0.3em 0.3em -0.07em rgba(0, 0, 0, 0.08) inset;
}
.mm-item:hover + .mm-item,
.mm-item:focus,
.mm-item:active {
box-shadow: 0 0.3em 0.3em -0.2em rgba(255, 255, 255, 0.6) inset, 1px 0 0 0 rgba(0, 0, 0, 0.02) inset, 0.35em 0 0.3em -0.2em rgba(0, 0, 34, 0.07) inset, -0.2em -0.3em 0.3em -0.07em rgba(0, 0, 0, 0.08) inset;
}
.mm-item:hover + .mm-item:focus {
box-shadow: 0 0.3em 0.3em -0.2em rgba(255, 255, 255, 0.6) inset, 1px 0 0 0 rgba(0, 0, 0, 0.01) inset, 0.45em 0 0.3em -0.2em rgba(0, 0, 34, 0.09) inset, -0.2em -0.3em 0.3em -0.07em rgba(0, 0, 0, 0.08) inset;
}
.mm-item::after,
.mm-item:last-of-type::before {
display: block;
content: '';
position: absolute;
z-index: -1;
transition: 250ms;
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.mm-item::after {
top: 4.7em;
left: 0;
width: 90.8%;
height: 110%;
background: linear-gradient(205deg, rgba(0, 0, 34, 0.3), rgba(255, 255, 255, 0));
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.mm-item:hover::after {
top: 4.8em;
height: 125%;
}
.mm-item:focus::after,
.mm-item:active::after {
top: 4.6em;
height: 95%;
}
.mm-item:last-of-type::before {
top: 1px;
right: 0;
width: 42.4%;
height: 160%;
background: linear-gradient(115deg, rgba(0, 0, 34, 0.3), rgba(255, 255, 255, 0));
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.mm-item:last-of-type:hover::before {
width: 44.4%;
height: 180%;
}
.mm-item:last-of-type:focus::before,
.mm-item:last-of-type:active::before {
width: 41.4%;
height: 140%;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.mm-item::after {
width: 91%;
}
}
@media only screen and (height: 300px) {
.mm-menu {
font-size: 1.5rem;
}
.mm-item:nth-of-type(1) {
top: -0.35em;
background-position: 0 0%;
}
.mm-item:nth-of-type(1)::after {
top: 4.8em;
}
.mm-item:nth-of-type(2) {
box-shadow: 0 0.2em 0.3em -2px rgba(255, 255, 255, 0.6) inset, -1px -1px 0 0 rgba(0, 0, 0, 0.03) inset, 0.3em 0 0.2em -2px rgba(0, 0, 0, 0.05) inset, -0.2em -0.2em 0.3em -2px rgba(0, 0, 0, 0.08) inset;
}
.mm-item:nth-of-type(3) {
top: -0.15em;
background-position: 0 100%;
box-shadow: 0 0.2em 0.3em -2px rgba(255, 255, 255, 0.6) inset, -1px -1px 0 0 rgba(0, 0, 0, 0.03) inset, 0.3em 0 0.2em -2px rgba(0, 0, 0, 0.05) inset, -0.2em -0.2em 0.3em -2px rgba(0, 0, 0, 0.08) inset;
}
.mm-item:nth-of-type(3)::after {
top: 4.6em;
}
.mm-item:last-of-type::before {
width: 43.4%;
}
}
2 Responses