- Nine Image Expander Thing
- This nine image expander was converted from Flash to HTML, CSS, and JavaScript.
- (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.
- 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.
- 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
- Adobe-like Arrow Headers
- Here's our version of the cool header bars that Adobe uses on their site.
- Download Files View Demo
- Slide In Image Captions
- Adding captions that slide in overtop an image on rollover using HTML5.
- Download Files View Demo
- Faking ‘float: center’ with Pseudo Elements
- Floating an image between text columns.
- 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.
- Scroll/Follow Sidebar
- Multiple techniques, including pure CSS, for a sidebar that stays put when you scroll down the page.
- CSS3 Photo Gallery
- Photo gallery with click-to-enlarge photos, fancy CSS3 rollover effects, and marked up with HTML5.
- Building a Starburst with CSS
- We'll show ya how to create this dynamic starburst that will grow and adjust with it's contents.
- Speed Up With CSS3 Gradients
- Simple gradients using CSS3.
- CSS3-Only Tabs
- No JavaScript at all in this roundup of different CSS-only tabs.
- Functional CSS Tabs Revisited
- Creating CSS tabs using the radio-button/:checked technique.
- Pop From Top Notification
- Let's create a notification that pops down from the top of the browser window, then slides away.
- Responsive Data Tables
- Reformat the table based on the screen size using media queries.
- 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.
- Fade Out Bottom
- Using a fixed position alpha-transparent PNG, you can make the bottom of your page "fade out".
- 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.
- Sideways Headers
- Make header tags rotated 90-degrees and align along the left of a blog of content rather than at the top.
- Fun With Blurred Text
- Fun creating blurry text and random color animations.
- Full Browser Width Bars
- Stretch an element to the full width of the browser window but limit the text inside to a readable width.
- Rounded Corners
- This example has FIVE different techniques you can use for rounded corners. Pick and choose the example that works best for you.
- Color Animate Any Shape
- Quick fun coloring shapes with a knockout PNG.
- 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:
Example Two:
- CSS3 Progress Bars
- Progress bars just using CSS3 fancies.
- 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.
- Blurry Background Effect
- Simple fixed positioning of two separate background images allows for a very neat effect. Like looking through frosted glass.
- 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):
Demo (auto-moving):
- 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:
- Hover on "Everything But"
- Apply a hover state to everything but the element actually being hovered over.
- Infinite All-CSS Scrolling Slideshow"
- Animate a row of images across a page and repeat that indefinitely.
- The Shapes of CSS
- You can make these shapes with a single HTML element and CSS.
- CSS3 Slideup Boxes
- Hover over the box and have another box slide up and replace the title box.
- 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.
- Choice Value Pairs
- Allows the user to enter a value after selecting a radio button.