The first to ask is “Why?” Why use these alternative tools and methods to develop CSS code? Why take the time to learn them, especially when no one syntax method, CSS programming concept or technique will replace CSS as it is today?

Well, here’s a better question: “Why not?” While CSS will probably not be replaced by any one method, many of these techniques are similar, and their general concept is becoming increasingly popular. For example, many of these new methods allow us to more easily implement rounded corners. With this kind of demand from the community, CSS 3 has now made it easy to create rounded corners. In time, with full support and forward-looking attitudes, these new ideas may become standard, allowing us more options as Web professionals.

And let’s state the obvious: using alternative options like these can save time and be more efficient than using traditional CSS methods, even if they can take some time to learn at first.

As new methods arrive, the division between Web developer and Web designer shrinks. One day, knowing one trade may not be enough. These tools are moving the process along by giving designers easier ways to code and giving developers easier ways to design.

A New Era for Web Developers

Traditionally, Web developers have been the gurus of coding. PHP, JavaScript, Ruby and the like are the languages that developers deal with regularly. Recently, though, we’ve seen coders call themselves “Web developers” when they just convert PSD to XHTML and CSS. How can this be, and are they misrepresenting themselves?

Of course not. In recent years, the science of CSS and the need for semantic XHTML has become much more complex and allow, in some instances, for more programming-related concepts. The first few items in this article will be specific to CSS’ advances in programming concepts and how these changes can be both detrimental and beneficial.

Whether you are familiar with these methods or not, we invite you to practice these new techniques and share your experiences, because many of these methods are still very experimental.

A Web Designer’s Dream

Programmers aren’t the only ones who get more options from the new CSS methods. Designers get more options, too, including easier options for layout and common Photoshop effects. Taking the time to learn a new CSS library or technique is clearly well worth the trouble if it allows you to achieve the most common Photoshop techniques with few to no graphics.

In the early days of the Web, designers were limited to certain layouts and design styles merely because of the Web’s limitations. With the future of CSS, the only thing that will hold back Web designers is their own imagination.

Let’s take a closer look at what we have to work with right now and what’s in store for us in the future.

2. CSS Variables

Developers can easily see the benefit of using variables to code their Web apps, so seeing the benefit of variables in CSS is just as easy. Are they needed though? Before we answer a tough question like this, let’s go over what they are and how both designers and developers can use them.

Similar to a programming language, CSS variables can be used to define style sheet-wide values with one descriptive word. This one word can then be used repeatedly throughout the style sheet to use the value assigned to it. The point of variables is to save time and, in most cases, create more efficient code. An example of the idea in practice is below. You can take a closer look at this method on BrajeShwar.com.

@variables {
	oColor: #fefedb;
	oBgColor: #ccc;
	oMargin: 1em;
	oPadding: 1em;
}

@variables print { /* applies only to print */
	oColor: #000;
	oBgColor: #fff;
	oMargin: 2em;
	oPdding: 2em;
}

div#post div.entry {
	border: 1px solid #666;
	font: normal 1em/1.6em "Lucida Grande", Lucida, Verdana, sans-serif;
	margin: var(oMargin);
	padding: var(oPadding);
	color: var(oColor);
	background-color: var(oBgColor);
}

At first glance, the above doesn’t seem any easier. What’s the point of typing out color: var(oColor); instead of just entering color: #fefedb;? That’s true… until you get into a larger style sheet. With hex values for colors all over the place, CSS developers often find themselves scrolling throughout a style sheet, copying and pasting color codes and other style attributes.

If we plan to have one shade of, say, blue throughout a design, using a variable for it would be useful. We may want the same shade of blue for hyperlinks and the footer background. Rather than search through our huge style sheet for the exact hex value of that shade of blue, we know that we defined a variable called colorBlue with that hex value. We can then just use the variable in its place to save time.

We can almost get back to the simpler days of HTML colors (e.g. color="blue"), without sacrificing Web standards.

The Cons of CSS Variables

However, with all good things comes the bad. CSS variables has many critics as well:

“Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things must not be added.”
– Why “variables” in CSS are harmful

This quote is from an essay hosted on the W3 website. Although it is saying the exact opposite of what this article supports, the author makes some valid points, and we designers and developers should think closely about the pros and cons before using CSS variables and other advanced techniques. While the essay above focuses primarily on CSS variables, it does go a bit into other advanced ideas in CSS that we’ll discuss later in this article.

“The other implementation is written in PHP. It proves that it is not necessary to add constants to CSS. Just like the existence of the WebKit implementation cannot be taken as proof that constants in CSS are useful, so the PHP implementation cannot prove that either. But the PHP implementation has the benefit of letting authors determine the usefulness for themselves, without modifying CSS on the Web.”

Many solutions for using variables for style sheets are indeed in PHP, and the author makes an excellent point on how some of these methods can provide solutions for developers who would still like to use constants, while preserving CSS as it is today. Could this be a better option than all other CSS variable solutions?

“Thus there is a cost to user-defined names: memory (when writing the code) and understanding (when reading). That cost is offset by the cost of the alternative: long functions. How is that for CSS?”

Another argument states that CSS variables could be pointless or even harmful to efficiency. Could these variables actually make our CSS slower and file sizes larger? Incorrectly used, yes. A common fear among opposers of CSS variables and other programming techniques is that designers and developers will start using CSS’ new power to make things easier on their end but then stop bothering with CSS code efficiency.

Point taken, but there are many cases in which CSS variables make style sheets easier to use and equally or more efficient. In such cases, using CSS variables may be smarter.

“CSS is fairly easy to learn to read, even if some of its effects can be quite subtle. When there is a page you like, you can look at its style sheet and see how it’s done.”

Even if we take care of efficiency issues, there is also the point that CSS will become similar to a programming language in its difficulty, both in creating and understanding CSS code.

We looked at just one insightful essay on why CSS variables may not be such a good idea. For more reading, check out the articles below:

• Why CSS Needs No Variables
  A wonderfully written article on alternative methods to CSS variables and why CSS variables are not worth the fight.
• CSS Variables Considered Harmful?
  Another look at the issues discussed above but from another developer’s perspective. Some excellent points are made in the post itself and the comments.
• Why “Variables” in CSS Are Harmful
  Here is the essay we looked at above, in case you want to take a closer look.

Despite the movement to stop CSS variables altogether, many designers and developers are still strongly for them. If you’re leaning to that side, keep in mind these points as you venture over:

• Always be efficient. Know when to use CSS variables and when just to use selectors.
• Name constants with a descriptive title for easier reading, especially if the CSS code is going to be changed.
• Will the style sheet be reused? If so, then maybe CSS variables are not appropriate.

Walkthroughs for CSS Variables

Below are some tutorials, walkthroughs and other articles containing insight on CSS variables so that those of you who want to implement CSS variables can do it correctly.

CSS Variables with Server-Side Includes

This example and walkthrough goes through a way to create the effect of CSS variables with programming languages. It explains how this can become a standards-compliant approach and even how specified CSS style sheets can be generated dynamically with server-side programming languages and a smart use of CSS variables.

Variables in CSS via PHP

Another PHP solution, but with a premade class. All that is needed is simply to create the desired CSS variables. After the PHP class is downloaded and set up properly within the relevant HTML and CSS files, implementing these CSS variables is probably one of the easiest methods.

Dynamic CSS A.K.A. CSS Variables

Yet another implementation of CSS variables with PHP. This walkthrough also has a unique section on browser detection.

CSS Using PHP

A very simple example of using PHP in CSS to create variables. The tutorial states that this takes only six lines of PHP code in its simplest form.

Implement CSS Variables with PHP and .htaccess

Here is a NetTuts+ tutorial on implementing CSS variables that is similar to the above techniques, but this time with the .htaccess file. A smart approach to CSS variables.

CSS Variables with Rack Middleware

Here is another premade script that does the work for you. This developer realizes the benefits of CSS variables but doesn’t like all of the extras that come with alternative CSS tools. So, he made a script that would automatically create just CSS variables, making it easy and efficient.

A Look into WordPress CSS Variables

Not an article or tutorial, this is a discussion on the WordPress forum about strategies to implement CSS variables in WordPress. The discussion focuses on one specific issue, which is a general problem nonetheless. The solutions presented in this thread address many problems of CSS variables and WordPress.

3. Conditional CSS

Conditional options in CSS have a variety of benefits but can also bring the same deficiencies as CSS variables in that they alter the state of CSS as it is. Many of the cons have to do with efficiency, confusion and, in some cases, added HTTP requests (because it deals with a type of server-side programming language).

Nonetheless, let’s look into more of the benefits of conditional CSS statements. Just keep in mind the cons that come with them, and always be thinking of new ideas to overcome them. So far, the tools and solutions that give developers and designers conditional statements in CSS have come to be relatively well accepted. This is because CSS conditionals seem to solve bigger problems in CSS, and the lack of efficiency seems minor by comparison.

Let’s not forget the original CSS conditional. The problem with the traditional CSS conditional for IE, however, is that it has no else or else if. Although the use may be limited, an if/else statement for CSS could allow designers and developers to specify styles for other types of conditions: browsers, for example.

One popular tool for calling styles according to browser type is Conditional-CSS.com. While many other solutions are out there for conditionals as well as this particular problem, this tool can do most of the work automatically, with minimal confusion.

Conditional-CSS allows the user to customize a Web script in their choice of language (PHP, C# or C), and it compiles the code along with an uploaded style sheet to create CSS conditionals based on browser type. With this tool, those nasty IE bugs become easier to handle, and other browser bugs and unsupported features can be handled more gracefully. Using this method, you no longer has to create a separate style sheet for IE (or any browser for that matter), instead using old-fashioned CSS conditionals.

For a closer look at how one can use the syntax of this tool, here is the sample code from the Conditional-CSS website:

/* Conditional-CSS example */
a.button_active, a.button_unactive {
display: inline-block;
[if lte Gecko 1.8] display: -moz-inline-stack;
[if lte Konq 3.1] float: left;
height: 30px;
[if IE 5.0] margin-top: -1px;

text-decoration: none;
outline: none;
[if IE] text-decoration: expression(hideFocus='true');
}

As you can see, the code is easy to read, write and handle. This is a smart solution to a common problem in Web development. However, as with CSS variables, there is the risk that developers will use this method to overpower CSS’ basic functionality.

The solution is intended primarily for common IE bugs, although it provides more flexibility. As with any extension of CSS, use it responsibly, which means using it only when necessary. Rely on traditional methods to fix most IE problems. Because IE6 is the most troublesome, check out this article on Sitepoint:
10 Fixes That Solve IE6 Problems.

Customized Native CSS Conditionals

What we discussed above is a great reason why developers would use conditional statements in CSS. But many of us would like even more control. For example, instead of being limited to browser type, many of us who work with fluid layouts would like to be able to create conditionals based on browser width:

if($browser_window >= 600px && $browser_window < 1280px){
	p{width: 600px;}
}

else if($browser_window < 600px){
	p{width: 90%;}
}

else{
	p{width: 800px;}
}

Similar to what we saw with Conditional-CSS, the solution is to attach a more advanced language, whether PHP, Ruby, JavaScript or another of your choice.

Dynamic Resolution Dependent Layouts is a great example of how to use an if/else statement for this problem. In addition, we can use the same idea to create customized conditionals in CSS using JavaScript.

The idea here is to use separate style sheets altogether, and then use a JavaScript (or a script in your preferred language) to call the correct style sheet. There are no conditional statements in the CSS at all; rather, the website just simulates them. And a default option is available if JavaScript is turned off. Also, using multiple style sheets will have no negative consequences because the JavaScript will be calling only one in the end, based on the conditional statement. This means there will be only one HTTP request, so it will not slow down the Web page.

Here is the first part of the example code:

<link rel="stylesheet" type="text/css" href="css/default.css"
	title="default"/>

<link rel="alternate stylesheet" type="text/css" href="css/thin.css"
	title="thin"/>

<link rel="alternate stylesheet" type="text/css" href="css/wide.css"
	title="wide"/>

<link rel="alternate stylesheet" type="text/css" href="css/wider.css"
	title="wider"/>

By specifying the title attribute, we can use this in our JavaScript file:

function dynamicLayout(){
    var browserWidth = getBrowserWidth();

    //Load Thin CSS Rules
    if (browserWidth < 750){
        changeLayout("thin");
    }
    //Load Wide CSS Rules
    if ((browserWidth >= 750) && (browserWidth <= 950)){
        changeLayout("wide");
    }
    //Load Wider CSS Rules
    if (browserWidth > 950){
        changeLayout("wider");
    }
}

Be sure to check out the full article and script for more detail. This is a good example of how HTML, CSS and JavaScript can be used together to create dynamic CSS and, more specifically, if/else statements to manipulate CSS. One will need to customize the method, however, to get the desired effect.

4. A Better Syntax

Advanced users of CSS know that CSS’ current syntax has some flaws. Although it is well-structured and easy to read for the most part, it is fast becoming outdated as new Web designs call for creative layouts and new Web pages need enhanced functionality. This is what some of these new ideas attempt to address.

Some solutions are nested selectors, nested declaration blocks and smarter shortcuts. We define these below.

Nested Selectors

A forum post over at Webmaster World discusses a specific problem that could be solved with nested selectors. The inquirer wants to override page-specific properties, which can be done easily with the following code, of course:

p.intro {width: 400px;}
.alert {color: red;}

#pageid p.intro {width: 200px;}
#pageid .alert {color: blue;}

For longer style sheets, though, this method can get so confusing and repetitious that they become difficult to read. A better solution would be to use a nested-like structure that would make the code more organized and efficient:

p.intro {width: 400px;}
.alert {color: red;}

#pageid{
	p.intro {width: 200px;}
	.alert {text-align: blue;}
}

This way, #pageid would have to be called only once, and the original uses of p.intro and .alert could be used as a default, while more specific IDs could use the same classes with different values. The overall result would be more efficient and legible.

Unfortunately, the only solution to the problem involved separate style sheets. The problem with nested CSS selectors is that the problems they address are various, and essentially all can be solved with current CSS child classes.

One solution would be to use an alternative “CSS language” that includes nested selectors as part of its custom syntax. A list of these alternative tools is at the bottom of this article, along with further description.

Nested Declaration Blocks

Another issue is our inability to nest entire declaration blocks. The article “What I want from CSS3: nested declaration blocks” offers a smart outlook on the benefit of nested declaration blocks.

Two code examples from the article are copied below. The first represents the way things are done now, which is quite inefficient in most circumstances:

#content ul{
	list-style:square;
    margin:0 2em;
}
#content li{
	list-style:square;
	padding:2px 5px;
	line-height:1.3em;
}
#content a:link{
	[...]
}
#content a:visited{
	[...]
}
#content a:active{
	[...]
}
#content a:hover{
	[...]
}
#nav ul{
	list-style:none;
	margin:0;
}
#nav li{
	list-style:none;
	padding:2px 5px;
	line-height:1.3em;
}
#nav a:link{
	[...]
}
#nav a:visited{
	[...]
}
#nav a:active{
	[...]
}
#content a:hover{
	[...]
}

A much more sensible approach would be:

#content {
    ul{
	 list-style:square;
	 margin:0 2em;
	}
    li{
	 list-style:square;
	 padding:2px 5px;
	 line-height:1.3em;
    }
    a{
	 :link{[...]}
	 :visited{[...]}
	 :active{[...]}
	 :hover{[...]}
    }
}

#nav {
    ul{
	 list-style:none;
	 margin:0;
	}
    li{
	 list-style:none;
	 padding:2px 5px;
	 line-height:1.3em;
    }
    a{
	 :link{[...]}
	 :visited{[...]}
	 :active{[...]}
	 :hover{[...]}
    }
}

Many people would like to be able to use this new method at least for syntax related to links, because they are something we all deal with in every style sheet. Styling lists would also be a great use of this syntax, perhaps similar to how they are nested semantically in HTML markup. If CSS could mimic this nesting ability, style sheets would be much more efficient.

There is no implementation of this kind so far in CSS 3, but as with nested selectors, similar techniques can be achieved with various CSS extension tools, which we explore below.

Smarter Shortcuts

A much-wanted feature in future versions of CSS is to be able to use alternative and smarter shortcuts to shorten CSS code. Some of these are already being implemented in alternative CSS languages, but the new CSS 3 has no sign of this. With greater support, perhaps basic CSS could become smart enough to handle these shortcuts in another 10 or so years, when CSS 4 is introduced.

To see the benefit anyway, let’s look at a few examples in which smarter shortcuts would be beneficial.

When many elements from a certain class or ID share the same properties, things can get a bit repetitious:

#navigation h1, #navigation h2, #navigation h3{
	font-family: Verdana, Tahoma, sans-serif;
	letter-spacing: -1px;
}

Smarter syntax would tighten things up, saving both time and space in the style sheet:

#navigation [h1,h2,h3]{
	font-family: Verdana, Tahoma, sans-serif;
	letter-spacing: -1px;
}

As most of us know, styling links in CSS can be a huge hassle. Nesting these elements, as shown above, is a great solution, but a smarter syntax for dealing with pseudo-classes would also be good:

a:link, a:active, a:visited
{
	font: bold 10pt Verdana, Tahoma, sans-serif;
	color: #444444;
}

a:hover
{
	color:#000;
}

	#navigation a:link, #navigation a:visited,
	{
		font: normal 10pt Verdana, Tahoma, sans-serif;
		color: #000;
	}

	#navigation a:active, #navigation a:hover
	{
		font-size: 14pt;
	}

Having all these pseudo-classes in the way is rather inefficient. Grouping them would be much smarter:

a[:link, :active, :visited] {
	font: bold 10pt Verdana, Tahoma, sans-serif;
	color: #444444;
}

a:hover{ color:#000; }

	#navigation a[:link, :visited] {
		font: normal 10pt Verdana, Tahoma, sans-serif;
		color: #000;
	}

	#navigation a[:active, :hover] {
		font-size: 14pt;
	}

While the solution in the example above saves only a little space, that extra space can do wonders in a larger style sheet. And most will agree that this is a much easier way to read and understand style sheets.

The general goal for any situation like this is to be able to share elements, pseudo-classes and any other type of extension with o one declared class or ID, rather than repeating the class or ID name repeatedly.

5. Simple Mathematical Functions

Most of us have come across a piece of CSS code for which we thought, “This would be much easier if I could just subtract X number of pixels,” or “This solution would be easier if I could just add X% onto this DIV.”

Without this simple math for CSS, most of us have found workarounds to many of these problems. But by implementing simple mathematical functions in CSS, we can eliminate extra code and make our thought process easier.

A rough example could be something like below:

.element {
	width: 100%-150px;
}

Example of the Centered Layout

This technique would benefit fluid layouts or layouts that need to be aligned relative to the user’s screen size. It would also help layouts that have centering, either vertically or horizontally.

Take the very basic example above of a horizontally centered layout. Simply using auto for both the left and right margins creates a centered layout for the end user, no matter how wide their screen is. But what if, for whatever reason, you want that centered wrapper shifted 200 pixels to the left? The wrapper has to be shifted 200 pixels relative to the center of the user’s screen, not just your own.

Right now there is no solution for this. Most designers faced with this issue either just float everything to the left and use absolute positioning to finish the job. But those who have larger resolutions will see excess white space to the right of the screen. Not a bad solution, because everything is still in place, readable and efficient, but having the power to create a layout that accommodates all users would be better.

The second solution is to center the layout but adjust the elements around it. This could mean repositioning some elements on the background image or adding “artificial” transparent spacing to align the wrapper.

This is just one example, but simple math could solve many problems in CSS. An article over on KilianValkof.com titled “Random CSS Thought: Math in CSS” presents just this idea and specific examples of how this could be helpful.

Is It Right?

As with many new ideas for CSS related to programming, a debate arises over whether we should do it at all. Implementing an idea like this in future versions of CSS would no doubt help out many developers and designers, but is it going too far?

The concern may not be that the CSS would become more inefficient or complicated but rather that, as we have heard with most complaints against proposals to expand CSS, it moves away from CSS’ original purpose, which is to style.

But wouldn’t we be using these techniques to improve styling? Techniques such as these could give designers more possibilities for layouts, transporting us to the future of Web design more quickly. So is simple math another way to style with CSS or yet another programming concept that purists have to put up with?

addSizes.js
This small JavaScript takes care of an automatic link file-size generation. For instance, if you have large .mp3- or .pdf-files offered on your page, this script automatically checks the size of the file and displays the format and the file size in brackets.

syntaxhighlighter
SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server.

samaxesjs
samaxesJS is a set of utilities and controls, written in JavaScript, for building rich interactive web applications. The TOC control dynamically builds a table of contents from the headings in a document and prepends legal-style section numbers to each of the headings: adds numeration in front of all headings, generates an HTML table of contents, degrades gracefully if JavaScript is not available/enabled.

Step by Step
This script allows you to show and explain visitors what your page has for them. You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.

MoreCSS
MoreCSS is a small, cross-browser compatible JavaScript library which enables you to create tab menus, tables and lists with “zebra”-style as if you were using regular CSS. It’s enough to include the library in HTML and use CSS for general purpose design elements.

Facelift Image Replacement
Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (h1, h2, etc.) to span-elements and everything in between!

CSS Sprites2
Cross-browser functionality is a bit of a freebie; jQuery works across most modern browsers, so everything you see here works in IE6+, Firefox, Safari, Opera, etc. We’ve also accounted for multiple graceful degradation scenarios.

jParralax
“Parallax is [a jQuery library that] turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.” Think of looking through a camera and having layers of objects at various distances moving around. This library achieves that effect using multiple using static images, one for each layer.

ddMenu – Context Menu Script
ddMenu is a simple MooTools-based script to create you’re own context menus. Press the Crtl-key and right click to switch between ddMenu and browser default context menu. Press the Shift-key and right click to open ddMenu beside the browser default context menu.

js-hotkeys
jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination. Alternative approach.

BarackSlideshow
An elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.

Galleria
Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

History Keeper
unFocus History Keeper is a JavaScript based library for managing browser history (back button) and providing support for deep linking for Flash and Ajax applications. It enables back button support, for client-side applications, has a hash-based deep linking (Anchor Style – index.html#foo=bar) and is event-driven – Subscriber pattern. Currently the script works well in all modern browsers.

date.js
Datejs is an extensive open source JavaScript Date library for parsing, formatting and processing time and dates.

Lightview
Lightview is another script that create modal windows on a web-site. It has a smart image preloading, adjustable rounded corners, without PNGs and content resizes to always fit on your screen. The script can be used for presentations, single images, Quicktime-files, Forms, Iframes, Inline content and Flash-files.

Coda popup bubbles

The software company Panic has a beloved Mac application for developers called Coda. Coda has an incredibly elegant design, and one of the subtle JavaScript effects that have been added to it is a stylized pop-up bubble. The blog jQuery for Designers has created a script that combines jQuery with custom code to replicate the feature used on the Coda website. The effect is subtle and elegant and greatly adds to the user’s experience.

ajax im
With the popularity of Web-based IM clients, like meebox, many developers want to add a JavaScript IM client of their own. Ajax IM is a library dedicated to creating an Ajax IM client that works out of the box. The script is a relatively large one, but it can be a nice effect for some websites that need more interaction with their users.

LiveValidation

This is a handy gem for any web developer who uses forms. Trying to create an intuitive sign-up form can be a chore with all the different types of validation that need to happen. Also, creating a faster, more intuitive form with JavaScript can be tricky, too. Thankfully, LiveValidation has taken the guesswork out of the process and created a tiny, unobtrusive script that can take the pain out of form validation. If you’re a Ruby on Rails developer, LiveValidation comes in two forms: either with Prototype (ideal for Ruby on Rails) or one that can be used as a stand-alone package.

Ajax AutoSuggest
Like TextboxList’s autocompletion script, Ajax AutoSuggest is a tasteful and refined autosuggest script. The script is quite tiny, weighing in at just under 9k, and adds a very nice touch to any search form.

FancyUpload
This is an upload script that shows the progress of files you are uploading. It’s perfect for any upload form and even allows for multiple uploads at the same time. You can limit the size of the uploaded file as well as restrict the type of file that can be uploaded. The only requirement that FancyUpload has is that your users have installed Flash, which has a 95% penetration among Web users.

Taggify
Taggify is a bit different in implementation than the other JavaScripts listed. Taggify is a hosted solution for adding pop-up widgets to photos. Instead of having to download a script and host it on your site, you can just add a tiny <include> in your tag, and you’ll have the power of Taggify installed on your site. Using Taggify is interesting; it adds notes and other useful information to photos.

Think of it as a souped-up version of the note-adding feature for Flickr images. You can add any HTML to the Taggify note, creating a nice informational page to accompany any image that needs a bit more explanation.

AmberJack
AmberJack is one of the more interesting and compelling JavaScript techniques. Website tours are extremely beneficial because they can help familiarize users, showcase features and products, and many other things. Possibly the best part about AmberJack is that nothing has to be installed or learned to start creating website tours. AmberJack provides a way for website and product owners to quickly and easily create website tours with JavaScript. It’s an amazingly tiny download, at only 4 KB.

Sliding Tabs
This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution.

JavaScript Image Loader
If you’re looking for a more intuitive way for users to upload and preview images on your website, the JavaScript Image Loader (demo) might fit the bill. The JavaScript Image Loader is a great way to show your users an image before it has uploaded, and it can also provide other information about the image if desired.

swfIR
swfIR is an interesting concept as it uses a combination of Flash and JavaScript and adds image manipulation functionality to it. Once swfIR is installed, it adds a <span> with the class “swfir” around the image. swfIR can add almost any manipulation to an image. An especially useful feature of the script is its ability to automatically resize images based on the size of the page. When you resize the text on the page, the image resizes proportionally with the layout. By resizing the picture along with the text, the design feels much more cohesive.

MooFlow
For fans of Apple’s Cover Flow feature in Leopard, MooFlow is taken directly from Apple’s playbook. MooFlow is a JavaScript gallery script that uses MooTools and adds a bit of JavaScript magic to make beautiful image galleries, complete with a slider that mimics Cover Flow.

Just like with Cover Flow, you can manipulate MooFlow’s gallery layout and functionality. You can toggle full-screen mode, image reflection, and autoplay. MooFlow is quite configurable and easy to set up because it just grabs all of the images within an element.

amCharts
This script is a chart generator that runs off of a combination of flash and JavaScript. You can generate virtually any type of graph or chart with the script, and can even use .csv and xml files to pull the data from. With amCharts, you can generate graphs in the form of Column & Bar, Pie & Donut, Line & Area and Scatter & Bubble.

GreyBox
GreyBox’s website hails the JavaScript pop-up window as “A pop-up window that doesn’t suck,” and for good reason. GreyBox does everything that a modal window should do. It can display pictures, websites, and just about any other content you can think of.

Using GreyBox is incredibly easy because once you’ve included the JavaScript file in the header, the only thing left to configure is adding a <rel> tag to whatever element you want to display in the window.

Mailist
While Mailist isn’t a full-blown AJAX contact form, the tiny script is exactly what most Web developers need to quickly store email addresses for things like beta sign-ups and other expression-of-interest forms. It even has a back end for administering things like email backups and editing the look of the form.

SWFObject
SWFObject is a tiny little Flash player that uses JavaScript to overcome many of the obstacles that can’t be solved by markup alone. The player is a tiny download, only 9.5 KB (or 3.8 KB GZIP’ed). SWFObject prides itself on its compatibility with modern browsers, and it actually uses JavaScript to help detect which Flash player version to use and to avoid outdated Flash plug-ins that break Flash content.

PlotKit
PlotKit is a JavaScript chart-plotting script that relies on the tiny JavaScript framework Moochikit. PlotKit is an exceptional library for quickly plotting all sorts of graphs.

JavaScript tabifier
The JavaScript tabifier is a nifty little script that allows you to quickly and easily create tabs for your content. All that is required to use tabifier is to include the JavaScript and add a <div> with the class “tabber” surrounding the tabbed content, and then add the class “tabbertab” and the title for the <div> in what shows as the tab’s title. You can even use advanced techniques, such as adding cookies to the tabs, dynamically changing the tabs, and setting a default tab.

FancyZoom 1.1
Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom is providing a smooth, clean, truly Mac-like effect.

It is focused on a smoothest, polished zooming animation and automatically scales images from any image link, with no HTML changes. The script also preloads full-size images in the background on link mouseover and requires no Javascript libraries. FancyZoom requires only two lines of code in your HTML-files.

A Mac OS X-style Dock In JavaScript
Apple’s Mac OS X operating system is renowned for its fluid graphical effects. One impressive feature is the dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Achieving this effect in JavaScript is difficult, but the MacStyleDock function allows this feature to be implemented easily.

fValidator – An open source (free) unobtrusive javascript tool for easy handling form validation
fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). Alternative jQuery Plugin.

jQuery Interactive Date Range Picker with Shortcuts
An advanced jQuery date picker that is optimized for quickly selecting a date from a list of preset dates/ranges, and we added smooth transitions when additional options are revealed.

Raphaël
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the Web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library. Raphaël uses SVG and VML as a base for graphics creation.

NoGray Time Picker
This time picker utilizes a simple drag and drop interface. To select the time users can just drag the minutes or hour of a clock.

Yetii – Yet (E)Another JavaScript Tab Interface
Yetii is a simple, yet functional tab interface implementation. It has lightweight, object-oriented code and degrades gracefully in browsers without JavaScript-support. You can have many independend tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.

You can link to certain tab on page A from page B via URL parameter and you can turn on tab persistence feature, so the most recently clicked tab is stored inside a cookie and remembered between page refresh.

Calendar
Calendar is a Mootools Javascript class that adds accessible and unobtrusive date-pickers to your form elements.It has highly configurable inputs and selects, multi-calendar support (with padding), variable navigation options and multi-lingual and fancy date formatting.

Starbox
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well.

Magic Zoom
Magic Zoom is a JavaScript zoom tool. It’s the best way to display images in incredible detail. Users do not need to click anything – they just move their mouse over the image to see every detail of your product.

Magic Magnify
Magic Magnify is a Flash zoom tool. It’s an elegant effect to view images with a magnifying-glass. Upon hover over the image, the user sees the close-up detail of the product. Price: $28 / £15 / €18.

Carousel.us
Carousel.us is a Javascript 3D carousel, using either the prototype.js and scriptaculous.js or mootools.js frameworks. It also uses PHP Easy Reflections v3 by Richard Davey.

slideshow
Slideshow is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. Slideshow is the result of many trials in code attempting to create a javascript class that was lightweight, unobtrusive, a snap to setup (but also highly configurable), extendable and – built using the javascript framework with the best effects – visually very impressive. Slideshow began as a side project by Aeron Glemann, and is now open source with an MIT-style license.

jgrousedoc
jGrouseDoc allows developers to produce documentation for their javascript code based on javadoc-like comments embedded into the source code. It allows documentation of classes, regardless what kind of library/technology was used to implement OOP. The script also allows documentation of multiple syntaxes that could be used to invoke a function/method. The output is customizable using CSS and Velocity templates or XSLT.

Lightbox 2
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Control.Window
Control.Window is a fully programmable, multi purpose windowing toolkit for Prototype. It covers a wide variety of use cases and allows for a high degree of customization. It can attach to links to open the targets as windows, or can be filled with dynamic content. It includes support for stackable, draggable and resizable windows. Subclasses to handle Modal windows, LightBoxes and Tooltips are included.

SimpleModal
SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

Creating a carousel with MooTools
You’ve probably seen it on various websites: those neat little inline slideshows that browse you through a gallery of images (or content if you want, too). Most people simply copy the code to use it on their own site, but I believe that by making it yourself, you learn new techniques and gain new insight. Therefore I’ll walk you through this tutorial that teaches you how to achieve this through the use of CSS and MooTools.

Unobtrusive Expand and Collapse Navigation
A tutorial that displays how to to create a vertical navigation that will expand and collapse to show and hide sub-navigation using only unordered lists and as few class/id names as possible.

Image Cross Fade Transition
Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript. Today’s challenge is the rollover transition.

Slider Gallery
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.

FancyZoom meets jQuery // Ordered List // We Make The Web Beautifully Simple

Build An AJAX Powered Shopping Cart
The goal of this tutorial is to show you how to build an AJAX powered shopping cart. However, it will not be production ready. The back end requirements vary from site to site far too much to write an effective tutorial. Instead, we are going to focus on the AJAX parts.

jQuery iPod-style Drilldown Menu
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

Load Content While Scrolling With jQuery
This script allows to load the content “on the fly” – once th visitors has scrolled vertically to the end of the content block. “I always loved the dZone’s Ajax content loading while scrolling feature and created a similar one using jQuery.”

JavaScript Tooltips
This tutorial describes how to create a nice, lightweight JavaScript tooltip. By Michael Leigeber.

Newsticker
Antonio Lupetti re-creates a news ticker which is similar to the one used on Newsvine. Mootools in use.

jQuery virtual tour
This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.

Flexigrid
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

tableFilter
This script allows users to filter and sort even large tables quickly and in an interactive way.

Row Locking with Checkboxes
“I had my function set up so that if any part of the row was clicked, the checkbox would check. When I clicked the actual checkbox, it would show a checkmark, but since the checkbox is a part of that row, my function would run, too, which would then think it’s time to uncheck the checkbox. In a fraction of a second, it would look like the checkbox never checked, but the row changed color anyway, sending the wrong signals to the end user.”

jQuery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. It has the ability to style icons based on file extension, uses AJAX to fetch file information on the fly, has a customizable expand/collapse event and support single- and multi-folder views.

Proto.Menu, prototype based context menu
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page.

Pricing Matrix
This tutorial explains how to create a matrix that would give an indication of relationships among the information provided.

Toggling Announcement Slider
“A few of my customer have asked for me to create a subtle but dynamic (…I know…) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick from GoDaddy’s playbook, I put together an announcement slider that toggles on click. Thanks to MooTools 1.2, this was a breeze.”

Tutorials

Show/hide a Login Panel using Mootools 1.2
“Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest WordPress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.”

Images slider to create Flickr-like slideshows
If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework. “Since long time I was looking for a simple way to implement a Flickr-like slideshow (”image carousel”) and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.”

Create an apple style menu and improve it via jQuery
“Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.”

Creating a Slick Auto-Playing Featured Content Slider
By Chris Coyier.

Build An Incredible Login Form With jQuery
One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we’ll also animate it

Create a Slick Tabbed Content Area using CSS & jQuery
“One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.”

Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
Learn how to create a lightweight, intelligent “accordion” effect using the Prototype and Scriptaculous libraries.

Create a Simple, Powerful Product Highlighter with MooTools
This tutorial will help you find your inner cow by introducing you to one of the most powerful and modular javascript libraries—MooTools. You’ll create a flexible tool for highlighting your sites products or services using the MooTools javascript framework.

Creating a Dynamic Poll with jQuery and PHP
When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

Background color
The background-color property fills the background with a solid color. There are a number of ways to specify the color. The follow commands all have the same output:

background-color: blue;
background-color: rgb(0, 0, 255);
background-color: #0000ff;

The background-color property can also be set to transparent, which makes any elements underneath it visible instead.

Background image
The background-image property allows you to specify an image to be displayed in the background. This can be used in conjunction with background-color, so if your image is not tiled, then any space that the image doesn’t cover will be set to the background color. Again, the code is very simple. Just remember that the path is relative to the style sheet. So, in the following snippet, the image is in the same directory as the style sheet:

background-image: url(image.jpg);

But if the image was in a sub-folder named images, then it would be:

background-image: url(images/image.jpg);

Background repeat
By default, when you set an image, the image is repeated both horizontally and vertically until the entire element is filled. This may be what you want, but sometimes you want an image to be displayed only once or to be tiled in only one direction. The possible values (and their results) are as follows:

background-repeat: repeat; 	/* The default value. Will tile the image in both directions. */
background-repeat: no-repeat; 	/* No tiling. The image will be used only once. */
background-repeat: repeat-x; 	/* Tiles horizontally (i.e. along the x-axis) */
background-repeat: repeat-y; 	/* Tiles vertically (i.e. along the y-axis) */
background-repeat: inherit;	/* Uses the same background-repeat property of the element's parent. */

Background position
The background-position property controls where a background image is located in an element. The trick with background-position is that you are actually specifying where the top-left corner of the image will be positioned, relative to the top-left corner of the element.

In the examples below, we have set a background image and are using the background-position property to control it. We have also set background-repeat to no-repeat. The measurements are all in pixels. The first digit is the x-axis position (horizontal) and the second is the y-axis position (vertical).

/* Example 1: default. */
background-position: 0 0;	/* i.e. Top-left corner of element. */

/* Example 2: move the image to the right. */
background-position: 75px 0;

/* Example 3: move the image to the left. */
background-position: -75px 0;

/* Example 4: move the image down. */
background-position: 0 100px;

The image can be set to any position you like.

The background-position property also works with other values, keywords and percentages, which can be useful, especially when an element’s size is not set in pixels.

The keywords are self-explanatory. For the x-axis:

• left
• center
• right

And for the y-axis:

• top
• center
• bottom

Their order is exactly like that of the pixels values, x-axis value first, and y-axis value second, as so:

background-position: top right;

Percentage values are similar. The thing to remember here is that when you specify a percentage, the browser sets the part of the image at that percentage to align with that percentage of the element. This makes more sense in an example. Let’s say you specify the following:

background-position: 100% 50%;

This goes 100% of the way across the image (i.e. the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.

The smiley face is aligned as it would be if it was set to right center.

Background attachment
The background-attachment property determines what happens to an image when the user scrolls the page. The three available properties are scroll, fixed and inherit. Inherit simply tells the element to follow the background-attachment property of its parent.

To understand background-attachment properly, we need to first think of how the page and view port interact. The view port is the section of your browser that displays the Web page (think of it like your browser but without all the toolbars). The view port is set in its position and never moves.

When you scroll down a Web page, the view port does not move. Instead, the content of the page scrolls upward. This makes it seem as if the view port is scrolling down the page. Now, when we set background-attachment:scroll;, we are telling the background that when the element scrolls, the background must scroll with it. In simpler terms, the background sticks to the element. This is the default setting for background-attachment.

Let’s see an example to make it clearer:

background-image: url(test-image.jpg);

background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;

As we scroll down the page, the background scrolls up until it disappears.

But when we set the background-attachment to fixed, we are telling the browser that when the user scrolls down the page, the background should stay fixed where it is — i.e. not scroll with the content.

Let’s illustrate this with another example:

background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;

We have scrolled down the page here, but the image remains visible.

The important thing to note however is that the background image only appears in areas where its parent element reaches. Even though the image is positioned relative to the view port, it will not appear if it’s parent element is not visible. This can be shown with another example. In this one, we have aligned the image to the bottom-left of the view port. But only the area of the image inside the element is visible.

background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;

Part of the image has been cut off because it begins outside of the element.

The Background Shorthand Property
Instead of writing out all of these rules each time, we can combine them into a single rule. It takes the following format:

background: <color> <image> <position> <attachment> <repeat>

For example, the following rules…

background-color: transparent;
background-image: url(image.jpg);
background-position: 50% 0 ;
background-attachment: scroll;
background-repeat: repeat-y;

… could be combined into the following single line:

background: transparent url(image.jpg) 50% 0 scroll repeat-y;

And you don’t have to specify every value. If you leave a property out, its default value is used instead. For example, the line above has the same output as:

Simplifying artwork

By simplifying the artwork in your movie, you can greatly reduce the size of a Flash movie, thereby increasing its speed. Here are the most important techniques:

• Use symbols for every object that appears more than once. You can turn any object or group of objects into a symbol. Nest your symbols – for example, turn an object into a symbol and then use it in a movie clip or button. Remember that you can change the color of symbol instances – you don’t need to create a new symbol.
• Group objects whenever possible. Groups are almost as efficient as symbols.
• Use vector graphics rather than bitmaps when you can. When you do use bitmaps, don’t animate them unless you need to. Bitmaps and bitmap animation can increase your Flash Player file size and thus the download time. However, with the rising adoption of broadband Internet access, bitmaps are an increasingly important part of Flash projects
• Optimize curves (choose Modify➪Shape➪Optimize). You can optimize curves to reduce the number of lines used to create a shape. This can be tiresome on a large project, but if you really need to reduce the size of your Flash movie, this may help.
• Use solid lines rather than dashed, dotted, and other line types when possible. Try to avoid custom line widths
• Use the Pencil tool rather than the Brush tool whenever possible. The Pencil tool uses fewer bytes in your movie.
• Use the Web-safe color palette. Avoid custom colors. Custom color definitions are kept with the Flash Player file.
• Avoid using transparency when you don’t need it. Using transparency doesn’t make your Flash file bigger, but it can slow down playback because of the extra calculation required. (On the other hand, sometimes transparency effects make your movie look really great.)
• Use solid fills rather than gradients. Gradients are more complex and make the Flash Player file bigger. However, gradients are also key to the Flash look that is so popular. They help to make vector graphics look less flat

Optimizing text

Text can consume lots of bytes. Here’s what you can do to reduce the byte bite:

• Reduce the number of fonts and font styles (bold, italic) as much as possible. Use simpler sans serif fonts if you can. You get the best results file-size-wise with the device fonts (sans, serif, and typewriter), although you might find these device fonts boring. Flash doesn’t need to store the outlines of device fonts in the .swf file, so these take up fewer bytes. And usually your Flash projects will look better if you don’t use too many fonts – a useful rule in the graphic design world is to avoid using more than three fonts in a design.
• If you create text fields, limit the text and specify any restrictions that you can in the Character Options dialog box.(Choose Window➪ Property➪Properties to open the Property inspector if it’s not already open, and then click Character in the Property inspector to open the Character Options dialog box.) For example, exclude unnecessary character outlines, such as numbers.

Compressing soundYou can compress sounds to reduce the file size. When you compress individual sounds in the Sound Properties dialog box, you can fine-tune settings for each individual sound in your movie. Use the MP3 format whenever possible because it compresses well.

Here are some other ways that you can reduce the size of your sound files:

• Adjust the sound’s Time In and Time Out points to prevent silent areas from being stored in your .swf file.
• Reuse sounds by using different In and Out points and by looping different parts of the same sound.
• Don’t loop streaming sound.

Animating efficiently

One of the most effective ways to reduce file size is to use tweens. Frame-by-frame animation creates larger files. Keeping animation localized in one area also helps. Small animations (animations where the objects don’t move much) produce smaller file sizes than wide-area animations.

Advertisement

// //

Although usability evangelists often consider Flash to be a usability nightmare, used properly, Flash can provide users with a rich and interactive interface which would be impossible otherwise. Today Flash is the de-facto standard for interactive elements on the Web as most users install Flash plug-in by default. And in fact, there are many paths creative designers can take to create a more interactive and user-friendly interface.

Searching for ‘flash tutorials’ via Google & Co. won’t provide you with the results you expect. Not that you won’t find any relevant results, on the contrary — you will be directed to a large number of Flash repositories which offer everything: sometimes useful, but mostly not. Besides, browsing through these repositories isn’t that much fun — as you sometimes need to figure out whether a link you see is a hidden AdSense-block or the actual tutorial. And it’s really hard to find something “refreshing” and new simply using some standard keywords.

This article provides hand-picked professional Flash tutorials which can enrich your design skills and improve the quality of your works. We’ve tried to select most interesting and useful tutorials. Most sources can serve as the entry point for further tutorials.

Animation and Effects

Flash Tutorial Create Water Wave Effect Animation Using Masking Tween
We’re going to make a flash animation water wave effect and we going to move step by step to give you a clean explanation about how to make a water wave effect in flash using masking technique.

Car Animation
This lesson will teach you how to create on a simple way very attractive animation using a picture of Bmw 3 series.

Picture Animation
In this detailed lesson you will see how to create on a simple way picture animation using the Brush Tool and mask.

High-tech city animation
This detailed lesson made for Flash 8 will teach you how to create a really cool and advanced light city animation… More tutorials from this site.

Animate a Logo in Flash
With web and multimedia design there is the opportunity to add a little fun and creativity to your logo by creating a simple animation effect. Obviously this process isn’t limited to just your logo; animating an element can help draw attention to a particular object or area of a webpage or digital presentation.

Misty River
Read this tutorial and see how to create misty river animation. You will also learn how to use flash filters (Blur, Bevel and Drop shadow filter) and more.

Hypnotic Gear Rotation
I’m not sure what inspired me to do this crazy gear rotating animation, but for some reason I just started making a simple gear in flash, then what does a gear do? well it rotates!

Execute Lightbox Scripts From Flash: Part Deux
Since the first thread showing you how to execute Lightbox scripts from Flash was such a big hit, I decided to write another showing you how to gain even more functionality in this regard. Tonight I will be showing you how to initiate a Lightbox containing a Flash movie from a Flash movie, and how to initiate Lightbox groups containing images as well as Flash movies.

Simple Shape Animation
In this tutorial you will see how to transform image in many shapes. To create this tutorial, you don’t have to use action script. Only one thing that you need is flash. More tutorials from this source.

Old Grains Effect (Old TV Effect) in Flash
In this tutorial we are going to emulate a Grain Effect in Flash which is similar to what we see in old televisions. This effect is widely used in movie scenes to indicate a event that have occurred ages ago. More tutorials from this source. Has also a collection of video tutorials.

Zoom in Zoom Out Flash Animation with Fading Effect
This tutorial will teach you how to create a simple zoom in & zoom out animation with fade-in and fade-out effect in Flash. You can use this zooming effect on any image or text.

Creating a 3D Tunnel Effect in Flash
Learn how to create this very cool 3D tunnel effect in Flash using some simple 2D animation techniques.

Creating realistic Fireworks in Flash
Create a realistic particle based firework display using Flash.

Rotating Letter Effect in Text
See this tutorial and learn how to rotate letters in series using some special flash tricks. You don’t have to use action script code to make this lesson. More tutorials from this source.

Eye Catching Effect With Flash
This is an eye-catching effect that could not be created too easily without ActionScript. Flash allows you to create many cool effects using only (or almost only) ActionScript, I hope you can make a good effect.

Images and Videos

How to Make Video Panoramas from Your Digital Camera’s Video Clips
Your digital camera probably shoots video clips as well, and by stitching those clips together, you can make a full-motion video panorama. Landscapes, streetscapes, interior shots, birthday parties, they all come to life in sparkling, wide-angle videoramas. If you liked our panographies, you’ll love our videoramas. Read on to see an example and learn how it’s done.

360 Grad View
Create a panoramic view of the image with Flash.

Creating movie clips with reflections in ActionScript 3.0
Ben Pritchard’s tutorials. You’re probably aware of those nice reflections appearing in some of the latest websites, online ads, and even software. It’s an effect common to “Web 2.0″ designs, in which something like an album cover or video player appears to reflect some sort of virtual floor beneath it. This tutorial steps you through the creation of the Reflect class.

Flash Tutorial – Fullscreen Flash Movie with no Warping or Stretching
Flash movies inherently have a predetermined height and width, as defined by the size of the Stage in the Flash authoring tool. Generally when a Flash movie is resized in the web browser, its contents get warped and stretched. This is sometimes not a problem with vector graphics, but with bitmap graphics it is an utter disaster. There are, however, some clever ActionScript techniques that can allow you to resize a Flash movie without any distortion of its contents. 5 pages.

Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery
This technique provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Make a Mega Drop-Down Menu with jQuery
So how would we go about implementing Mega drop down menus? While it’d be great to do all of this in pure HTML and CSS, it’s impossible at the moment to get those nice half-second delays — and of course there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements. Instead, I’ve whipped up a solution using jQuery and a very nifty plugin called hoverIntent.

Creating a Filterable Portfolio with jQuery
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

A fancy Apple.com-style search suggestion
“This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.”

Current Field Highlighting
As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. In this tutorial, we’ll improve our current field highlighting, using jQuery.

Creating a Dynamic Poll with jQuery and PHP
“When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.”

jQuery Infinite Carousel
This screencast explains how you can create a simple and nice scrolling carousel and how you can also make it automatically loop round by itself. For the latter see also Automatic Infinite Carousel.

De-Constructing Accordion and Hover Effects with jQuery
This video tutorial explains how the hover and accordeon effects on Tim Van Damme’s site can be achieved using jQuery.

Better form submission feedback with jQuery
Browsers fail to give users effective feedback when the user submits a form. Users respond by clicking the submit button over and over. The problem compounds when users find out they’ve been charged 5 times or when you receive 5 contact submissions. The solution is to replace the submit button with a friendly message letting the user know the form is working.

How to Make a Threadless Style T-Shirt Gallery
Here’s the gist: There’s a thumbnail which is a full sized image in a container div, which is smaller than the full sized image. The image is centered within it, but doesn’t show entirely because overflow:hidden is turned on. When the mouse hovers over the thumbnail, overflow:hidden gets turned off, and the entire image is displayed.

Create a gallery by using z-index and jQuery
In this tutorial you will learn to combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures. Also check out Enhancing the z-index Gallery with a Preloader.

Add a favicon near external links with jQuery
External links should always be marked distinctly in order to make it easy for readers to see them easily. You cann add a CSS class to all outgoing links using the pseudo-class a[href^=http]. A more dynamic solution is using the favicon.ico of the external site, if it is available of course.

Scrollable Timelines
Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.

Automatically generate table of contents using jQuery
“Some time ago, I was debating with my friends on the topic: is there any use of generating table of contents automatically. The conclusion was that it can be useful in cases when the reading material is long enough and table of contents (TOC) has a fixed position on the screen. This tutorial will show you how to create such TOC in just a few lines of code.”

Reddit-style Voting With PHP, MySQL And jQuery
If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.

Transparent Rollovers at ParticleTree

How Is It Done?

Each article title is placed inside of a h3-element that has an anchor (a) inside. The a tag has a transparent .png-background image that has its background-position shifted on hover as well as a background color.

The .png-image is positioned to the right hand side and sits above the tree image. The background color fills the space between the two, creating the illusion of 3D-dimension (the content block appear to be in front of the “tree”-image). Each link also uses CSS-based rounded corners (using -moz-border-radius).

HTML

<div>
	<h3>
	The Importance of Design in Business
    <cite><b>By Chris Campbell</b> · Comments (<strong>15</strong>) · August 14th</cite>
	</h3>
</div>
	...code repeats...

CSS

#features .red a:hover {
	background-position: 498px -30px;
}
#features .red a:hover{
	background-image:url(/images/fadetree.png);
	background-repeat:no-repeat;
}
#features[id] h3 a {
	height:auto;
	min-height:66px;
}
#features h3 a {
	-moz-border-radius-bottomright:30px;
	-moz-border-radius-topleft:30px;
	font-size:210%;
	height:66px;
	padding:11px 15px 3px 105px;
}
.red a:hover, a.red:hover {
	background:#5E2510 none repeat scroll 0 0;
	color:#FFFFFF;
}
.red a, .red cite strong {
	color:#843418;
}
h3 a {
	display:block;
	text-decoration:none;
}

Transparent Rollovers at ParticleTree

How Is It Done?

Each article title is placed inside of a h3-element that has an anchor (a) inside. The a tag has a transparent .png-background image that has its background-position shifted on hover as well as a background color.

The .png-image is positioned to the right hand side and sits above the tree image. The background color fills the space between the two, creating the illusion of 3D-dimension (the content block appear to be in front of the “tree”-image). Each link also uses CSS-based rounded corners (using -moz-border-radius).

HTML

<div>
	<h3>
	The Importance of Design in Business
    <cite><b>By Chris Campbell</b> · Comments (<strong>15</strong>) · August 14th</cite>
	</h3>
</div>
	...code repeats...

CSS

#features .red a:hover {
	background-position: 498px -30px;
}
#features .red a:hover{
	background-image:url(/images/fadetree.png);
	background-repeat:no-repeat;
}
#features[id] h3 a {
	height:auto;
	min-height:66px;
}
#features h3 a {
	-moz-border-radius-bottomright:30px;
	-moz-border-radius-topleft:30px;
	font-size:210%;
	height:66px;
	padding:11px 15px 3px 105px;
}
.red a:hover, a.red:hover {
	background:#5E2510 none repeat scroll 0 0;
	color:#FFFFFF;
}
.red a, .red cite strong {
	color:#843418;
}
h3 a {
	display:block;
	text-decoration:none;
}

9. Blending Flash and CSS

HunterBoot.com has wonderfully constructed black and white imagery on their homepage panel. This imagery is a part of a Flash movie that contains not only the imagery, but also nice hover-effects for the link lists at the bottom of the layout. See the screenshot below for a better understanding of what is going on structurally. When you mouse over one of the links in the four columns below the main image panel, you get a nice animated rollover in the background of that column.

How Is It Done?

At first glance it appears that this is some type of jQuery plugin or something similar. However this is a pure CSS-based solution that uses Flash-elements for hover-effects. This technique starts out with some markup. There is a main div that contains the Flash movie (inside a containing div), then four distinct divs, one for each of the sections.

These four divs have a heading and then an unordered list containing the individual links. The main containing div is positioned relatively to its parent. These four URLs are positioned absolutely inside of the relative main container div – this puts the URLs on the top of the Flash movie. When you move your mouse over the four implied columns, this triggers a rollover animation in the Flash movie, because your mouse is actually over the Flash movie. Since the links sit above the Flash you can still click on them with no unfcomfortable side effects.

HTML

	<!-- the flash container -->
	<div id="featurePanelHomeFlashBoxCntr">
	   ...the flash movie is inserted here via SWFObject...
	   ...it's important to note that the .swf's wmode is set to transparent...
	</div>

	<!-- the product category links -- >
	<div>
	<ul>
		<li><a href="/product/link/goes/here" >Link Text</a></li>
		...repeat li's for each link
	</ul>
	</div>
	<div>
	<ul>
		<li><a href="/product/link/goes/here" >Link Text</a></li>
		...repeat li's for each link
	</ul>
	</div>
	<div>
	<ul>
		<li><a href="/product/link/goes/here" >Link Text</a></li>
		...repeat li's for each link
	</ul>
	</div>
	<div>
	<ul>
		<li><a href="/product/link/goes/here" >Link Text</a></li>
		...repeat li's for each link
	</ul>
	</div>

CSS