Grow your CSS skills. Land your dream job.

Animate responsive layout

  • # March 13, 2013 at 1:47 am

    Hey guys,
    Here’s the deal:

    I need to code [this layout](http://i.imgur.com/LHPr6nH.gif “Layout”)

    And the problem is, how can I make blocks slide when browser window is resized?

    p.s: sorry I wrote pretty fast, got to go to work now, I’ll write a bit detailed when I’ll arrive.

    # March 13, 2013 at 4:08 am

    I have a 403 forbidden on your link.

    Anyway, I think what you are looking for is: `CSS transitions`. I may be wrong though, hard to have an idea without the code.

    However please remember that no one is a frigging obsessive resizing his browser window like a mad man.

    # March 13, 2013 at 4:12 am

    Image link fixed.

    Codepen: http://codepen.io/justdade/pen/hDzAv

    I’m still not sure how to make blocks “fly” under the big block instead just jumping there.

    # March 13, 2013 at 5:39 am

    So yeah, the only thing I found is http://masonry.desandro.com/ I guess I’ll use it.

    # March 13, 2013 at 6:22 am

    Why would you care? Like Hugo said probably no one will even notice. I don’t think it will be possible (with just html/css), sure masonry will work but is the overhead worth it?

    # March 13, 2013 at 6:28 am

    I don’t care, but my boss care xD “I want” is his best argument.

    # March 13, 2013 at 6:54 am

    Other than the JS options, the only other way is with positioning and transition of the position values.

    It will be ugly….

    # March 13, 2013 at 11:39 am

    http://suprb.com/apps/nested/

    # March 13, 2013 at 12:30 pm

    That’s pretty!

    # March 13, 2013 at 4:23 pm

    Agreed but performance sucks after a few resizes.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".