Words: Jenn Lukas (opens in new tab)
Award-winning, Oregon-based design production studio Funnelbox (opens in new tab) has a snazzy new site, and it's a masterclass in how to present video in an engaging and effective manner.
The website employs prominent large imagery and a dark, sophisticated colour scheme that's wonderfully easy on the eye. On top of all that, the rather beautiful opening slide show comes with some neat CSS effects when hovering over the image.
Using additional divs as masks, hovering transitions the opacity and width of these divs to produce a very usable interface and a nifty effect to boot.
"Motion was used to enhance the experience where appropriate, but it wasn’t overused," discloses developer Neal Mckinney. As you delve deeper into the site, you will find these animations and transforms scattered throughout it in appropriate locations; one example is on the
Our Work page.
Elsewhere on this same page, you’ll see CSS used to create the circular shapes of some links. "I try to keep my CSS as simple as possible for browser compatibility," Mckinney adds enthusiastically, "so for the circle-cropped images I simply applied a large border-radius, and used CSS3 PIE for older versions of IE."
This showcase was originally published in .net magazine (opens in new tab) issue 233.