Demos Tutorials

• By David WalshJune 24, 2013

  Create a 3D Animating Sidebar

  Mozilla's Christian Heilmann is an evangelist that knows how to walk the walk as well as talk the talk.  You'll often see him creating sweet demos on his blog or the awesome Mozilla Hacks blog.  One of my favorite pieces...

• By David WalshJune 10, 2013

  Using CSS attr and content for Tooltips

  I've found myself in love with CSS content and attr; I've recently written about how you can use the property and expression on a basic level, how you can implement CSS counters, and use for the sake of localization.  I wanted to share...

• 

  
• By David WalshMay 22, 2013

  CSS content and attr

  CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily.  There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content.  You saw a...

• By David WalshMay 15, 2013

  CSS Counters

  Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

• By David WalshMay 13, 2013

  Multiple Background CSS Animations

  CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements.  I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with...

• 

  
• By David WalshApril 25, 2013

  CSS Background Animations

  Background animations are an awesome touch when used correctly.  In the past, I used MooTools to animate a background position.  Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks.  The following simple CSS snippet animates...

• By David WalshApril 24, 2013

  Unicode CSS Classes

  CSS class name structure and consistency is really important; some developers camelcase classnames, others use dashes, and others use underscores.  One thing I've learned when toying around by HTML and CSS class names is that you can actually use unicode symbols and icons as classnames.

• By David WalshApril 3, 2013

  CSS @supports

  Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

• 
• By David WalshMarch 27, 2013

  Detect Pseudo-Element Animation Support

  A while back I posted an interesting tidbit from Daniel Buchner which allows developers to detect DOM node insertions with JavaScript and CSS animations; an awesome trick driven by CSS animations.  Lea Verou recently posted another detection snippet driven by CSS animations:  detecting pseudo-element...

• By David WalshMarch 20, 2013

  Detect Vendor Prefix with JavaScript

  Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps).  The awesome X-Tag project has...