Created
April 17, 2013 18:46
-
-
Save mose/5406723 to your computer and use it in GitHub Desktop.
A CodePen by Mose. Face box-shadows
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="face"> | |
<div class="eye left"></div> | |
<div class="eye right"></div> | |
<div class="nose"></div> | |
<div class="mouth"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body { | |
margin: 0; | |
padding: 0; | |
height: 100%; | |
} | |
body{ | |
background: -webkit-linear-gradient(top, #369 0%, #fff 100%); | |
background: -moz-linear-gradient(top, #369 0%, #fff 100%); | |
} | |
#face { | |
background: #da9; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 100px; | |
height: 150px; | |
margin-top: -80px; | |
margin-left: -3pc; | |
text-align: center; | |
border-radius: 90% 90% 50% 50%; | |
border: 2px solid #000; | |
box-shadow: 0 0 150px 100px #fff; | |
cursor: pointer; | |
} | |
#face:active { | |
width: 120px; | |
height: 170px; | |
margin-top: -80px; | |
margin-left: -4pc; | |
background: #e99; | |
} | |
.eye { | |
position: absolute; | |
top: 60px; | |
width: 30px; | |
height: 20px; | |
background-color: #fff; | |
background: -moz-radial-gradient(top, #246 40%, #fff 41%); | |
background: -webkit-radial-gradient(top, #246 40%, #fff 41%); | |
border: 1px solid #000; | |
border-top: 4px solid #000; | |
box-shadow: | |
inset 0px 2px 3px #000, | |
inset 0px -2px 1px #000, | |
0 4px 6px 2px #da9, | |
0 6px 0 5px #b87; | |
z-index: 8; | |
} | |
#face:hover .eye { | |
background: -moz-radial-gradient(center, #246 40%, #fff 42%); | |
background: -webkit-radial-gradient(center, #246 40%, #fff 42%); | |
height: 40px; | |
top: 40px; | |
-moz-transition: 1s; | |
-webkit-transition: 1s; | |
transition: 1s; | |
} | |
#face:active .eye { | |
box-shadow: | |
inset 0px 2px 3px #000, | |
inset 0px -2px 1px #000, | |
0 4px 6px 2px #e99, | |
0 6px 0 5px #b87; | |
} | |
.eye.left { | |
left: 15px; | |
border-radius: 0 0 30% 50%; | |
} | |
#face:hover .eye.left { | |
border-radius: 60% 30% 30% 60%; | |
-moz-transition: 1s; | |
-webkit-transition: 1s; | |
transition: 1s; | |
} | |
.eye.right { | |
right: 15px; | |
border-radius: 0 0 50% 30%; | |
} | |
#face:hover .eye.right { | |
border-radius: 30% 60% 60% 30%; | |
-moz-transition: 1s; | |
-webkit-transition: 1s; | |
transition: 1s; | |
} | |
.left:after { | |
content: ''; | |
position: absolute; | |
border-radius: 5px 10px 0 0; | |
height: 20px; | |
top: -25px; | |
left: -5px; | |
right: -5px; | |
z-index: 10; | |
border-top: 8px solid #000; | |
transform: rotate(10deg); | |
} | |
#face:hover .left:after { | |
top: -15px; | |
transform: rotate(-10deg); | |
-moz-transition: 1s; | |
-webkit-transition: 1s; | |
transition: 1s; | |
} | |
.right:after { | |
content: ''; | |
position: absolute; | |
border-radius: 0 0 5px 10px; | |
height: 20px; | |
top: -35px; | |
left: -5px; | |
right: -5px; | |
z-index: 10; | |
border-bottom: 8px solid #000; | |
transform: rotate(-10deg); | |
} | |
#face:hover .right:after { | |
top: -15px; | |
border-radius: 10px 5px 0 0; | |
border-bottom: 0; | |
border-top: 8px solid #000; | |
transform: rotate(10deg); | |
} | |
.nose { | |
position: absolute; | |
height: 40px; | |
width: 40px; | |
background-color: #da9; | |
left: 50%; | |
top: 50%; | |
margin-left: -20px; | |
transform: rotate(45deg); | |
border-radius: 100%; | |
z-index: 5; | |
box-shadow: 3px 3px 3px -3px #000, inset -2px 2px 1px #fff; | |
} | |
#face:active .nose { | |
background-color: #e99; | |
box-shadow: 3px 3px 3px -3px #000, inset -2px 2px 2px #fff; | |
} | |
.nose:before { | |
content: ''; | |
position: absolute; | |
border-radius: 0 0 5px 5px; | |
background-color: #da9; | |
height: 20px; | |
width: 20px; | |
top: 0px; | |
left: 25px; | |
z-index: 10; | |
transform: rotate(-45deg); | |
z-index: 3; | |
box-shadow: 0 5px 3px -3px #000, inset -2px 2px 1px #fff; | |
} | |
#face:active .nose:before { | |
background-color: #e99; | |
} | |
.nose:after { | |
content: ''; | |
position: absolute; | |
border-radius: 0 0 5px 5px; | |
background-color: #da9; | |
height: 20px; | |
width: 20px; | |
top: 25px; | |
left: 00px; | |
z-index: 10; | |
transform: rotate(-45deg); | |
z-index: 2; | |
box-shadow: -1px 5px 3px -3px #000, inset 2px 2px 1px #a97; | |
} | |
#face:active .nose:after { | |
background-color: #e99; | |
} | |
.mouth { | |
position: absolute; | |
height: 20px; | |
width: 50px; | |
background-color: #d77; | |
left: 25px; | |
bottom: 10px; | |
margin-left: -20px; | |
transform: rotate(4deg); | |
border-radius: 100%; | |
box-shadow: 3px 3px 3px -3px #000, inset -2px 2px 1px #fff; | |
border: 1px solid #000; | |
z-index: 5; | |
} | |
.mouth:after { | |
content: ''; | |
position: absolute; | |
height: 10px; | |
width: 80px; | |
background-color: #d77; | |
left: 15px; | |
bottom: 10px; | |
margin-left: -20px; | |
transform: rotate(7deg); | |
border-radius: 100%; | |
box-shadow: 3px 3px 3px -3px #000, inset -2px 2px 1px #fff; | |
border: 1px solid #000; | |
z-index: 20; | |
} | |
#face:hover .mouth { | |
width: 30px; | |
bottom: 0px; | |
left: 30px; | |
-moz-transition: .1s; | |
-webkit-transition: .1s; | |
transition: .1s; | |
} | |
#face:hover .mouth:after { | |
left: 20px; | |
bottom: 5px; | |
width: 30px; | |
height: 20px; | |
box-shadow: none; | |
background-color: #000; | |
-moz-transition: .1s; | |
-webkit-transition: .1s; | |
transition: .1s; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment