Grow your CSS skills. Land your dream job.
Thumbnail for Nine Image Expander
Nine Image Expander Thing
This nine image expander was converted from Flash to HTML, CSS, and JavaScript.

Download Files   View Demo

Download thumb (Better) Round Out Tabs demo
(Better) Tabs with Round Out Borders
We'll show how you can use the CSS :before and :after pseudo elements to create a rounded bottom border edge for each tab without using images.

Download Files   View Demo

Download thumb for Image Wipes demo
Webkit Image Wipes
Essentially a two-image slideshow, where the images "reveal" each other through a film-like fade/wipe effect. Utilizes CSS3 image masks made from CSS3 gradients.

Download Files   View Demo

thumbnail for Garage Door demo
Garage Door Style Menu
Multiple levels of images are used here to create a "door" link which slides up to reveal another image beneath. CSS3 transitions are used if available, otherwise falls back to jQuery JavaScript.
Download Files   View Demo
thumbnail for Arrow Headers demo
Adobe-like Arrow Headers
Here's our version of the cool header bars that Adobe uses on their site.
Download Files   View Demo
thumbnail for Slide In Captions demo
Slide In Image Captions
Adding captions that slide in overtop an image on rollover using HTML5.
Download Files   View Demo
Thumbnail for Faking Float Center demo
Faking ‘float: center’ with Pseudo Elements
Floating an image between text columns.

Download Files   View Demo

Thumbnail for 3D Text Tower demo
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.

Download Files   View Demo

Thumbnail for Scroll Follow Sidebar demo
Scroll/Follow Sidebar
Multiple techniques, including pure CSS, for a sidebar that stays put when you scroll down the page.

Download Files   View Demo

Thumbnail for CSS3 Photo Gallery demo
CSS3 Photo Gallery
Photo gallery with click-to-enlarge photos, fancy CSS3 rollover effects, and marked up with HTML5.

Download Files   View Demo

Thumbnail for Building a Starburst with CSS demo
Building a Starburst with CSS
We'll show ya how to create this dynamic starburst that will grow and adjust with it's contents.

Download Files   View Demo

Thumb for CSS3 Gradients demo
Speed Up With CSS3 Gradients
Simple gradients using CSS3.

Download Files   View Demo

Thumb for CSS3 Only Tabs demo
CSS3-Only Tabs
No JavaScript at all in this roundup of different CSS-only tabs.

Download Files   View Demo

Thumb for Functional CSS Tabs Revisited demo
Functional CSS Tabs Revisited
Creating CSS tabs using the radio-button/:checked technique.

Download Files   View Demo

Thumb for Pop From Top Notification demo
Pop From Top Notification
Let's create a notification that pops down from the top of the browser window, then slides away.

Download Files   View Demo

Thumb for Responsive Data Tables demo
Responsive Data Tables
Reformat the table based on the screen size using media queries.

Download Files   View Demo

thumbnail for Secret Message 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

thumbnail for Fade Out Bottom 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

Thumbnail for Fancy Colored Sitemap 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

Thumbnail for Sideways Headers demo
Sideways Headers
Make header tags rotated 90-degrees and align along the left of a blog of content rather than at the top.

Download Files   View Demo

Thumbnail for Fun With Blurred Text demo
Fun With Blurred Text
Fun creating blurry text and random color animations.

Download Files   View Demo

Thumbnail for Full Browser Width Bars demo
Full Browser Width Bars
Stretch an element to the full width of the browser window but limit the text inside to a readable width.

Download Files   View Demo

thumbnail for Rounded Corners 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

Thumb for Color Animate Any Shape demo
Color Animate Any Shape
Quick fun coloring shapes with a knockout PNG.

Download Files   View Demo

thumbnail for Remote Linking 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

thumbnail for CSS3 Progress Bars demo
CSS3 Progress Bars
Progress bars just using CSS3 fancies.

Download Files   View Demo

Thumbnail for Breadcrumbs demo
Breadcrumbs with CSS Triangles
Use color saturation with HSLa and arrow shapes built with psuedo-element CSS triangles to represent hierarchy with this breadcrumb navigation technique.

Download Files   View Demo

Thumbnail for Blurry Background Effect 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

thumbnail for 3D Parralax Background 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

thumbnail for Fold Out Popups demo
FoldOut Popups
Here we'll build a fold out popup where you can click a button/link to reveal tooltip-like rich HTML popup content.

Demo:

Download Files   View Demo

Thumbnail for Hover on Everything But demo
Hover on "Everything But"
Apply a hover state to everything but the element actually being hovered over.

Download Files   View Demo

Thumbnail for Infinite All-CSS Scrolling Slideshow demo
Infinite All-CSS Scrolling Slideshow"
Animate a row of images across a page and repeat that indefinitely.

Download Files   View Demo

Thumbnail the Shapes of CSS demo
The Shapes of CSS
You can make these shapes with a single HTML element and CSS.

Download Files   View Demo

Thumbnail for CSS3 Slideup Boxes demo
CSS3 Slideup Boxes
Hover over the box and have another box slide up and replace the title box.

Download Files   View Demo

thumbnail for User Switchable Stylesheets demo
User-Switchable Stylesheets
Using a small bit of javascript, you can create buttons which can switch between alternate stylesheets you have declared 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

thumbnail for Choice Value Pairs demo
Choice Value Pairs
Allows the user to enter a value after selecting a radio button.

Download Files   View Demo

*May or may not contain any actual "CSS" or "Tricks".