jQHK: A study of the Parallax Effect

In our recent jQuery HK meetup we explored the technic behind the parallax effect using Nike Better World as a reference for our live coding session. The core idea of the effect is: bind each section, sprite and background to the window scroll event record the original offset of the element divide the scroll position […]

Cross browser equal height that works

Since its dawn, CSS has been plagued with the lack of a bullet proof technic to produce equal height columns, boxes and grids. The fortunate few have been able to avoid this problem by “designing for the Web” — no crazy fonts; no equal height. For those unfortunate millions, it isn’t so cut ‘n’ dry. […]

Targeting Safari 3

Found this CSS hack for Safari 3 today which can be handy from time to time: @media screen and (-webkit-min-device-pixel-ratio:0){ /* Safari 3 specific styles go here */ } Most of the time if something looks good in Firefox 2 there’s a 99% chance it will in Safari 3 too. So use this hack sparingly […]

The PNG Transparency Trap

Yesterday’s featured tutorial on Ajaxian.com was titled: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery by Brian Dillard. I wonder how this tutorial got onto Ajaxian as the topic is so much out of date. Ajaxian has always been a place of inspiration and a pit stop for the latest […]

CSS Diagnostics

What is CSS diagnostics? It’s a method of applying styles to elements in your markup to catch standards compliance issues. A way of ensuring you don’t leave any serious accessibility holes and a visual deterrent for web authors editing pages with diagnostics switched on. Here are some resources I found useful in understanding the practicality […]