CSS-Tricks | Downloads

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.

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.

WordPress Theme: Personal Homepage Theme: A rather simple and clean WordPress theme, featuring a layout ideal for personal websites. Comes with code for Twitter and Flickr integration as well as utilization of SimplePie to pull in headlines from an external blog.

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!

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.

Garage Door Style Menu: Using jQuery and a plugin to help with animating background 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".

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.

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

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.

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.

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.

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.

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!

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.

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.

Digg Header: Work in progress. This is a replica of the Digg header. Fluid width (but only to a point!), drop down menus, attractive search, easy to change colors... There is a lot of smarts in a small place in this example!

Secret Message: Using a combination of fixed positioning, relative positioning, and transparent 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.

3D Parralax Background: Starry Night: Resizing your browser window will reveal a very cool three-dimensional effect. "Closer" stars will appear to move faster while more "distant" stars move slower. This is achieved with transparent background images and percentage positioning. Download includes .PSD

The All Expandable Box: This is a box which will "zoom" both vertically and horizontally when the text is resized in the browser.

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.

Fade Out Bottom: Using a fixed position alpha-transparent PNG, you can make the bottom of your page "fade out".

The Perfect Fluid Width Layout: Shrinks to a minimum of 780px for small monitors. Grows to a maximum of 1260px for larger monitors. Works in all major browsers.