CSS Stuff

Seeds to get you started

Downloads

3D Text Tower: Puts a shadow under text that is solid rather than blurred, by way of multiple shadows all offset by 1px. Rollovers grow the height of the tower.; View Demo Download Files

Scroll/Follow Sidebar: Multiple techniques, including pure CSS, for a sidebar that stays put when you scroll down the page.; View Demo Download Files

CSS3-Only Tabs: No JavaScript at all in this roundup of different CSS-only; View Demo Download Files

CSS3 Photo Gallery: Photo gallery with click-to-enlarge photos, fancy CSS3 rollover effects, and marked up with HTML5.; View Demo Download Files

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

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

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

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

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