One of the coolest things about jQuery is that you can experiment with it, like with this animated robot. Here is a sample of how one can do this, based on Anthony Calzadilla’s design.

It’s easy to modify and loads fast, with the end product similar to Flash designs but with more advantages. Web designers and developers are sure to find this tutorial inspiring!

Click on the above image to see the demo.

Below are the codes for this awesome animation.

Markup

<div id="wrapper">

<div id="cloud-01">

<div id="cloud-02">

<div id="mountains-03">

<div id="ground">

<div id="full-robot">

<div id="branding"><h1>Robot Head.</h1></div>

<div id="content"><p> Robot Chest.</p></div>

<div id="sec-content"><p> Robot Pelvis.</p></div>

<div id="footer"><p> Robot Legs.</p></div>

</div>

</div>

</div>

</div>

</div>

</div>

CSS Style

h1, p { position: absolute; left: -9999px; }

div {position: relative;}

#wrapper { background: #bedfe4 url(../images/sun.png) no-repeat left -30px; border: 5px solid #402309;}

#cloud-01 { background: url(../images/clouds-01.png) no-repeat left -100px; }                                                         

#cloud-02 {                  background: url(../images/clouds-02.png) no-repeat left top; }

#mountains-03 { background: url(../images/mountain-03.png) no-repeat left bottom; }

#ground { background: url(../images/ground-05.png) no-repeat left bottom; }

#full-robot { width: 271px; }

#branding {
                    background: url(../images/robot-head.png) no-repeat center top;
                    width: 271px;
                    height: 253px;
                    z-index: 4;
                    }

#content {
                    background: url(../images/robot-torso.png) no-repeat center top;
                    width: 271px;
                    height: 164px;
                    z-index: 3;
                    margin-top: -65px;
                    }

#sec-content {
                    background: url(../images/robot-hips.png) no-repeat center top;
                    width: 271px;
                    height: 124px;
                    z-index: 2;
                    margin-top: -90px;
                    }

#footer {
                    background: url('../images/robot-legs.png') no-repeat center top;
                    width: 271px;
                    height: 244px;
                    z-index: 1;
                    margin-top: -90px;
                    }

jQuery Javascript

$(document).ready(function(){
$('#cloud-01').css({backgroundPosition: '0 -80px'});
$('#cloud-02').css({backgroundPosition: '0 -30px'});
$('#mountains-03').css({backgroundPosition: '0 50px'});
$('#trees-04').css({backgroundPosition: '0 50px'});
$('#ground').css({backgroundPosition: 'left bottom'});
$('#branding').css({backgroundPosition: 'center 0'});
$('#content').css({backgroundPosition: 'center 0'});
$('#sec-content').css({backgroundPosition: 'center 0'});
$('#footer').css({backgroundPosition: 'center 0'});
$('#wrapper').css({overflow: "hidden"});

                    $('#klicker').click(function(){
                                         $('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 20000);
                                         $('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 20000);
                                         $('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 20000);
                                         $('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 20000);

                    startHim();

                    $("#full-robot").animate({left:"50%",marginLeft:"-150px"}, 2000);
                    setTimeout("leaveScreen()",15000);
                    });

});

var num = 1;

function startHim(){
                    num++;
                    $("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
                    $("#content,#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num+"px"},150);
                    if(num<4){
                                         setTimeout("startHim()",300);
                    } else {
                                         setTimeout("bounceHim()",300);
                    }
}

function bounceHim(){
                    $("#sec-content,#branding").animate({top:"-=4px"},150).animate({top:"+=4px"},150);
                                         $("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150);
                    setTimeout("bounceHim()",300);
}

function leaveScreen(){
                    $("#full-robot").animate({left:"100%",marginLeft:"0px"}, 2000);
}

Incoming search terms for the article:

• $(#content) animate margin-right
• animated pictures
• any simple cartoon borders
• html5 jquery animation robot
• png cartoon
• robotics animation jquery

You may download a copy of the light version here or the full version here.

Below are snippets of the plugin:

CSS

#magazine{

width:800px;

height:400px;

}

#magazine .turn-page{

width:400px;

height:400px;

background-color:#ccc;

}

HTML

<div id='magazine'>

<div> Page   1 </div>

<div> Page   2 </div>

<div> Page   3 </div>

</div>

jQuery

$('#magazine').turn();

That’s it! The plugin requires jQuery 1.7 or later and only weighs in at 15K. It also works on tablets and smartphones.

Incoming search terms for the article:

• jquery multi book flip
• html5 design effect
• jquery book
• animated page flip demo in jquery
• turn js flip turning
• pageflip mootools
• page flip effect html5
• jquery page flip demo
• jquery book flip
• jquery

Click on the image for the demo.

Download the zip file.

CSS

.slider.default

{

background-color: #D2DBEC;

border: 1px solid #299BC9;

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;

width: 200px;

height: 4px;

background-image: -o-linear-gradient(#ADC7EB, #D2DBEC);

}

.inner.default

{

background: #299BC9;

-moz-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;

-webkit-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;

}

.draghandle.default

{

width: 8px;

height: 20px;

background-color: #299BC9;

}

.draghandle.default.selected

{

background-color: #ADC7EB;

}

The above code is for the default theme, and you can change it into your theme name. Aside from the default theme, you can choose from the following theme colors: simple, blue, steel, green, dark-green, orange and red.

When your theme is all set, you can use it like so:

$('#my-slider').jqslider({theme:'YOUR THEME NAME HERE'});

Add the following in the head section of your HTML file

1. Add a reference to latest jQuery script
2. Add a reference to jqslider.js
3. Add a reference to jqslider.css

Add block element (div) within body of HTML and assign id and call jqslider initialize function.

<div id="jqslider"></div>

<script type="text/javascript">

$(document).ready(function() {

$('#jqslider').jqslider({ theme:'steel' });

});

</script>

Incoming search terms for the article:

• blogger jQuery
• jquery chart fillcolor
• jquery multi range slider
• jquery multi slider range
• jquery range slider -ui

You can check out the full tutorial HERE.

Incoming search terms for the article:

• interactive jquery map
• jquery interactive map
• jvectormap tutorial
• jvectormap
• javascript heat map
• extra maps for jvectormap
• jqurery interactive map
• jvectormap automatic color
• jvectormap converter
• jvectormap database

• Dennis Sa - for the jsbin of the matte buttons http://jsbin.com/efesot/6
• Trevor Gerzen – for applying the transitions, and
• Chris Coyier – for coming up with this neat trick and sharing it on the web.

HTML

As for the base styles for all three states (default, hover, active):

CSS

NOTE: This is short tutorial just teaches you how to mimic the look and not the function. So if you want to be able to include menu functionality on the buttons (like YouTube does) you can check out this link and try incorporating the code there with the one here.

Demo

Download Files

Incoming search terms for the article:

• popup white css
• youtube icons
• button popup css
• youtube
• how to design button like youtube with css
• free css web popup design
• css3 free template
• css youtube style button
• Cool 61 css
• youtube style popup buttons

Download the development version and production version zip files.

HTML

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″>

<title>tinyTips 1.0</title>

<link rel=”stylesheet” type=”text/css” media=”screen” href=”/path/to/yourStyleSheet.css” />

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>

<script type=”text/javascript” src=”/path/to/jquery.tinyTips.js”></script>

<script type=”text/javascript”>

$(document).ready(function() {

$(‘a.tTip’).tinyTips(‘light’, ‘title’);

});

</script>

</head>

<body>

<div id=”global_wrapper”>

<h1>Testing tinyTips</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<a class=”tTip” href=”#” title=”This tooltip is using the title of this anchor tag.”>Aenean ut nunc metus</a>, gravida tincidunt libero.

Proin molestie risus at odio luctus condimentum. Sed molestie bibendum orci a faucibus. Vivamus vel lorem ut augue laoreet cursus.

Maecenas vestibulum nibh non nibh viverra posuere. Sed <a href=”#” title=”This one is also using the title.”>tristique eleifend</a> elit sit amet varius.</p>

</div>

</body>

</html>

jQuery/Javascript

Place the following at the head of your page as you include the TinyTips and jQuery.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>

<script type=”text/javascript” src=”/path/to/jquery.tinyTips.js”></script>

To add tooltips, use the following:

<script type=”text/javascript”>

$(document).ready(function() {

$(‘a.tTip’).tinyTips(‘light’, ‘title’);

});

</script>

Do provide a tooltip style and content attribute.

Add the following to the stylesheet. You can create your own style by naming the class .yournameTip and use your name as the tip style. By using the dev version, you can also modify the markup for tooltips.

.lightTip                       { width: 342px; }

.lightTip .content              { width: 310px; padding: 10px; border: 6px solid #e2e2e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #ffffff; color: #020202; }

.lightTip .bottom               { height: 14px; background: url(../images/notch-white.png) top center no-repeat; }

.yellowTip                      { width: 342px; }

.yellowTip .content             { width: 310px; padding: 10px; border: 6px solid #f9e98e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbf7aa; color: #020202; }

.yellowTip .bottom              { height: 14px; background: url(../images/notch-yellow.png) top center no-repeat; }

.orangeTip                      { width: 342px; }

.orangeTip .content             { width: 310px; padding: 10px; border: 6px solid #f9cd8e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbe3aa; color: #020202; }

.orangeTip .bottom              { height: 14px; background: url(../images/notch-orange.png) top center no-repeat; }

.redTip                         { width: 342px; }

.redTip .content                { width: 310px; padding: 10px; border: 6px solid #ce6f6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #f79992; color: #020202; }

.redTip .bottom                 { height: 14px; background: url(../images/notch-red.png) top center no-repeat; }

.greenTip                       { width: 342px; }

.greenTip .content              { width: 310px; padding: 10px; border: 6px solid #a9db66; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #cae8a2; color: #020202; }

.greenTip .bottom               { height: 14px; background: url(../images/notch-green.png) top center no-repeat; }

.blueTip                        { width: 342px; }

.blueTip .content               { width: 310px; padding: 10px; border: 6px solid #36a4d9; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #90d8f0; color: #020202; }

.blueTip .bottom                { height: 14px; background: url(../images/notch-blue.png) top center no-repeat; }

.purpleTip                      { width: 342px; }

.purpleTip .content             { width: 310px; padding: 10px; border: 6px solid #8671de; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #a290f0; color: #020202; }

.purpleTip .bottom              { height: 14px; background: url(../images/notch-purple.png) top center no-repeat; }

.darkTip                        { width: 342px; }

.darkTip .content               { width: 310px; padding: 10px; border: 6px solid #303030; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #505050; color: #f8f8f8; }

.darkTip .bottom                { height: 14px; background: url(../images/notch-dark.png) top center no-repeat; }

Incoming search terms for the article:

• jquery light menu
• tinytips plugin
• path app tooltip jquery
• popup jquery TEXT IMAGE
• TinyTips document
• googleapis jquery
• tinytips js explorer 9
• tinytips js
• TinyTips jQuery Plugin
• tinytips jquery

Horizontal Grid

Vertical Grid

The concept is inspired by one Richard Rutter with his article Compose to a Vertical Rhythm. If you’re having trouble trying to align your site’s font with the grid because of the size variation, you can use a few tools like Baseline Rhythm Calculator, Grid bookmarklet, and Adobe Air EM calculator to help you out with the math. Or better yet, try getting some EM-based CSS.

Incoming search terms for the article:

• grid css
• simple website templates quaint

Click on the images below to view and grab them for free.

Vector Patterns Set 12 Patterns

Grunge Stripes Patterns

Spring Pattern

Floral Vector Pattern

Geometric Pattern Set

Renaissance Spring

Abstract Patterns

Paper Flowers Pattern

Diamonds and Gears Pattern

Abstract Patterns

Blue Patterns

Seamless Camouflage Background Pattern

Pattern Kit One

Seamless Flower Patterns

Hand-Drawn Floral

Grey Seamless Pattern Set for Web Designers

TipClique Patterns

Four Seamless Vector Patterns

Vintage Floral

Vector Flower Set 02

Branches

Zebra Print Vector Pattern

Free Vector Guilloche Pattern

Baby Pink Pastel Tileable Pattern

Photoshop Pattern Pack

Vintage Retro Grunge Patterns

Micro Patterns

New Seamless Pattern Background

Colour Pattern Pack

Mandala Madness Vector

Incoming search terms for the article:

• blue print geometric seamless
• beautiful seamless noise backgrounds
• zebra pattern eps
• tumblr vintage pattern seamless
• pattern backgrounds
• seamless pattern
• spring pattern
• tileable animal print
• tileable zebra patterns
• website vintage seamless background patterns generator

Download the ZIP FILE.

HTML (star_rating.html)

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JQuery-Star Comment Rating</title>

<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/star_rating.js"></script>

<style type="text/css">

#rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}

#rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; width: 0px; height: 21px; position: relative; z-index: 50; top: -21px; }

#rated { display: none; width: 138px; padding: 3px 0px 3px 2px; height: 23px; background-color: #1E1D1C; height: 17px;font-size: 11px;color: #FFC910;}

#rated div { display: block; float: left; }

#rating { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFC910; padding-left: 3px; width: 22px; }

#small_stars { height: 11px; width: 69px; background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line-height: 11px; margin-top:3px; }

#rate_edit { line-height: 17px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFF; padding-left: 9px; cursor: pointer; }

#rate_edit:hover { text-decoration: underline; }

#rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}

#rating_btns ul, #rating_btns li { padding: 0; margin: 0; }

#rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1E1D1C;

}

</style>

</head>

<body>

<div id="rating_cont">

<div id="rating_btns">

<ul>

<li>0.5</li>

<li>1.0</li>

<li>1.5</li>

<li>2.0</li>

<li>2.5</li>

<li>3.0</li>

<li>3.5</li>

<li>4.0</li>

<li>4.5</li>

<li>5.0</li>

</ul>

</div>

<div id="rating_on" >&nbsp;</div>

<div id="rated">

<div id="rating" style="height: 17px; line-height: 17px;">not rated</div>

<div> &#8211; &nbsp;</div>

<div id="small_stars">&nbsp;</div>

<div id="rate_edit">edit</div>

</div>

</div>

<input type="hidden" id="rating_output" name="rating_output" />

</body>

</html>

jQuery/Jvascript (star_rating.js)

/*

* Written by eligeske

* downloaded from eligeske.com

* have fun. nerd.

*/

$(document).ready(function(){

// hover

$('#rating_btns li').hover(function(){

$rating = $(this).text();

$('#rating_on').css('width', rateWidth($rating));

});

// mouseout

$('#rating_btns li').mouseout(function(){

$rating = $('#rating').text();

if($rating == "not rated"){

$('#rating_on').css('width', "0px");

}

else{

$('#rating_on').css('width', rateWidth($rating));

}

});

//click

$('#rating_btns li').click(function(){

$rating = $(this).text();

$('#rating').text($rating);

$('#rating_output').val($rating);

$pos = starSprite($rating);

$('#small_stars').css('background-position', "0px " + $pos );

$('#rating_btns').hide();

$('#rating_on').hide();

$('#rated').fadeIn();

});

//edit

$('#rate_edit').click(function(){

$('#rated').hide();

$('#rating_btns').fadeIn();

$('#rating_on').fadeIn();

});

function rateWidth($rating){

$rating = parseFloat($rating);

switch ($rating){

case 0.5: $width = "14px"; break;

case 1.0: $width = "28px"; break;

case 1.5: $width = "42px"; break;

case 2.0: $width = "56px"; break;

case 2.5: $width = "70px"; break;

case 3.0: $width = "84px"; break;

case 3.5: $width = "98px"; break;

case 4.0: $width = "112px"; break;

case 4.5: $width = "126px"; break;

case 5.0: $width = "140px"; break;

default: $width = "84px";

}

return $width;

}

function starSprite($rating){

$rating = parseFloat($rating);

switch ($rating){

case 0.5: $pos = "-11px"; break;

case 1.0: $pos = "-22px"; break;

case 1.5: $pos = "-33px"; break;

case 2.0: $pos = "-44px"; break;

case 2.5: $pos = "-55px"; break;

case 3.0: $pos = "-66px"; break;

case 3.5: $pos = "-77px"; break;

case 4.0: $pos = "-88px"; break;

case 4.5: $pos = "-99px"; break;

case 5.0: $pos = "-110px"; break;

default: $pos = "-77px";

}

return $pos;

}

});

Incoming search terms for the article:

• jquery rating
• 5 star vote jquery
• rating jquery
• jquery stars background
• jquery star rating
• jquery ratings
• jquery rating tool
• jquery rating system with comments
• jquery rating system
• jquery rating script

Small Stone Recordings – Here’s a perfect example of incorporating your site’s theme with the design. This immediately gives your site’s visitors an idea of what your site and business is all about.

Loodo – Now here’s a design that would appeal to anyone who enjoys playing traditional board games.

Fantasy Cartography – Talk about creating a site map! Here’s a very original approach in navigation menu design by Robin C. Kuprella. The areas of the site are linked directly on the home page map. Clicking on a link will change the content in the central content box.

Genes Sausage Shop – Here’s another good example of incorporating the site’s theme into the navigation menu design.

NickAd – This one may seem against every design principle of an effective navigation menu but it gets points for creativity and innovation. As one review site puts it, it’s “probably not the most practical menu available but certainly one of the coolest.” I agree; a first-time visitor may be caught off-guard by the seemingly unintuitive design but trust me, it will wow you.

CL Designz – The main navigation menu at the top of the page may not look like much but you will surely love and appreciate its secondary menu located on the right side. It is unique, fun and definitely practical.

Manic Design – This one’s definitely one of my favorites on this list. It is nicely positioned on the left and all of the options are always visible, animated, and best of all, responsive!

C & C Coffee – There’s just something visually pleasing and amusing about its fun Flash-based menu as it playfully dangles links from the top of the page.

Alexarts – True to its nature, this graphic arts site uses menu items that appeal to modern aesthetics that are also fun to interact with.

Tennessee Trains & Byways – Don’t let the discreet menu at the top of the page fool you — Tennessee Trains & Byways is in contention for the largest dropdown menu in the world. It manages to combine old-world elements with modern design, resulting in a charming and highly interactive menu and page layout.

Incoming search terms for the article:

• creative navigation bar