Aug
10
2010

How to Draw a Smiley Face with CSS3

by   |  Posted in Tutorials  |  9 comments

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:

<div class="smileyface">
    <p class="eyes lefteye"></p>
    <p class="eyes righteye"></p>
    <div class="smile">
        <div class="corner"></div>
        <div class="corner right"></div>
    </div>
</div>

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:

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
Share the love...

Tags: , , , , , , , , , , , , ,

Short URL: http://bit.ly/cbrBxa

Discussion 9 Comments

  1. news on August 21, 2010 at 10:01 pm

    it this is 2 years ago i can’t believe the smile face can be created with css3,you rock

  2. manik arum on August 22, 2010 at 12:11 am

    cool trick……..i like your words saying “It’s like IE is living in 1986″ lol

  3. Alex on September 28, 2010 at 3:16 am

    You are CSS guru – that’s right… But…
    I am wondering, where are we going with this approach to web design tools like css…
    Cheers

  4. Atlanta Web Design Company on November 3, 2010 at 3:27 am

    Gorgeous work.

  5. evan on November 6, 2010 at 6:17 pm

    hi – how long did it take you do this? like 20 hours, etc?

    it’s truly wonderful btw!

    • c.bavota on November 8, 2010 at 11:37 am

      Took a while to figure it out.

  6. Haab on November 19, 2010 at 3:33 pm

    Wow. this one is great. css 3 is kool

  7. Brittany Rubinstein on March 11, 2011 at 11:41 pm

    wow! Had no idea this was even possible with CSS. Nice work. May have to try this out!

  8. Rana on May 25, 2011 at 12:49 pm

    WOW!! Great!
    Next we want a Mona Lisa from you ?