Our Solar System is by Alex Giron (@alexgiron), a web developer and designer from ‘Old Town Alexandria’ Virginia. He explains his experiment in a blog post:

These past few months I’ve been exploring CSS3, trying to learn some of it’s new fea­tures and getting a feel for which browsers support it. A few weeks back I put out my first experiment exploring @font-face and transforms. This time, I set out to experiment with border-radius, and what I thought was going to be a boring little project turned out to be quite interesting.

While you’re there, don’t hesitate to further explore Giron’s site ‘neograhy’. Take a look at the twitter counter on his front page, or try copying a block of text from his site and notice how some words are broken up (yet appear normal on the site), or drool over the beautiful layout of his photography portfolio. We’ll definitely be keeping a close eye on him from now on.

Box Round

.box_round {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

Box shadow

.box_shadow {
-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9 */
}

Box Gradient

.box_gradient {
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
background-image: linear-gradient(top, #444444, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}

Box RGBA

  .box_rgba {
  background-color: #B4B490;
  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490'); /* IE6–IE9
  }
  

Box Rotate

  .box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+
  -o-transform: rotate(7.5deg);  /* Opera 10.5
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome
  -ms-transform: rotate(7.5deg);  /* IE9
  transform: rotate(7.5deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', /* IE6–IE9
  M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
  }
  

Box Transition

  .box_transition {
  -moz-transition: all 0.3s ease-out;  /* FF3.7+ */
  -o-transition: all 0.3s ease-out;  /* Opera 10.5 */
  -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
  transition: all 0.3s ease-out;
  }
  

Box Text Shadow

  .box_textshadow {
  text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */
  }
  

Font Face

  @font-face {
  font-family: 'WebFont';
  src: url('myfont.eot');  /* IE6–8 */
  src: local('☺'),
  url('myfont.woff') format('woff'),  /* FF3.6, IE9 */
  url('myfont.ttf') format('truetype');  /* Saf3+, Chrome, FF3.5, Opera 10+ */
  }
  

Note that this is merely a fun, proof-of-concept that explores the possible applications of CSS3. If you intend to use this in production, you should be aware that what we will be creating uses W3C specifications that are not yet, or will never be, supported in many browsers (such as IE6 through IE8). Also, the markup must be updated in order to avoid empty div elements.

CSS Ingredients

Before we get started, let’s just quickly go over what we be using.

1. :before and :after pseudo-elements: Using pseudo-elements will help us in reducing the amount of unnecessary HTML we need to use. If you have worked with rounded corners in CSS2 before, you probably know that, in order to produce flexible rounded corners that accommodate various sizes of content, you had to use a lot of empty divs and such. By using these elements, we will have minimal markup. In this case, just one empty div per bauble, which, if you were enterprising, you would fill with some text content. Note that these pseudo-elements are in CSS2 specs.
2. CSS3 linear and radial gradients: To get the metallic color fills and shines of the baubles, we will use color gradients.
3. Box shadows, transformations, border radius, etc.: To create the shapes, we will be using a combination of box-shadow, transform, and border-radius (for rounded corners).

HTML

First, let us create the markup. As you can see below, the structure is quite minimal and contains only the minimum amount of markup necessary.

Since the globes need to be block elements, I chose to go with <div> instead of <span>, however, if you are not comfortable with that, you can use <span> tags and then use the display: block CSS property/value pair.

I have placed them in an unordered list because I decided that they are a group of items with no particular hierarchy (e.g. red-bauble is not greater than green-bauble), and so, to me, the metaphor of unordered lists is retained.

<ul id="bauble-container">
  <li>
    <div class="bauble red-bauble"></div>
  </li>
  <li>
    <div class="bauble blue-bauble"></div>
  </li>
  <li>
    <div class="bauble yellow-bauble"></div>
  </li>
  <li>
    <div class="bauble green-bauble"></div>
  </li>
</ul>

Explanation of the IDs/classes:

1. #bauble-container is our unordered list, which will be used for targeting the list items (<li>) with greater specificity.
2. .bauble is the main part of the ornament; the spherical shape.
3. .red-bauble, .blue-bauble, .yellow-bauble and .green-bauble are the classes used for adding color variations. It makes our work flexible so that, if you wanted various combinations, you’re not stuck with the color combinations I chose. For example, you could have two yellow baubles or no yellow baubles–that’s why we use classes, and not IDs, for these.

CSS

What follows are the style rules that will turn our boring unordered list above into a magical set of Christmas tree ornaments.

For discussion, I have commented the CSS below so that you can see how it works to highlight the major parts of the CSS.

Note that, in production, you would not want this much commenting in your stylesheet because it is over the top and because it can increase your stylesheet’s file size.

  /* General */
  html
  {
  background: #f2f5f6; /* Fallback background color if gradients are not supported */
  background: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c8d7dc),color-stop(1, #f2f5f6));
  height: 100%;
  }

  #bauble-container
  {
  list-style: none; /* Remove bullets */
  width: 568px;
  margin: 150px auto; /* Center it */
  padding: 0;
  }

  #bauble-container li
  {
  margin: 0 20px; /* let's add some space */
  float: left; /* place them in line */
  }

  /* This is the part where the Christmas bauble string is added */
  #bauble-container li:before
  {
  content: "";
  background: #dadada; /* Fallback */
  background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
  background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
  height: 50px;
  width: 2px;
  display: block;
  margin: 0 auto;
  }

  /* Alernatively rotate them */
  #bauble-container li:nth-child(odd)
  {
  -moz-transform: rotate(-5deg); /* Firefox */
  -webkit-transform: rotate(-5deg); /* Chrome and Safari */
  -o-transform: rotate(-5deg); /* Opera */
  -ms-transform: rotate(-5deg); /* Surprise! IE9 with its own prefix */
  }

  #bauble-container li:nth-child(even)
  {
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  }

  /* Style the bauble */
  .bauble
  {
  -moz-border-radius: 100px;
  border-radius: 100px;

  -moz-box-shadow: 0 0 5px #777777;
  box-shadow: 0 0 5px #777777;
  -webkit-box-shadow: 0 0 5px #777777;

  border: 1px solid rgba(0,0,0,0.3);
  position: relative;
  height: 100px;
  width: 100px;
  }

  /* Style the bauble head */
  .bauble:before
  {
  content: "";

  background: #fff; /* Fallback */
  background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
  background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c)); 

  -moz-border-radius: 2px;
  border-radius: 2px;

  -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;

  border: 1px solid #dadada ;
  height: 10px;
  width: 20px;
  position: absolute;
  left: 50%;
  top: -12px;
  margin-left: -10px;
  }

  /* Add bauble light reflection */
  .bauble:after
  {
  content: "";

  -moz-border-radius: 100px;
  border-radius: 100px;

  background: #fff; /* Fallback */
  background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
  background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1))); 

  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -40px;
  opacity: 0.15;
  height: 80px;
  width: 80px;
  }

  /* Colorize them */
  .red-bauble
  {
  background: #c8171f;
  background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
  background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
  }

  .blue-bauble
  {
  background: #00a1ee; /* Fallback */
  background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
  background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
  }

  .yellow-bauble
  {
  background: #fcb83d; /* Fallback */
  background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
  background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
  }

  .green-bauble
  {
  background: #4d8d00; /* Fallback */
  background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
  background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
  }

View Demo

IE6 and IE7 couldn’t join our Christmas party for well-known reasons: they lack more than just CSS3 specifications support, but also the :before and :after pseudo-elements; so we would just have four squares with different colors in these two browsers.

I hope you were inspired to learn about CSS3 in this guide and that you have discovered a trick or two that you can use in your projects. I wish you a Merry Christmas and Happy Holidays!

Soucre Six Revisions

• Supersized 3.0 Plugin

  This plugin produces a full screen slideshow complete with transitions, preloading, and navigation controls.

• Apple-like Retina Effect

  Learn how to create an Apple Retina Display magnifying effect with jQuery and CSS.

• Flip!

  Flip is a jQuery plugin that will flip easily your elements in four directions.

• jSlickmenu

  jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.

• jQuery Address

  The jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state.

• Overscroll

  Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. The plug-in adds a draggable drift to overflowed DOM elements as well as a set of fading ‘thumbs’.

• jQuery Page Curl

  This jQuery plugin allows you to add an interactive page curl to your website.

• Contactable

  Contactable is a jQuery plugin designed to make contact/feedback forms simpler and more accessible. This plugin will enable you to create a contact form on any page of a site with minimal effort.

• Panning Slideshow

  In this tutorial you’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides.

• Sliding Labels

  Sliding Labels is a nifty plugin that displays text fields with the labels inside. When the field is clicks, the labels slide out allowing the user to input text.

Source: web design ledger

CSS3 Media Queries (demo)

Check my demo and resize your browser window to see it in action.

Max Width

The following CSS will apply if the viewing area is smaller than 600px.

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width

The following CSS will apply if the viewing area is greater than 900px.

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Device Width

The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

For iPad

You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Media Queries for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. Below are some solutions:

• CSS Tricks – using jQuery to detect browser size
• The Man in Blue – using Javascript (this article is written 6 years ago)
• jQuery Media Queries Plugin

Sample Sites

You need to view the following sites with a browser that supports media queries such as Firefox, Chrome, and Safari. Go to each site and see how the layout responds base on the size of your browser winow.

Hicksdesign

• Large size: 3 columns sidebar
• Smaller: 2 columns sidebar (the middle column drops to the left column)
• Even smaller: 1 column sidebar (the right column shift up below the logo)
• Smallest: no sidebar (logo & right column shift up and the other sidebar columns move below)

Colly

The layout switches between one column, 2 columns, and 4 columns depend on the viewing area of your browser.

A List Apart

• Large size: navigation at the top, 1 row of pictures
• Medium size: navigation on the left side, 3 columns of pictures
• Small size: navigation at the top, no background image on logo, 3 columns of pictures

Tee Gallery

This one is very similar to previous example Colly, but the difference is the images of TeeGallery resize as the layout stretchs. The trick here is use relative percentage value instead of fixed pixel (ie. width=100%).

Conclusion

Keep in mind: having an optimized stylesheet for mobile devices doesn’t mean your site is optimized for mobile. To be truly optimized for mobile devices, your images and markups need to cut on the load size as well. Media queries are meant for design presentation, not optimization.

Source: Web Designer Wall

CSS3 Button Maker

The CSS3 Button Maker gives you a number of sliders and color pickers to style your own CSS3 button. Then you can grab the code to use in your own project.

CSS3 Generator

Select from a list of CSS3 properties, fill in a few parameters to fit your needs, and it spits out the generated code along with a live preview.

CSS3 Please!

CSS3 Please! is a CSS3 rule generator that acts as a sort of playground. It allows you make various CSS3 tweaks and see a live preview. Then you can copy and paste into your own file.

CSS3 Gradient Generator

The CSS3 Gradient Generator was created as a showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.

CSS3 Transforms

CSS3 Transforms gives you a set of sliders to experiment with various transforms such as position, rotation, skew and more. It also generates the corresponding code on the fly.

CSS3 Selectors Test

CSS3 Selectors Test automatically runs a large number of small tests which determines if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests.

Source: Web Design Ledger

If not for some of the differences in the way IE6 and IE7 handle certain areas of CSS (whether it be margins bugs, float bugs, or other problems), CSS development would be so much easier.

Of course, as I’ve said in past articles on this website and others, I believe IE-only styles can be kept to a bare minimum, and in some cases you may not need any, but it’s unlikely that developers will end up so fortunate. So how do you divide your IE-only CSS styles? The options we have are as follows:

Option #1

A single IE-only stylesheet inside of a conditional comment; inside that file, different versions of IE are targeted with hacks.

Drawbacks to #1

• Every version of IE will load the extra styles, even the unused ones
• Potentially adds an extra HTTP request
• Changing something in the main stylesheet may require that you hunt down IE-only styles in a separate file

Benefits to #1

• IE styles are in one file, so they’re easy to maintain

Option #2

Multiple IE-only stylesheets inside conditionals, each targeting a different version of IE.

Drawbacks to #2

• Changing something in the main stylesheet may require that you hunt down IE-only styles in as many as 2 or more extra files

Benefits to #2

• No unnecessary HTTP requests
• No unnecessary lines of code loaded in the main stylesheet

Option #3

A single stylesheet that targets all browser, but within that stylesheet, IE-only hacks are present.

Drawbacks to #3

• Unnecessary lines of code are loaded for all browsers

Benefits to #3

• No extra HTTP requests
• No need to open multiple CSS files to adjust something that’s hacked for IE

Option #4

One or more JavaScript files inside of conditional comments that target different versions of IE, dynamically adding or removing styles and/or class names.

Drawbacks to #4

• IE Browsers without scripting enabled will not see the corrected CSS
• A slow loading script could cause the styles to be applied late, making the layout temporarily look awkward
• Will be complicated to maintain, and could also require extra IE-only stylesheets, adding to the page bloat and slowness

Benefits to #4

• Could work on buggy elements that won’t behave with pure CSS (I’ve seen this happen and have used this method when time/budget was limited and the CSS was too messy to deal with normally)

Option #5

Ignore IE.

Drawbacks to #5

• Locking out a significant portion of your potential traffic/sales
• Client screaming at you because the website looks like crap in IE

Benefits to #5

• Only one hack-less stylesheet to maintain
• Peace of mind (but short-lived because of the screaming client)

Conclusion

In most cases, you’ll be using option #2 (multiple conditionals that target different versions of IE). But don’t rule out using #3. In situations where you’ve only got 2 or 3 lines of CSS to target a single version of IE, I think the best option is to just put those extra styles in the main stylesheet and allow it to load for every browser.

Remember that for most client projects, Internet Explorer is the most used browser. If you’re adding multiple extra files for all those users, that’s more HTTP requests, and so you’re making the pages unnecessarily slow for most of your users. I think a few lines of CSS in the main stylesheet is much better than adding one or more extra HTTP requests.

Feel free to offer your thoughts if there are any benefits/drawbacks (or even methods) I haven’t mentioned.

Source: impressivewebs

This is not going to be an in-depth post on JavaScript, or anything like object-oriented material. Instead, this post will cover the basics of JavaScript that every designer must know to become better designers. In this post, we’ll cover some JavaScript features (and trends) that focus more on user experience and design elements themselves.

Accessing HTML Elements with JavaScript

Once a web page is loaded in plain HTML, it is set. There’s no more the browser can do with it to alter the image of a button, the style of a form, or the display of certain pieces of content. What the user sees is what the user gets.

However, JavaScript can play an excellent role in changing up the page after it’s loaded. This means we can do image rollovers (changing the image after the first image has been loaded), and we can change the style of a form as the user interacts with it. We can also use JavaScript to do some even cooler things, like show or hide divs for tabbed content.

How to Change up the HTML

So how do you change the HTML of a page after it’s loaded to do all the neat things we’ve mentioned above? First, we must access the element:

document.getElementById("elementid").HTMLATTRIBUTE = "value";

Once we’ve gotten a hold of a piece of HTML with JavaScript, we can change its attribute to whatever we like. Our main piece of code here is a built-in JavaScript function: getElementById(). With it, as long as we give any HTML element an id, we can grab it with our JavaScript code. Let’s take a look at a more specific example below:

<img id="slideshowimage" src="flower.jpg" alt="An image of a flower." />

Above is some basic HTML showing an image, with an id of “sideshowimage”. We can use the id to style it any way we want in our stylesheet, just as anyone would expect. We’ve also given our image an alt tag with an adequate description.

document.getElementById("slideshowimage").src = "bear.jpg";

Now, by using our JavaScript to grab out “slideshowimage” id element, we can change the source of our image. We can also change the alt tag to make it more relevant:

document.getElementById("slideshowimage").alt = "An image of a bear by the water.";

JavaScript has now altered our code, which with only HTML and CSS was set, to the following code:

<img id="slideshowimage" src="bear.jpg" alt="An image of a bear by the water." />

Easy enough right? Simple knowledge of this kind of JavaScript action is the start to making pages more dynamic.

Accessing CSS with JavaScript

Accessing CSS styles is very similar to getting and changing the HTML attributes via JavaScript. In fact, it technically is changing an HTML attribute itself: the style attribute:

<img src="image.gif" alt="An Image" id="myImage" style="padding: 5px; background: #fff; border: 1px solid #ccc;" />

As anyone can guess, we just place style for the HTML attribute when accessing the image:

document.getElementById("elementid").style.STYLEATTRIBUTE = "value";

Because the style attribute in HTML can hold so many different values, we must get a bit more specific with our JavaScript code. We have to include “style” then the name of the specific CSS attribute afterwards. To clarify, below are the correct and incorrect ways of changing up the CSS:

Incorrect:

document.getElementById("elementid").style = "padding: 5px; background: #fff; border: 1px solid #ccc;"; 

Correct:

document.getElementById("elementid").style.padding = "10px";
document.getElementById("elementid").style.backgroundColor = "#aaa";
document.getElementById("elementid").style.border = "1px solid #555"; 

One more thing to point out is that CSS styles can vary a bit from JavaScript’s style syntax. For example, notice that in JavaScript, to change the background color we had to use backgroundColor. In CSS, we would use background or background-color. For the most part JavaScript abides by camelCase (first word lower case, and all remaining words capitalized, no spaces/dashes/underscores). However, if any others have you stumped there are plenty of resources online.

Events: Making it All Actually Happen

Just as the word implies, JavaScript events make things happen. We’ve covered so far the syntax for how to alter code, but we currently have no way to trigger it. Events are what do this.

The onClick event is one of the more popular JavaScript events. It can be applied to any HTML element, and when the described event happens — when the element is clicked — the event inside the quotes is triggered.

<button onClick="changeImage()">Change Image</button>

The code above creates a basic HTML button, and uses the onClick attribute for a JavaScript event. When the user clicks the button, the changeImage() function is called.

<button onClick="this.style.border = '2px solid #555'">Change Border</button>

We can also put our JavaScript code directly in our event, without going to an external function. Note that we had to change our double quotes into single quotes within our JavaScript code, to keep our HTML from getting confused on when the attribute begins and ends. We can also use the “this” keyword to access the element we’re currently in — no need to grab an element by its ID if we’re already there.

Other Important and Commonly-Used Events

onLoad — Used in the tag of an HTML page. The event triggers when the page is loaded. Example: (Calls the sayHello() function right when the page is loaded. Will re-trigger on every Refresh.)

onBlur — Triggers when an element is clicked, and then clicked off. A common use of this is in forms for validation. If a user clicked on field, then clicks away, onBlur can run a validation function or any other piece of JavaScript code. Basically, onBlur triggers when something is clicked away from.

onFocus — The opposite of onBlur. Triggers when an element that can be focused is clicked. For example, a form input field.

onMouseDown, onMouseUp, onMouseOut, onMouseOver — All used with the interaction of the mouse. This is usually how image rollovers are created. When the mouse moves over an image – onMouseOver, the image changes, and then changes again when it moves away from the image – onMouseOut. onMouseDown and onMouseUp are similar, but with actual clicks of the mouse.

Check out Events and Event Handlers for more information on events and a more descriptive list of available events to use.

JavaScript Libraries

While JavaScript can do a lot on its own, libraries are increasing in popularity because they can provide even more features. Of course, what designers like most, is that these new libraries can provide a lot more in terms of design.

Many designers just jump into learning JavaScript through a library like jQuery or Mootools. However, a step-by-step guide to easy jQuery tabs or something similar will not help anyone as a designer long-term. It is still essential to learn the basics of plain JavaScript before jumping into using a JavaScript library.

While learning JavaScript is a great start, any library requires its own learning curve and has its own syntax or plugins. For a list of all JavaScript libraries, and even features organized by special features and effects, check out the JavaScript Libraries website. Despite the many options for JavaScript libraries, there are two that are most popular: jQuery and Mootools.

Learning how to work with these two, or any other libraries, is a great way to expand JavaScript’s capabilities. However, that is for another post. In the meantime, be sure to check out at least the jQuery and Mootools websites.

Conclusion

Anyone can see that JavaScript can be a powerful force to adding interaction and variation to web pages. Yet, even with all we’ve covered above, we’ve only touched the surface of what JavaScript can really do — for either developers or designers.

If you’d like to get more advanced, be sure to check out what AJAX, along with JavaScript has to offer, or just get into some more advanced JavaScript topics, from arrays to object-oriented programming. Also be sure to check out some of the resources we have listed above to find out more. Your web applications will be able to go much further with just a bit more learning!

source: onextrapixel

That’s why this post exists, we’re not going to talk about what HTML5 can do, but show live demos of magical things that HTML5 can achieve with other language like JavaScript, so get ready to be inspired.

Note: As HTML5 is not fully supported by certain web browser like Internet Explorer, you’re strongly recommended to use Firefox browser to view all HTML5 demos below.

Animation

The HTML5’s canvas element is the deciding factor for HTML5 to replace certain Flash animation. It allows you to build dynamic, scriptable rendering of 2D shapes and bitmap images with Javascript, which by other mean is, controllable animation.

Audioburst Animation

A comfortable and fantastic animation created with HTML5’s canvas and audio tag.

Ball Pool

Being showcased in the last Google I/O event, this demo shows you how dynamic can HTML5 be.

Blob Sallad

A HTML5-spawned creature that would please you.

Bomomo

With Bomomo, you can observe different atomic movement simulated with HTML5.

Browser Ball

Get amazed with this ‘cross-browser’ HTML5 ball.

Bubbles

Have fun by create endless floating bubbles with different color.

Canvas Cartoon Animation

A simple and funny HTML5 cartoon that helps you to understand what HTML5’s canvas element can do.

Coolclock

A nice, customizable analog clock built by HTML5 and JavaScript.

Flickr PS3 Slideshow

View your Flickr’s photos with PS3 style slideshow in the web browser.

Interactive Polaroid

An interactive demo that works pretty similar to multi touch interface.

JS Fireworks

Enjoy the fireworks moment with your preferred gravity and speed, powered by HTML5 and Javascript.

Kaleidoscope

A very beatiful and futuristic HTML5 kaleidoscope.

Liquid Particles

Sensitive particle animation that reacts based upon your mouse movement.

Mesmerizer

Another sensitive and outstanding HTML5 demo that shows how nearby elements react with you mouse movement.

Nebula Cloud

Get lost with this wondrous HTML5 nebula.

Parallax

View all 2D shapes in parallel perspective.

Particle Animation

An elegant HTML5 particle animation that can form into your preferred message.

Spread

Get lost with this endless spread animation.

Starfield

A very cool HTML5 starfield animation that would change direction and speed based on your mouse movement.

Video Destruction

One click to boom a playing video.

Waveform

Observe how HTML5’s canvas wave moves by altering its amplitude, wavelength, width, etc.

3D Effect

Impressed by canvas animation? That’s more HTML5’s canvas element can do, and it’s called 3D effect. Developer can rely on canvas element, DOM and JavaScript to create 3D effect, which can later be developed into 3D animation or game.

Canvas3D and Flickr

Have a whole new 3D experience with Flickr’s photostream.

Cloth Simulation

A realistic, HTML5-based cloth simulation.

Evolving Monster

Observe a monster evolving into a complicated creature, one of its creator is HTML5.

Google Giftbox

Giant search engine Google is presented in 3D, playable view.

JS Touch

A high quality and realistic ‘3D on 2D Canvas’ showcase.

Data Presentation

While HTML5’s canvas element can be used to create animation and 3D effect, it can also be implemented to present mathematical data.

Gnuplot

Gnuplot, a data plotting application in HTML5 version.

RGraph

RGraph provides a wide range of data presentation like bar chart, progress bar and traditional radar chart.

Web Application

Ultimately, using all possibilities combined by HTML5 and other langauge, one can create interactive application or game that’s close to Flash application.

CanvasPaint

Witness the brother of Microsoft Paint comes into your web browser, and his father is HTML5.

CanvasMol

A scientific application which is built to help you to understand certain earth element’s structure.

Cartoon Builder

Draw interesting cartoon image with this minimal and interactive cartoon builder.

Drag Anything Here

Drag anything you can drag in the demo to show details.

Gartic Sketch

An original HTML5 application that allows you to make some basic drawings that can be saved into different image format like jpeg or png.

PhysicSketch

Draw whatever you like and see how they react with simulated gravity.

Sketchpad

A powerful HTML5 drawing application that enables you to draw and edit your image in the precise manner.

Smalltalk

A web application that confirms geographical position of weather-related message acquired from Twitter, thus forming them into a canvas-based ’social weather’ map, quite trivial (as stated by author) but interesting.

Game

3Bored

You would never get bored if you can keep evading hundreds of HTML5 bullets in next second.

Breakout

Rebound the ball to break all bricks.

Canvascape

Not quite a game, but it demonstrates how HTML5 can be used to develop First Person Shooting browser game.

Catch It

How many balls can you dodge to get your winning HTML5 square?

Chain Reaction

Chain the explosion to achieve the goal, don’t get addicted.

Cubeout

Play Tetris in 3D, top-down view.

etchaPhysics

Draw item to move the ball to the star, don’t forget about the gravity.

Jigsaw Puzzle

Click, rotate and drop puzzle pieces to solve this HTML5-based jigsaw puzzle.

Slide Puzzle

Slide to the victory, another HTML5 game that’s built to squeeze your mind juice.

Same Game

Remove certain group to get another group paired in same color and you would eventually be awarded a victory.

Tetris

One of the most classic game brought back to life by HTML5.

Torus

Yet another Tetris game in pseudo-3D version.

Conclusion

What is the limitation of HTML5? At this point we cannot decide, but with the impressive video below we can know how far the HTML5 has been pushed:

Yes, it’s Quake II in web browser, so now it’s very clear that with HTML5, more groundbreaking web application would be born to serve billions of internet users. It’s fast, it’s evolving, and it’s changing the world wide web. The question is, how would you use this game-changing HTML5?

We do like to hear your idea!

Source: hongkiat

1. iPad GUI Kit in PSD Format

2. iPhone GUI PSD 3.0

3. Free iPhone Toolbar Icons

4. Ultimate iPhone Stencil for Omnigraffle

5. iPhone UI Vector Elements

6. Free iPhone Toolbar Icons

7. Yahoo! Design Stencil Kit

8. iPad GUI PSD

9. iPad Vector GUI Elements

10. iPad Stencil for Omnigraffle

11. iPhone PSD Vector Kit

Source: web design ledger