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
* This website may or may not contain any actual CSS or Tricks.