CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com:80/tutorials/draw-smiley-face-css3/","20100820041257","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1282277577"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content="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 s..."/> <meta name="keywords" content="behold,Chrome,Circles,course,css3,deg,div,failed attempts,ffe,gradients,height,html,inset,inspiration,lefteye,linear gradient,ovals,position,power,radius,random shapes,rgba,safari,smile,smiley face,smileyface,something,"/> <title>How to Draw a Smiley Face with CSS3 | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20100820041257cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20100820041257im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com » Feed" href="https://web.archive.org/web/20100820041257/http://bavotasan.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com » Comments Feed" href="https://web.archive.org/web/20100820041257/http://bavotasan.com/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com » How to Draw a Smiley Face with CSS3 Comments Feed" href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/draw-smiley-face-css3/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20100820041257js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://bavotasan.com/xmlrpc.php?rsd"/> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://bavotasan.com/wp-includes/wlwmanifest.xml"/> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="Use jQuery to Replace a Word with a Link" href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/jquery-replace-word-with-link/"/> <link rel="next" title="Optimizing your MySQL Database" href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/optimizing-your-mysql-database/"/> <link rel="canonical" href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/draw-smiley-face-css3/"/> <link rel="shortlink" href="https://web.archive.org/web/20100820041257/http://wp.me/pmjlM-GD"/> <script type="text/javascript" src="https://web.archive.org/web/20100820041257js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="How to Draw a Smiley Face with CSS3"/> <meta property="og:description" content="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 [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20100820041257im_/http://bavotasan.com/wp-content/uploads/2010/08/smileyface.jpg"/> </head> <body class="single single-post postid-2643"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20100820041257/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20100820041257/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20100820041257/http://support.bavotasan.com/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20100820041257/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/"> <img src="https://web.archive.org/web/20100820041257im_/http://bavotasan.com/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> </a> </div> <div id="follow"> <a href="https://web.archive.org/web/20100820041257/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/feed/" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/">Home</a></li> <li id="menu-item-2266"><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/category/articles/">Articles</a></li> <li id="menu-item-2265" class="current-menu-item"><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/category/tutorials/">Tutorials</a></li> <li id="menu-item-2267"><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/category/downloads/">Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Aug</div><div class="day">10</div><div class="year">2010</div></div> <h1>How to Draw a Smiley Face with CSS3</h1> 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. <div class="smileyface"> <div class="smile"> <div class="corner"></div> <div class="corner right"></div> </div> </div> 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… <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/wp-content/uploads/2010/08/smileyie.jpg"><img src="https://web.archive.org/web/20100820041257im_/http://bavotasan.com/wp-content/uploads/2010/08/smileyie.jpg" alt="" title="smileyie" width="300" height="300" class="nobox aligncenter size-full wp-image-2654"/></a> It’s like IE is living in 1986. Here is the HTML: <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><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></pre></div></td></tr></table></div> Here is the CSS: <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">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); }</pre></div></td></tr></table></div> Inspiration: <ul> <li><a href="https://web.archive.org/web/20100820041257/http://desandro.com/articles/opera-logo-css/">http://desandro.com/articles/opera-logo-css/</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://cordobo.com/wp-content/uploads/ie-pure-css-logo/">http://cordobo.com/wp-content/uploads/ie-pure-css-logo/</a></li> </ul> <div class="buttonbox"> </div> </div> <div class="post"> <div class="socialleft">If you liked reading this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20100820041257/http://twitter.com/home?status=How to Draw a Smiley Face with CSS3 http://bavotasan.com/tutorials/draw-smiley-face-css3/ (via @bavotasan)" title="Click to send this page to Twitter!" target="_blank" rel="nofollow"><img src="https://web.archive.org/web/20100820041257im_/http://bavotasan.com/images/icons/twitter.png" width="16" height="16" alt="Twitter"/></a></li> <li><a href="https://web.archive.org/web/20100820041257/http://www.facebook.com/sharer.php?u=http://bavotasan.com/tutorials/draw-smiley-face-css3/&t=How to Draw a Smiley Face with CSS3" title="Click to send this page to Facebook!" target="_blank" rel="nofollow"><img src="https://web.archive.org/web/20100820041257im_/http://bavotasan.com/images/icons/facebook.png" width="16" height="16" alt="Facebook"/></a></li> <li><a href="https://web.archive.org/web/20100820041257/http://digg.com/submit?phase=2&url=http://bavotasan.com/tutorials/draw-smiley-face-css3/&title=How to Draw a Smiley Face with CSS3&bodytext=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 [...]" title="Digg" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100820041257im_/http://bavotasan.com/images/icons/digg.png" width="16" height="16" alt="Digg"/></a></li> <li><a href="https://web.archive.org/web/20100820041257/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20100820041257/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/draw-smiley-face-css3/')+'&title='+encodeURIComponent('How to Draw a Smiley Face with CSS3'),'delicious', 'toolbar=no,width=550,height=550'); return false;"><img src="https://web.archive.org/web/20100820041257im_/http://bavotasan.com/images/icons/delicious.png" width="16" height="16" alt="Delicious"/></a></li> <li><a href="https://web.archive.org/web/20100820041257/http://www.stumbleupon.com/submit?url=http://bavotasan.com/tutorials/draw-smiley-face-css3/&title=How to Draw a Smiley Face with CSS3" title="StumbleUpon" rel="nofollow" target="_blank"><img src="https://web.archive.org/web/20100820041257im_/http://bavotasan.com/images/icons/stumbleupon.png" width="16" height="16" alt="StumbleUpon"/></a></li> <li><iframe src="https://web.archive.org/web/20100820041257if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fdraw-smiley-face-css3%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"> Tags: <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/behold/" rel="tag">behold</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/chrome/" rel="tag">Chrome</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/circles/" rel="tag">Circles</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/course/" rel="tag">course</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/css3/" rel="tag">css3</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/deg/" rel="tag">deg</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/div/" rel="tag">div</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/failed-attempts/" rel="tag">failed attempts</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/ffe/" rel="tag">ffe</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/gradients/" rel="tag">gradients</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/height/" rel="tag">height</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/html/" rel="tag">html</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/inset/" rel="tag">inset</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/inspiration/" rel="tag">inspiration</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/lefteye/" rel="tag">lefteye</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/linear-gradient/" rel="tag">linear gradient</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/ovals/" rel="tag">ovals</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/position/" rel="tag">position</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/power/" rel="tag">power</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/radius/" rel="tag">radius</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/random-shapes/" rel="tag">random shapes</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/rgba/" rel="tag">rgba</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/safari/" rel="tag">safari</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/smile/" rel="tag">smile</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/smiley-face/" rel="tag">smiley face</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/smileyface/" rel="tag">smileyface</a>, <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tag/something/" rel="tag">something</a> Short URL: <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/?p=2643" title="How to Draw a Smiley Face with CSS3">http://bavotasan.com/?p=2643</a> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/" rel="bookmark" title="Permanent Link to A Simple CSS Trick to Vertically Align Text">A Simple CSS Trick to Vertically Align Text</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/display-rss-feed-with-php/" rel="bookmark" title="Permanent Link to An Easy Way to Display an RSS Feed with PHP">An Easy Way to Display an RSS Feed with PHP</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/tips-speed-up-jquery/" rel="bookmark" title="Permanent Link to 6 Tips to Speed Up jQuery">6 Tips to Speed Up jQuery</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/articles/a-complete-re-design/" rel="bookmark" title="Permanent Link to A Complete Re-Design">A Complete Re-Design</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/define-constant-php/" rel="bookmark" title="Permanent Link to Defining a Constant with PHP">Defining a Constant with PHP</a></li> </ul> </div>  <div id="bsap_1249050" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply <a rel="nofollow" id="cancel-comment-reply-link" href="/web/20100820041257/http://bavotasan.com/tutorials/draw-smiley-face-css3/#respond" style="display:none;">Cancel reply</a></h3> <form action="https://web.archive.org/web/20100820041257/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> Your email address will not be published. Required fields are marked * <label for="author">Name</label> *<input id="author" name="author" type="text" value="" size="30" aria-required="true"/> <label for="email">Email</label> *<input id="email" name="email" type="text" value="" size="30" aria-required="true"/> <label for="url">Website</label><input id="url" name="url" type="text" value="" size="30"/> To enter code in the comment box, please place it between <pre lang="php"> </pre> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor. <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="2643" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20100820041257/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>   <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/" title="Retrieve and Display Images from a WordPress Post">Retrieve and Display Images from a WordPress Post</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/" title="Easy Overlay Modal Window jQuery Plugin">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/6-free-vinyl-record-vectors/" title="6 Free Vinyl Record Vectors">6 Free Vinyl Record Vectors</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20100820041257/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20100820041257/http://wordcampmontreal.org/" title="I'm Speaking at WordCamp Montreal 2010 - Aug 28-29" class="wordcamp"></a> <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20100820041257/https://www.e-junkie.com/ecom/gb.php?cl=88539&c=ib&aff=93121" class="digwp"></a> <a href="https://web.archive.org/web/20100820041257/https://www.e-junkie.com/ecom/gb.php?cl=94455&c=ib&aff=93121" target="ejejcsingle" class="defender"></a> <a href="https://web.archive.org/web/20100820041257/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <a href="https://web.archive.org/web/20100820041257/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20100820041257/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for FREE? All you need to do is <a href="https://web.archive.org/web/20100820041257/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/free-premium-theme/" class="fr">Click here for more information »</a> </div> <div class="side-widget"> <h4>Support c.bavota</h4> If you would like to support <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know). <a href="https://web.archive.org/web/20100820041257/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top</a> <div class="col col1"> <h4 class="one">Stay in Touch</h4> <a href="https://web.archive.org/web/20100820041257/http://twitter.com/bavotasan" class="footer-twitter">Follow me on Twitter</a> <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/feed/" class="footer-rss">Subscribe to my RSS Feed</a> <h4 class="two">Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three">Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind v1.1.2 Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/illustrious-premium-wordpress-theme/">Illustrious Premium WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> </ul> </div> <div class="col col3"> <h4 class="four">Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/optimizing-your-mysql-database/">Optimizing your MySQL Database</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/draw-smiley-face-css3/">How to Draw a Smiley Face with CSS3</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/jquery-replace-word-with-link/">Use jQuery to Replace a Word with a Link</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/">A Simple CSS Trick to Vertically Align Text</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/using-ajax-with-wordpress/">Using Ajax with WordPress</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/blindtoggle-for-jquery/">Blind Toggle for jQuery</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/shorten-your-post-titles-in-wordpress/">Shorten Your Post Titles in WordPress</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/display-rss-feed-with-php/">An Easy Way to Display an RSS Feed with PHP</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/tips-speed-up-jquery/">6 Tips to Speed Up jQuery</a></li> <li><a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/tutorials/excluding-pages-from-wordpress-search/">Excluding Pages from WordPress Search</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20100820041257/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20100820041257/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20100820041257js_/http://stats.wordpress.com/e-201033.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'2643'}); var load_cmc = function(){linktracker_init(5317602,2643,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20100820041257js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20100820041257/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>