Award-winning, Oregon-based design production studio Funnelbox 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.
Hover over the opening slideshow and you'll some subtle but neat visual effects
CSS effects
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.
The agency puts as much effort into blogging about others' work as it does its own
Circular shapes
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."
animations and transforms scattered throughout the site in appropriate locations
This showcase was originally published in .net magazine issue 233.
