I was thinking about different effects today that can be used to make design a little more playful with minimal work. After looking at a few sites I began to wonder just how hard it would be to implement a sliding tab. As it turns out all you really need is a handful of CSS3. Within ten minutes you too can add more interactive effects without relying on Flash or jQuery.
Read MoreThinking 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.