Smooth Resizing with Responsive Web Design and CSS3 Transitions - Treehouse Blog Learn to code. Start your free trial with Treehouse. Home Subscribe Free trial Learn Smooth Resizing with Responsive Web Design and CSS3 Transitions Treehouse writes on June 24, 2011 0 0 1 0 Share with your friends Your Name Your Email Recipient Email Enter a Message I read this article and found it very interesting, thought it might be something for you. The article is called Smooth Resizing with Responsive Web Design and CSS3 Transitions and is located at http://blog.teamtreehouse.com/smooth-resizing-with-responsive-web-design-and-css3-transitions. Captcha Submit 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. code css3 responsive web design 12 Responses to “Smooth Resizing with Responsive Web Design and CSS3 Transitions” 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. Reply 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 Reply 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/ Reply 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. Reply 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. Reply Allison House on June 26, 2011 at 3:02 am said: Couldn’t help but grunt weirdly as I watched this. Nghhhghhhffff. Mnnggh. Yes please. Reply Anonymous on June 26, 2011 at 11:10 am said: Dude I could do that all day long. Just resizing the browser 😛 Reply Nick Pettit on June 26, 2011 at 3:17 pm said: This article really needed an example, but I didn’t know where to look. Thanks, Chris! 🙂 Reply 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! Reply 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 Reply 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. Reply Leave a Reply Click here to cancel reply. Name * Email Address (will not be published) * Website Learn to code with Treehouse Start your 14 day free trial today and get access to hundreds of video courses in web development, design and business! Learn more Stay current Sign up for our newsletter, and we'll send you news and tutorials on web design, coding, business, and more! ©2016 Treehouse Island, Inc. About • Careers • Blog • Affiliate Program • Terms • Privacy • Press Kit • Contact Stay current Sign up for our newsletter, and we'll send you news and tutorials on web design, coding, business, and more!