I was messing around with CSS3 gradients, rounded corners and shadows, and I thought to myself, “I wonder if I can draw something that actually looks like something?” Lo and behold, I could. I decided to go with a smiley face, since it would need circles, ovals and some random shapes. It would also require gradients and shadows. After a few failed attempts, I somehow managed to figure it out and the outcome is pretty cool.
It really amazes me that CSS3 has the power to create something like this. I tested it out in Firefox, Safari and Chrome. They all look good. Of course, in IE it looks like this…
It’s like IE is living in 1986.
Here is the HTML:
Here is the CSS:
div.smileyface {
width: 300px;
height: 300px;
position: relative;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
display: block;
background: #ffe632;
background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
}
p.eyes {
width: 50px;
height: 80px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: 40px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}
p.eyes.lefteye {
left: 75px;
}
p.eyes.righteye {
right: 75px;
}
div.smile {
width: 200px;
height: 70px;
border: 10px solid #222;
border-top: 0;
background: rgba(0,0,0,0);
-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
border-radius: 0 0 120px 120px / 0 0 90px 90px;
position: absolute;
bottom: 50px;
left: 38px;
box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
}
div.corner {
width: 10px;
height: 30px;
background: #222;
border-radius: 100px/160px;
-webkit-border-radius: 100px 160px;
-moz-border-radius: 100px/160px;
position: absolute;
top: -12px;
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
left: -12px;
}
div.corner.right {
left: 202px;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
}
Inspiration:
