LearnSmooth Resizing with Responsive Web Design and CSS3 Transitions


writes on June 24, 2011

This weekend I’m hanging out at ConvergeSE in South Carolina, and I got a chance to catch up with my pal, Chris Coyier, of CSS Tricks fame. When you hang out with Chris you can’t help but learn something new, whether it be about CSS, browsers, or Bluegrass music. Right now, he’s working on a very nice redesign of his site that uses responsive web design in combination with CSS3 transitions. As with any responsive design, the layout changes as the browser window is resized, but when transitions are added on top of this, the layout changes animate smoothly.

I thought this was pretty nifty. Even though most users won’t resize a browser window to see a responsive design in action (or perhaps they will, I don’t know), it’s still a very nice touch of polish. After doing some more research, I discovered that Mr. Elliot Jay Stocks recently posted a fantastic article about CSS transitions and media queries that goes into more detail.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

12 Responses to “Smooth Resizing with Responsive Web Design and CSS3 Transitions”

  1. I even try to simplify my website. CSS3 is the best way to create cool animations, text or image effects. Instead of using Flash, CSS3 would be the best option. It keeps your website simple, easy and light. Keeping the point of SEO, your website won’t take too much time to load.

  2. As far as I’m aware there is no such software that supports development using HTML5 and CSS3.http://leanmusclexsite.net/

  3. SMOOTHER AND FASTER in resizing as in ”reconditioning” of conditions and terms to suit new and newer applications.

  4. Video! http://www.youtube.com/realcsstricks#p/a/u/1/1JRfHAPc53o

    I’m not sure this is even close to the final design, but it’s been fun playing.

  5. Ooh! Now this sounds like an innovative use of CSS3 transitions and Media Queries. At our office, we’ve just had everyone read “Responsive Web Design” so this article (and the linked one) come at a very opportune time for me and the rest of my coworkers 😉 Thanks for posting it!

  6. Brandwebdirect on June 25, 2011 at 5:29 am said:

    Thank i realy helpful to read this post and we also apply that process in our web site like http://www.toprankexpress.com
     and http://www.brandwebdirect.com

  7. Michael Anderson on June 25, 2011 at 4:39 am said:

    CSS3 animations, combined with responsive web design? Wow! There is also a good article about CSS Animations at here. I think the future of web is revolutionary. We’re all waiting Mr. CSS-Tricks! Hurry up with you new design.

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop