[CSS] NINJA

A short Modernizr course

Last year, I did a quick 5 min presentation on some of the features available in Modernizr for Web Directions What Do You Know event. From there, Sitepoint & Learnable’s Kevin Yank asked me to put together a short course for learnable.com based on the presentation. So after working on the occasional weekend I put it all together and got it launched just before xmas 2011. Continue reading

Handling high resolution sprite images with CSS3

The iPhone 4 has introduced a new challenge to web developers due to its retina display using a higher dpi than most devices. What looked sharp in desktop browsers and other lower dpi devices appears blurry and pixelated on the iPhone 4 and potentially other devices which will have higher dpi screens. The current solution is to have two sets of images one for general and one for high dpi screens. You then switch it up using media queries depending on the screens dpi, this has been documented and discussed many times. Let’s try a different approach. Continue reading

Pure CSS collapsible tree menu

The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. I’ve seen various examples about doing it with CSS and they’ve all required JavaScript. Not content with any of those solutions I investigated doing it with pure CSS, I got a good head start from my Custom Radio and Checkbox inputs article. From there I’ve come up with a solution that works pretty well. Continue reading

Futurebox, lightbox without the javascript and target pseudo-class

So I recently released a revised version of Futurebox which added a lot of functionality. But one thing was nagging me, the fact that it utilised the target pseudo-class to hijack in page anchors which has a few side effects that can create some major drawbacks to the technique. One being that if you click multiple futurebox links and then click the browser back button it will go through all the previous overlays that were activated due to the natural behaviour of in page anchors. The other drawback, clicking an in page anchor can cause the page to abruptly jump as it tries to bring the anchor location to the top of the page. Continue reading

Is that a Speedo in your pocket?

Why yes it is…

I’ve been sitting on this little idea for a while and as a bit of fun I finally got around to putting it together and properly testing it. Basically on an iPhone with geolocation support (3.0+), I have set up a little web app that will get the speed from the GPS and move the speedometer needle according to your current speed in kilometres. Continue reading

Custom radio and checkbox inputs using CSS

In my never ending quest to find weird and wonderful ways to abuse CSS and all its little intricacies, I have come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting browsers. The journey wasn’t easy and I was on the brink of filing it in the “to crazy” folder, never to be seen again. Luckily I had a brain wave that paid off and actually allowed this to be a very viable solution that degrades beautifully and works in 80% of the browsers. This is my story. Continue reading

Even better image preloading with CSS2

Recently I read an article on better image preloading using CSS3 which presented a clever idea using CSS3 multiple background images to preload images on one element as opposed to another method of having containers for each image. As of writing the support for multiple backgrounds is fairly sparse with webkit having the best support (Safari 3+ & Chrome 1+), Firefox is introducing this in the upcoming 3.6 release.
Continue reading

Futurebox, revisited

Earlier this year I unleashed futurebox into the wild. It got a whole lot more attention than I anticipated and I got some great feedback. Since then, I have been slowly working on a new version of futurebox which incorporates many new features. Continue reading

Create the accordion effect using CSS3

Recently I have been playing around with CSS transitions and animations as implemented in webkit based browsers such as Safari and Chrome. They have been submitted to the W3C for consideration in the CSS3 spec so hopefully we should see more browsers support this soon, Firefox 3.5 supports CSS transforms which was developed by the webkit people to work alongside CSS animations & transitions. Continue reading

Real text rotation with CSS

Just saw a great post on Jonathan Snooks’ blog about doing text rotation with CSS and how to accomplish it in IE using IE propriety filter basic image property to rotate a text block. But there is a better way using CSS3 writing-mode property that has been in IE since version 5.5. Continue reading