• CSS Takeaway

    Fast-food for front-end web developers!

    Exploring, testing & refining hot topics from the world of web design. CSS, HTML and jQuery demos, just for fun.

    1. all
    2. galleries
    3. tooltips
    4. slider
    5. lightbox
    6. css3
    7. captions
    8. navigation
    9. tabs
    10. opacity
    11. switching
    12. fixes
    13. links
    14. toggle
    15. text
    16. data
    17. forms
    18. shadow
    19. transition
    20. fixed
    21. fonts
    22. alternate
    23. transform
    24. button
    25. zoom
    26. sticky

  • A Sticky Sidebar

    A Sticky Sidebar
    1. Fixed
    2. Sticky
    Tested in IE7 / IE8 / IE9 Tested in Firefox 11 Tested in Google Chrome 18 Tested in Safari 5 (PC) Tested in Opera 11.01 (PC)
    View Demo

  • CSS3 Image Hover Zoom Effect

    CSS3 Image Hover Zoom Effect
    1. CSS3
    2. Transform
    3. Zoom
    Tested in Firefox 11 Tested in Google Chrome 18 Tested in Safari 5 (PC) Tested in Opera 11.01 (PC)
    View Demo

  • jQuery slide-up photo captions on hover

    jQuery Slide-Up Photo Captions on Hover
    1. Galleries
    2. Captions
    Tested in IE7 / IE8 / IE9 Tested in Firefox 11 Tested in Google Chrome 18 Tested in Safari 5 (PC) Tested in Opera 11.01 (PC)
    View Demo

  • Link progress activity using the :active state

    Link progress activity using the :active state
    1. CSS3
    2. Links
    3. Button
    Tested in Firefox 8 Tested in Google Chrome 15 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
    View Demo

  • A quick-reference roundup of CSS 2D transform demos

    A quick-reference roundup of CSS 2D transform demos
    1. CSS3
    2. Transition
    3. Transform
    Tested in Firefox 4 Tested in Google Chrome 11 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
    View Demo

  • Focused image thumbnails with jQuery & CSS opacity

    Giving visual focus to image thumbnails using jQuery and CSS opacity
    1. Gallery
    2. 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)
    View Demo

  • Adding dimension using the CSS3 box-shadow property

    Adding dimension to elements using the CSS3 box-shadow property
    1. CSS3
    2. Shadow
    Tested in Firefox 4 Tested in Google Chrome 11 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
    View Demo

  • Polaroid photo gallery with CSS transitions & 2D transforms

    Building a polaroid photo gallery using just CSS transitions & 2D transforms
    1. CSS3
    2. Transition
    3. Transform
    Tested in Firefox 4 Tested in Google Chrome 11 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
    View Demo

  • A demonstration of CSS3 Opacity

    A demonstration of CSS3 Opacity
    1. CSS3
    2. Opacity
    3. Transition
    Tested in Firefox 4 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
    View Demo

  • Alternating styles dynamically with jQuery :odd selector

    Add alternating styles dynamically with jQuery :odd selector
    1. 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)
    View Demo

  • Faux loading with jQuery

    Faux loading with jQuery
    1. Tabs
    2. 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)
    View Demo

  • A demonstration of using cufón for text replacement

    A demonstration of using cufón for text replacement
    1. Text
    2. 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)
    View Demo

  • Sticky, fixed position elements upon page scroll

    Fixed position elements upon page scroll
    1. Navigation
    2. 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)
    View Demo

  • Simple, smooth, single page navigation using jQuery scrolling

    Building simple, smooth, single page navigation using jQuery scrolling
    1. Navigation
    2. 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!
    View Demo

  • A simple demonstration of CSS transitions

    A simple demonstration of CSS transitions
    1. CSS3
    2. Links
    3. Transition
    Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 11.01 (PC)
    View Demo

  • A demonstration of the CSS3 text-shadow property

    A demonstration of the CSS3 text-shadow property
    1. CSS3
    2. Shadow
    3. Text
    Tested in Firefox 3.5 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
    View Demo

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

    Smooth jQuery 'back-to-top' links that appear on page scroll
    1. Slider
    2. Links
    Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
    View Demo

  • A slide out navigation with CSS & jQuery

    A slide out navigation with CSS & jQuery
    1. Slider
    2. 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)
    View Demo

  • A simple jQuery accordion menu

    A simple jQuery accordion menu
    1. Slider
    2. 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)
    View Demo

  • Applying the RGBA colour model to text

    Applying the RGBA colour model to text
    1. CSS3
    2. Text
    3. Opacity
    Tested in Firefox 3.5 Tested in Google Chrome 9 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
    View Demo

  • Removing default form field text on click with jQuery

    Removing default form field text on click
    1. 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)
    View Demo

  • Ideas for styling code snippets with CSS

    Ideas for styling code snippets with CSS
    1. CSS3
    2. 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)
    View Demo

  • An animated, interactive bar chart with CSS and jQuery

    An animated, interactive bar chart with CSS and jQuery
    1. Css3
    2. 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)
    View Demo

  • Styling attractive blockquotes & pullquotes with CSS

    Styling attractive blockquotes & pullquotes with CSS
    1. Text
    2. 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)
    View Demo

  • A simple animated login panel with CSS and jQuery

    A simple animated login panel with CSS and jQuery
    1. Slider
    2. Navigation
    3. 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)
    View Demo

  • Pure CSS Tooltips

    Pure CSS Tooltips
    1. 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)
    View Demo

  • Ideas for styling filter links with just CSS

    Ideas for styling filter links with just CSS
    1. 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)
    View Demo

  • A simple indent navigation with CSS and jQuery

    A simple dynamic indent navigation list with CSS and jQuery
    1. 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)
    View Demo

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

    A really simple, but funky, jQuery content slider (vertical)
    1. Gallery
    2. Slider
    3. 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)
    View Demo

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

    A really simple, but funky, jQuery content slider (horizontal)
    1. Gallery
    2. Slider
    3. 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)
    View Demo

  • Super simple jQuery tabbed content

    Super simple jQuery tabbed content
    1. Navigation
    2. 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)
    View Demo

  • Stacking variable height list items without clearing issues

    Stacking variable height list items without wrapping issues
    1. 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)
    View Demo

  • Rounded corners with CSS3 - not images

    Rounded corners with CSS3 - not images
    1. Css3
    Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC)
    View Demo

  • 'Slide and Bounce' with CSS and jQuery

    'Slide and Bounce' with CSS and jQuery
    1. Slider
    2. Captions
    3. 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)
    View Demo

  • Style switching using jQuery

    Style switching using jQuery
    1. Switching
    Tested in IE7 Tested in Firefox 3.5 Tested in Google Chrome 3 Tested in Safari 4 (PC) Tested in Opera 10 (PC)
    View Demo

  • Image caption overlays with CSS and jQuery

    Image caption overlays with CSS and jQuery
    1. Captions
    2. 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)
    View Demo

  • Pure CSS image caption overlays

    Pure CSS image captions
    1. Captions
    2. 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)
    View Demo

  • Full height & width page content scroll with jQuery

    Full height & width page content scroll with jQuery
    1. 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)
    View Demo

  • Preventing jQuery animation build-up with .stop()

    Preventing jQuery animation build-up with .stop()
    1. 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)
    View Demo

  • A rollover image gallery preview with CSS & jQuery

    A rollover image gallery preview with CSS & jQuery
    1. 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)
    View Demo

  • jQuery Tooltips

    jQuery Tooltips
    1. 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)
    View Demo

  • Cross-browser CSS opacity avoiding child inheritance

    Cross-browser CSS opacity avoiding child inheritance.
    1. 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)
    View Demo

  • A cross-browser CSS lightbox-style modal popup

    A cross-browser CSS lightbox-style modal popup
    1. Lightbox
    2. 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)
    View Demo