CSS3 Transitions – Popout gallery

Ahh, the joy of tinkering.

As a developer at heart I love fiddling with web technologies, exploring new standards and techniques! CSS3 has some wonderful features that allow people like me greater creative breadth to do stuff “in-browser” as it were. The ability to, for example, add gradients and rounded edges to boxes within the code means that I can strip my markup down to be considerably more streamlined. I started doing this on the 2010 redesign of the City of Lincoln Council website where “modern” browsers (Chrome, Safari) see a significantly more “shiny” version of the site, complete with browser rendered curves, gradients and drop shadows.

I’ve carried a few of these techniques into other sites but have also been fiddling with the possibilities of CSS3 to spruce up techniques I’ve been using for years. One of these is the CSS “Suckerfish” menus, straightforward popout menus that work without Javascript. I’ve used the theory behind these a number of times to create popouts and suchlike on websites, but with CSS3 these can suddenly be given a new lease of life.

Check this example out.

The galleries here are straightforward suckerfish show/hide’s but with a bit of consideration into how the showing works and some CSS3 transitions, they appear to (when viewed in Safari or Chrome) fade in and out. I decided to set the height, padding and opacity to achieve this, and the transition tells the browser to ease these values in when the trigger is hovered over.

Feel free to check out the markup and CSS; it really is very straightforward and, as more browsers support CSS3, will genuinely start to give webpages an “app” look.

NOTE: This page will NOT work in Internet Explorer. At all. Firefox will render the page, but not perform the transitions. Opera, Safari and Chrome do the whole kaboodle (apart from gradients in Opera)

Advertisements

One thought on “CSS3 Transitions – Popout gallery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s