• CSS Takeaway

    Fast-food for front-end web developers!

    • Showcase
    • About
    • Contact
  • reset galleries tooltips slider lightbox css3 captions navigation tabs opacity switching fixes links toggle text data forms shadow transition fixed fonts alternate transform button
  • Link progress activity using the :active state

    Link progress activity using the :active state

    Tags: CSS3, Links, Button

    Tested in Firefox 8 Tested in Google Chrome 15 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • A quick-reference roundup of CSS 2D transform demos

    A quick-reference roundup of CSS 2D transform demos

    Tags: CSS3, Transition, Transform

    Tested in Firefox 4 Tested in Google Chrome 11 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • Giving visual focus to image thumbnails using jQuery and CSS opacity

    Giving visual focus to image thumbnails using jQuery and CSS opacity

    Tags: Gallery, Opacity

    Tested in IE6 Tested in IE7 & IE8 Tested in Firefox 4 Tested in Google Chrome 11 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • Adding dimension to elements using the CSS3 box-shadow property

    Adding dimension to elements using the CSS3 box-shadow property

    Tags: CSS3, Shadow

    Tested in Firefox 4 Tested in Google Chrome 11 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • Building a polaroid photo gallery using just CSS transitions & 2D transforms

    Building a polaroid photo gallery using just CSS transitions & 2D transforms

    Tags: CSS3, Transition, Transform

    Tested in Firefox 4 Tested in Google Chrome 11 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • A demonstration of CSS3 Opacity

    A demonstration of CSS3 Opacity

    Tags: CSS3, Opacity, Transition

    Tested in Firefox 4 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • Add alternating styles dynamically with jQuery :odd selector

    Add alternating styles dynamically with jQuery :odd selector

    Tags: Alternate

    Tested in IE6 Tested in IE7 & IE8 Tested in Firefox 3.6 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • Faux loading with jQuery

    Faux loading with jQuery

    Tags: Tabs, Data

    Tested in IE6 Tested in IE7 & IE8 Tested in Firefox 3.6 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • A demonstration of using cufón for text replacement

    A demonstration of using cufón for text replacement

    Tags: Text, Fonts

    Tested in IE6 Tested in IE7 & IE8 Tested in Firefox 3.6 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • Fixed position elements upon page scroll

    Sticky, fixed position elements upon page scroll

    Tags: Navigation, Fixed

    Tested in IE7 & IE8 Tested in Firefox 3.6 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • Building simple, smooth, single page navigation using jQuery scrolling

    Building simple, smooth, single page navigation using jQuery scrolling

    Tags: Navigation, Slider

    Tested in IE7 & IE8 Tested in Firefox 3.6 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC) - Bit flakey!
  • A simple demonstration of CSS transitions

    A simple demonstration of CSS transitions

    Tags: CSS3, Links, Transition

    Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
  • A demonstration of the CSS3 text-shadow property

    A demonstration of the CSS3 text-shadow property

    Tags: CSS3, Shadow, Text

    Tested in Firefox 3.5 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Smooth jQuery 'back-to-top' links that appear on page scroll

    Smooth jQuery 'back-to-top' links that appear on page scroll

    Tags: Slider, Links

    Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • A slide out navigation with CSS & jQuery

    A slide out navigation with CSS & jQuery

    Tags: Slider, Navigation

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • A simple jQuery accordion menu

    A simple jQuery accordion menu

    Tags: Slider, Toggle

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Applying the RGBA colour model to text

    Applying the RGBA colour model to text

    Tags: CSS3, Text, Opacity

    Tested in Firefox 3.5 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Removing default form field text on click

    Removing default form field text on click with jQuery

    Tags: Forms

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Ideas for styling code snippets with CSS

    Ideas for styling code snippets with CSS

    Tags: Css3, Data

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • An animated, interactive bar chart with CSS and jQuery

    An animated, interactive bar chart with CSS and jQuery

    Tags: Css3, Data

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Styling attractive blockquotes & pullquotes with CSS

    Styling attractive blockquotes & pullquotes with CSS

    Tags: Text, Captions

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • A simple animated login panel with CSS and jQuery

    A simple animated login panel with CSS and jQuery

    Tags: Slider, Navigation, Toggle

    Tested in IE6 Tested in IE7 & IE8 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Pure CSS Tooltips

    Pure CSS Tooltips

    Tags: Tooltips

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Ideas for styling filter links with just CSS

    Ideas for styling filter links with just CSS

    Tags: Links

    Tested in IE6 Tested in IE7 & IE8 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • A simple dynamic indent navigation list with CSS and jQuery

    A simple dynamic indent navigation list with CSS and jQuery

    Tags: Navigation

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • A really simple, but funky, jQuery content slider (vertical)

    A really simple, but funky, jQuery content slider (vertical)

    Tags: Gallery, Slider, Tabs

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • A really simple, but funky, jQuery content slider (horizontal)

    A really simple, but funky, jQuery content slider (horizontal)

    Tags: Gallery, Slider, Tabs

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Super simple jQuery tabbed content

    Super simple jQuery tabbed content

    Tags: Navigation, Tabs

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Stacking variable height list items without wrapping issues

    Stacking variable height list items without clearing issues

    Tags: Fixes

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Rounded corners with CSS3 - not images

    Rounded corners with CSS3 - not images

    Tags: Css3

    Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC)
  • 'Slide and Bounce' with CSS and jQuery

    'Slide and Bounce' with CSS and jQuery

    Tags: Slider, Captions, Opacity

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Style switching using jQuery

    Style switching using jQuery

    Tags: Switching

    Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Image caption overlays with CSS and jQuery

    Image caption overlays with CSS and jQuery

    Tags: Captions, Opacity

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Pure CSS image captions

    Pure CSS image caption overlays

    Tags: Captions, Opacity

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Full height & width page content scroll with jQuery

    Full height & width page content scroll with jQuery

    Tags: Slider

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Preventing jQuery animation build-up with .stop()

    Preventing jQuery animation build-up with .stop()

    Tags: Fixes

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • A rollover image gallery preview with CSS & jQuery

    A rollover image gallery preview with CSS & jQuery

    Tags: Gallery

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • jQuery Tooltips

    jQuery Tooltips

    Tags: Tooltips

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Cross-browser CSS opacity avoiding child inheritance.

    Cross-browser CSS opacity avoiding child inheritance

    Tags: Opacity

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • A cross-browser CSS lightbox-style modal popup

    A cross-browser CSS lightbox-style modal popup

    Tags: Lightbox, Opacity

    Tested in IE6 Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
  • Showcase
  • About
  • Contact