Made with
:before
pseudo andbox-shadow
. By Kaushalya Mandaliya.
A Pen by Kaushalya Mandaliya on CodePen.
<div class="mac"></div> |
Made with
:before
pseudo andbox-shadow
. By Kaushalya Mandaliya.
A Pen by Kaushalya Mandaliya on CodePen.
Made with
:before
pseudo andbox-shadow
. By Kaushalya Mandaliya.
A Pen by Kaushalya Mandaliya on CodePen.
/* | |
-- | |
-- 2015 by Kaushalya Mandaliya. | |
-- http://seebeetee.com | |
-- https://twitter.com/kmandalwala | |
-- | |
*/ |
@import "compass/css3"; | |
body { | |
background: #ddd; | |
} | |
.mac { | |
position: relative; | |
height: 30em; | |
width: 52%; | |
margin: 3em auto; | |
@include background(linear-gradient(top, #aaa 10%,#ddd 10%,#fff 90%)); | |
@include border-radius(0.5em); | |
@include box-shadow(inset 0 0.9em 1em #999); | |
} | |
.mac:before { | |
content: ''; | |
position: absolute; | |
height: 0.8em; | |
width: 0.8em; | |
margin: 1em; | |
@include border-radius(100%); | |
background: #ccc; | |
@include box-shadow(1.4em 0em #ccc, 2.8em 0em #ccc); | |
@include transition(0.3s all ease-in-out); | |
} | |
.mac:hover:before { | |
background: rgba(255, 0, 0, 0.8); | |
@include box-shadow(1.4em 0em rgba(255, 255, 0, 0.8), 2.8em 0em rgba(0, 255, 0, 0.8)); | |
} |