Downloads

*   Some of the better examples from the blog   *

Layout Packs

Several common fluid-width layout frameworks.

Demos: Fixed, Fluid / Fixed, Fluid, Fixed / Fluid, Fixed / Half and Half

Download Files

Filtering Blocks

Choose from a series of links to filter “results” below.

Download Files   View Demo

Moving Boxes

jQuery powered slider-thingy. Boxes slide by left and right by clicking the tabs, clicking the next box itself, or using the keyboard. They also “zoom” in and out.

Download Files   View Demo

Simple jQuery Dropdowns

Very simple, minimally styled, jQuery powered dropdown menus. Cross browser friendly and maintains navigation “trail”. Each “level” is clearly marked in the CSS.

Download Files View Demo

Fancy Colored Sitemap

Probably overkill for most sitemaps, but this is a neat proof of concept that fades different “layers” of the sitemap to different colors as they are rolled over with the mouse.

Download Files   View Demo

Step-by-Step Seminar Registration

As different “steps” of the registration process are completed, the current step gets check off as done and the next step lights up. Includes some very basic form validation.

Download Files   View Demo

Custom Order Form

jQuery is at it again handling all the calculations in this simple order form.

Download Files   View Demo

Start/Stop Slider

This is a jQuery based slider which auto-detects the number of “slides”. There are multiple animations per slide, which auto-plays, but has a start/stop button. Very easy to adapt.

Download Files   View Demo

jQuery Accordion Widget with CSS Sprites

There are four buttons on this example, each of which has three states. That would normally be 12 images (thus 12 server requests), but thanks to the CSS sprites technique it is only one. The technique is demonstrated practically in the form of an accordion widget.

Download Files   View Demo

Blurry Background Effect

Simple fixed positioning of two separate background images allows for a very neat effect. Like looking through frosted glass.

Download Files   View Demo

Modal Login Page

A completely distraction-free login page. This are becoming more and more popular with web applications which require you to login before you can do very much. The login page can be a great place to have fun with design and do something unique.

Download Files   View Demo

Fade-in Gradient Body Border

Darken the edges of your site with this “body border” technique. Makes use of alpha-transparent PNG’s which “fade in” from the edges of the browser window. jQuery provides the engine to optionally have the gradients fade in and out.

Download Files   View Demo

Auto-Playing Featured Content Slider

This is an alteration based on the jQuery “Coda Slider” plugin. Each “slide” can be any kind of html content whatsoever, or be a full-size image with an overlay. Each slide also has a unique thumbnail which can be clicked to go to the corresponding slide, with an arrow above it to indicate the active panel. And… its auto-playing!

Download Files   View Demo

A Better Blogroll

Using SimplePie to parse the RSS feeds from a couple of sites, jQuery to “slide” between them, and of course some fancy CSS/XHTML and design, we have what I’m calling “A Better Blogroll”. Better seen than described.

Download Files   View Demo

Garage Door Style Menu

Using jQuery and a plugin to help with animating background /examples/images, we are able to make a sliding “Garage Door” style menu. The menu code is purely semantic. The UL provides the “background”, the list items provide the “shutters” and the links themselves are the “windows”.

Download Files   View Demo

Your Own Social Home

Many of the webs “social” sites offer up API’s to get data out of them for use on your own sites. Sites like Flickr, Twitter, and ScrnShots offer up these API’s in JSON format which makes it really easy for us to grab and display this information on any ol’ static page. This example uses jQuery to grab and display the info. Should be fairly easy to alter to pull your own stuff.

Download Files   View Demo

Rounded Corners

This example has FIVE different techniques you can use for rounded corners. Pick and choose the example that works best for you.

Download Files   View Demo

Transparent PNG Fills Pack

If the effect you are shooting for is a solid transparent fill color, using an alpha-transparent PNG to fill the background is easier than using CSS Opacity. (It won’t make the children elements transparent as well). Here is a pack of PNGs in different colors and different transparancies ready-to-go. Example + Working IE 6 PNG Hack.

Download Files   View Demo

iPhone Interface from any RSS Feed

Using SimplePie, jQuery and CSS you can make your own slick iPhone interface from ANY RSS feed. All the files are included, simply change the feed address at the top of the index.php file and you are done.

Download Files   View Demo

Contact Form

Web Forms get a bad rap for being hard to style. I disagree… and here is a contact form to prove it. This form has a unique style, includes current field highlighting and validation. Oh, and it works! Looking for the old version? (featuring recaptcha). Old Version Download.

Download Files   View Demo

Unique Twitter Updates Page

Twitter provides a simple little javascript snippet for placing your recent tweets on any webpage. This is a little static webpage that makes use of that snippet and puts a unique design around it.

Download Files   View Demo

HTML Email Template

Nothing too fancy here, but a real solid foundation on an HTML email template that will work and look good in all email clients. Tables and inline styling, just the way email likes it!

Download Files   View Demo

Remote Linking

Thanks to some CSS positioning tricks, we can actually have two different page elements in two different areas of the page use the same anchor link and react to the same hover event. Pretty cool effect that uses nothing but pure CSS and degrades very well.

Example One:

Download Files   View Demo

Example Two:

Download Files   View Demo

Photo Revealer

A line of cropped photo thumbnails on a string. Clicking the “More Info” button expands the photograph to full size and reveals additional information about the photo. Photos are loaded on page load so there is no waiting after the click. Uses jQuery.

Download Files   View Demo

Secret Message

Using a combination of fixed positioning, relative positioning, and transparent /examples/images you can create a “secret message”, which will only reveal itself if you scroll down and line up the letters. PSD included in the example which shows simple masking technique.

Download Files   View Demo

3D Parralax Background: Starry Night

Parallax is very cool three-dimensional effect. “Closer” stars will appear to move faster while more “distant” stars move slower. This is achieved with transparent background /examples/images and percentage positioning. Downloads include Photoshop (.psd) file.

Demo (resize browser window)

Download Files   View Demo

Demo (auto-moving):

Download Files   View Demo

User-Switchable Stylesheets

Using a small bit of javascript, you can create buttons which can switch between alternatate stylesheets you have delcared in your head section. You could do something as subtle and useful as bumping up the font-size, or do full-blown changes in layout and style. Careful though, rules from the original stylesheet will still apply, so if you don’t implicitly re-declare every selector and attribute, you can get some holdouts.

Download Files   View Demo

Fade Out Bottom

Using a fixed position alpha-transparent PNG, you can make the bottom of your page “fade out”.

Download Files   View Demo

Dynamic FAQ Page

Nothing incredible with the functionality, the answer section just slides out from underneath the question. The important part is that it is built with the utmost consideration for accessibility and semantics.

Download Files   View Demo