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

By no means do I assume that everything in this article is etched in stone and error-free, but I think this will be a good starting point for this topic, and I will be happy to add to or amend any points that anyone feels need adjusting or clarification.

Consider this a starting point for discussing best practices for CSS3, especially since there don’t seem to be many articles available yet that exclusively discuss CSS3 best practices.

Think Progressive Enhancement

The most accessible and widely-supported websites are those created with progressive enhancement in mind. Standards proponents have for years discussed the benefits of accessible, backwards-compatible content – specifically in relation to JavaScript and Ajax-based websites and applications.

The same principles apply to CSS3 development. Website and app visuals that are critical to the user experience should not be dependent on CSS3. CSS3 should be used to enrich and enhance an already fully-functional experience.

Since CSS3 has now crossed into a gray area of event-driven features, more care needs to be taken to ensure that non-supporting browsers do not greatly hinder the user experience.

Organize and Comment Vendor-Specific Syntax

Unfortunately, since many CSS3 features are supported with different proprietary syntaxes, this means that some parts of your CSS code will become bloated. But you can still keep those areas of your code organized by inserting comments indicating the browser version that the code is for, and also by keeping the different lines of code in a recognizable order with the standard format listed last.

It’s also best practice to list your CSS3 items last in the CSS declaration. So, for example, if you’re rotating an item with CSS3, your code might look something like this:

#rotation {
	float: left;
	width: 200px;
	-webkit-transform: rotate(-5deg); // chrome, safari
	-moz-transform: rotate(-5deg); // firefox
	-o-transform: rotate(-5deg); // opera
	transform: rotate(-5deg);
}

In the example above, I don’t believe the standard syntax is supported by any browser, but this code just serves as a way to theoretically demonstrate the method of listing CSS3 properties last, and the standard property at the end of the declaration. Keeping the CSS3 properties last will also ensure that any “fallback” properties are in their correct place. Which brings us to the next point.

Use Fallbacks for Background-Related Enhancements

Some of the new CSS3 features require that the background property be used. The background property is nothing new to CSS, but the possible values have been upgraded with CSS3, allowing use of RGBA, HSLA, gradients and even multiple background images.

In most cases, a non-supporting browser will still display a similar feature, and the lack of an HSLA or RGBA color will not affect the result. But with a gradient, you may need to declare an IE-only fallback in a separate stylesheet, or a background color that it will fall back to if a gradient is not supported.

So, you might need something like this:

#element {
	background-image: url(images/bg-transparent.png);
	background-color: rgba(98, 135, 167, .5);
}

In the case of multiple backgrounds, be sure to list the most important element first, so it serves as the fallback.

For most situations, I don’t think this particular practice will be necessary, but it’s good to keep in mind the possibility that a fallback color or background image may be needed.

Use Rotations, Animations & Scaling Sparingly

Although WebKit-based browsers have opened up some incredible possibilities with CSS3, we don’t want to get carried away. Subtle, tastefully selected events and animations are usually the best choice.

There’s a reason that Flash intro pages became a tiresome practice; they were often self-indulgent and pretty pointless, doing nothing but slowing down the user and making them download more resources than necessary.

To prevent the web from becoming filled with CSS3 trash, let’s use the new features carefully and in a dignified manner that doesn’t harm or slow down the user experience.

Be Careful With Typography

Making enhancements on text with CSS3 has become more common, and many sites are now employing the @font-face technique to use custom fonts.

Make sure that any typography-related enhancements do not affect the readability of the site. Sometimes, as designers, we take an overall view of a website’s layout, and try to make every little detail as beautiful as possible, but forget the most important thing: That the content should be accessible and readable.

So, if you’re considering using shadows, gradients, or transforms on typographical elements, think twice about it, and strip out any unnecessary enhancements that cause undue harm to the readability or accessibility of the site.

Test in All Browsers With Fallbacks Enabled

Testing of course is one of the most important parts of successfully adding enhancements. But the advent of CSS3 features may add more pressure in this area.

Don’t be content to just test the enhancements at full-throttle in the most supportive browsers; test in the non-supporting browsers while temporarily removing some of the enhancements, maybe one by one, to see the experience with fallback options enabled.

This makes commenting and organizing code even more important, and will likely add more quality assurance testing to many design teams’ schedules.

What Did I Miss?

Surely this is not a complete list. Add your comments below if you feel there are important CSS3 enhancements that require a best practice method or technique, and I’ll be happy to add to a few end-points to this article to round it out.

Source: impressivewebs

Be aware that you may not be able to see some of the demos. To know what elements of HTML5 your browser supports, take a look at this chart.

1. APIrocks HTML5 slideshow

If you only have time to watch one of the demos suggested in this article, take a look at this great slideshow by APIrocks. It is not the most spectacular demo in the list, but it gives some cool examples with explanations and code examples.

2. Sublime Video: a HTML5 video player

Ready to see some videos in your browser with no plugin or flash required? If so go take a look at SublimeVideo. I’m not even mentionning how gorgeous the player is or how cool the full-window functionality is.

3. Blowing up HTML5 video

This will probably not only blow a video in your browser, it will also blow your mind. It’s very experimental and hard to see a use for this, but it’s good to see that technical limits will be pushed.

4. HTML5 canvas games

The screenshot that you see under this text is taken from the Tetris 3D created in javascript by Ben Joffe using the HTML5 canvas element. Don’t miss his other games and demos, it’s just amazing.

5. Canvasmol

Another HTML5 demo using canvas, it shows you some molecules in a rotation.

And much more

On the HTML5 demo site, go take a look there.

Source: designer-daily