Resize Elements with CSS3

The CSS3-spec is full of wonderful things. Sometimes things that are not so desperately needed as others but anyway… good to have them.

One of these more or less needed properties might be resize. It is part of the CSS3 Basic User Interface Module. What is really useful with resize is the ability to restrict the resizing of textarea for example. But it is possible to resize every element you’d like to as this demo by Simurai shows.

There are four values for resize that are kinda logical:

  • none: no resizing at all
  • horizontal: resizing only horizontal
  • vertical: resizing only… vertical
  • both: yeah, well… pretty obvious, right?!

Robert Nyman created this demo using the resize-property. You should also check out Louis’ article that’s pretty great. And: the MDN docs about resize. You can also read more about this topic at Stackoverflow.

2 Replies to “Resize Elements with CSS3”

  1. Thanks for the nice overview. It is strange that all this doesn’t work on the iPad. Apple gets more and more like Microsoft and forgets to develop on Safari. They were innovative, now it is Google.

    1. I think it’s a little bit different for touch devices like iPad: How would you want to resize a textarea easily with your fingers…

      But in general I think you’re right! Apple is doing a lot of other incredible stuff but is losing ground when it comes to browser-development.
      But: I’m not really into the Webkit-development but I think Apple is still contributing a lot to it. Also the specs are developed by a lot of people working for Apple – also Google, Opera and Mozilla.

Leave a Reply

Your email address will not be published. Required fields are marked *