Thinking inside the box

While doing my routine check of the latest user experience and design blogs I ran across this gem from Smashing Magazine. It breaks down the inner workings of the new flexbox model provided by the latest CSS3 specifications. This is definitely a must read if you care at all about the flexible box model

Some of the key features worth keeping an eye on include

  • Automatically adjusting relative widths of children elements
  • Controlling the presentation of elements purely with CSS
  • Borders that span entire columns without ugly hacks

Like most of you I have done my fair share of battles with CSS floats, trying to get proportional formatting right, and doing complex mathematical gymnastics to get to a final goal. While this is still under development and I am certain subject to many iterations before it is properly supported at least it is a move in the right direction. I know that I for one will be playing around with it this weekend so I can add it to my toolkit.

Web animation with CSS3 and jQuery (Part 1)

When all you have a hammer everything looks like a nail. What happens when you have an entire bag at your disposal? Let's take a look at a case where a multitude of options exists for a simple task. That task is to animate a page element to bring an interactive experience to an otherwise static layout.

This is a comparison of two approaches to a simple animation problem - how do you draw attention to a section of the page? The first two methods rely on CSS3 techniques. The third leverages the power of an open source Javascript library to create a truly cross browser compatible experience at the expense of a little bit of processing power. Each way has its own benefits and drawbacks. Read on to learn more.

Read More