bavotasan.com » power

How to Draw a Smiley Face with CSS3

c.bavota — Tue, 10 Aug 2010 22:52:43 +0000

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:

Quick & Easy Excerpt Mods Coming in WordPress 2.9

c.bavota — Wed, 28 Oct 2009 15:14:55 +0000

I just stumbled across these two little pieces of code and thought that they might be useful to some people out there who want to mess around with the default settings for the_excerpt() function in WordPress. The first one gives you the power to change the number of words displayed by the function the_excerpt(), and yes, you can have more than 55 words. The second piece of code allows you to change the trailing [...] that appears at the end of your excerpt.

Both features are set to be added to version 2.9 of WordPress, but the first currently works in version 2.8.5. Just add these to your theme’s functions.php file.

function new_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'new_excerpt_length');

Change the number “20″ to whatever number you want.

function new_excerpt_more($more) {
	return '[.....]';
}
add_filter('excerpt_more', 'new_excerpt_more');

Change “[.....]” to whatever you want.

13 Inspirational Design Resources for Web Developers

c.bavota — Wed, 23 Sep 2009 18:29:28 +0000

Whenever I feel stumped in regards to designing something for myself or one of my clients, I visit some of my favorite sites that focus on design. They are a great source of inspiration and keep me on my toes in regards to what my contemporaries are up to.

There are a plethora of sites available out there but I really only frequent the following 13.

CSS Remix

Premiere source for web-design inspiration and trends.
http://cssremix.com

Pattern Tap

A collection of interface design solutions from all over the web, where users can mark patterns they like, and learn from other’s design solutions
http://patterntap.com

The Design Inspiration

To make every designer’s life easier, we decided to feature the best logos, illustrations, websites, photos and patterns from the most talented designers from all around the world.
http://thedesigninspiration.com/

Feed My App

Feedmyapp is a Web 2.0 Directory with the best and latest web 2.0 sites and web 2.0 applications.
http://www.feedmyapp.com

Logopond

A place to fish for ideas, Brand and Identity showcase.
http://logopond.com

Communications Arts – Webpicks

Webpicks features outstanding examples of Web design selected based on a combination of superior aesthetics, technical expertise, functionality and overall site experience.
http://www.commarts.com/webpicks

DesignFlavr

Design Inspiration: A visual collection of some of the best talent in Design and Illustration served daily.
http://www.designflavr.com

Creattica

A gallery of fine design and inspiration imagery.
http://creattica.com

Design Meltdown

Design elements, trends, and problems in web design.
http://www.designmeltdown.com

Design Snack

A user-controlled web design showcase, providing the members with the power to decide which sites are showcased and which sites are not.
http://www.designsnack.com

Divine CSS

Showcasing some of the world’s best designed websites (Flash & CSS).
http://www.divinecss.com

Web Design Awards

A Flash and CSS gallery that showcases and awards the very best and most progressive design on the web. A source for inspiration and recognition.
http://websitedesignawards.com

CSS Mania

The most updated CSS showcase in all of the world.
http://cssmania.com