LearnSmooth Resizing with Responsive Web Design and CSS3 Transitions

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.

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

  1. Celvin Toress on July 23, 2011 at 11:44 am said:

    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. Anonymous on July 8, 2011 at 6:12 am said:

     How to create the responsive web design?
    http://couponuses.com/stores/jimmyjazz-coupons-jimmy-jazz-coupon-codes-jimmy-jazz-promotion-codes.html

  3. Jensnltin Dick on June 27, 2011 at 9:00 am said:

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

  4. Ray Loke on June 27, 2011 at 1:45 am said:

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

  5. Chris Coyier on June 25, 2011 at 8:43 pm said:

    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.

  6. Jay Whiting on June 25, 2011 at 8:19 am said:

    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!

  7. 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 www.toprankexpress.com
     and www.brandwebdirect.com

  8. 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

Learn to code with Treehouse

Start your 7 day free trial today and get access to hundreds of video courses in web development, design and business!

Learn more