Category Archives: Programming

A new look for CSS3 Sprites

It’s interesting to realize just how long ago this technique began to be used, and in terms of web technology, the fact that it still sees widespread usage is pretty telling how groundbreaking this was back then.

Now, with more and more browsers supporting CSS3 transitions, it’s now possible to add fancy fading effects to your sprites without even needing javascript, and with minimal impact to the usual css3 sprites code for rollovers, and a bit of :active for mobile devices to at least catch the fade-in on click.

Starting with a typical sprite used for social media links ;  150×100 with 40px icons centered in a 50px matrix:

typical sprite used for social media rollovers

The markup is pretty simple:

But the CSS gets interesting:

It starts off pretty typical, but around line 23, instead of repositioning the css sprite on hover we do something a bit different —  using the CSS pseudo-class :after to hold the re-positioned image in the same place as the original but with an opacity of 0 (so it’s completely transparent), we adjust the opacity on :hover/:active to 1;

The even fancier bit comes from the new transition property where we adjust it over a 0.8 second span to create the fadein/fadeout effect.

The result?  Sexy.

The CSS for this feels a tad more elegant as well. Plus since this sort of fanciness requires no additional javascript, you save a tad on your website download payload to the client browser.

Leo Laporte discusses his website design cost and development time

On a recent episode of The Tech Guy (Show 865: http://twit.tv/show/the-tech-guy/865 at the 34:50 mark)  Leo Laporte discusses the wide range of website costs, development time and the price he’s paying for phase one of The Tech Guy Labs website’s redesign.

reference:
http://techguylabs.com
http://techguylabs.com/radio/ShowNotes/Show865#toc13

Integrating jQuery Fancybox and Tooltips plugins

In the process of adding the lightbox plugin at fancybox.net to a client’s website, it became necessary to integrate it with the jquery tooltip plugin that was already in place and in use on the site to create styled tooltip hovers on certain of the images there.

sample image showing tooltip plugin - image copyright Nancy Carol Willis, all rights reservedsample image showing lightbox with title overlay - image copyright Nancy Carol Willis, all rights reserved
images copyright by Nancy Carol Willis, all rights reserved

As the method of adding tooltips to the images conflicted with how the rel="" attribute was used by the lightbox for grouping sets of images, this required a bit of alteration to the lightbox plugin. Continue reading