The CSS3 has the new property called resize. Using this you can resize the particular container either by vertically or horizontally are both vertical and horizontal. If you want allowed the user to resize the content means you add this property in your style.
Syntax:
.adc{
resize:both;
overflow:auto;
}If you used the resize property means you should use the overflow property. In that above syntax I add the resize:both its means the that particular content will resize in both vertically and horizontally. That I used the overflow:auto;
If you allowed the user to resize the content in vertically means you should add the resize:vertical; overflow-x:auto. If you want to resize the content horizontal mean's you should add resize:horizontal; and overflow-y:auto;
Example for Both Side:
CSS
div.bot{
width:300px;
height:50px;
border:2px solid #ff0000;
resize:both;
padding:5px;
overflow:auto;
}
HTML<div class="bot"> This is resize css3 UserInferace property you can resize this box by clcik the resize option at bottom right corner of this box. </div>
Output:
This is resize css3 UserInferace property you can resize this box by clcik the resize option at bottom right corner of this box.
Example for Vertical Side:
CSS
div.ver{
width:300px;
height:50px;
border:2px solid #ff0000;
resize:vertical;
padding:5px;
overflow-y:auto;
}
HTML<div class="ver"> This is resize css3 UserInferace property you can resize this box by clcik the resize option at bottom right corner of this box. </div>
Output:
This is resize css3 UserInferace property you can resize this box by clcik the resize option at bottom right corner of this box.
Example for Vertical Side:
CSS
div.ver{
width:300px;
height:50px;
border:2px solid #ff0000;
resize:horizontal;
padding:5px;
overflow-x:auto;
}
HTML<div class="hor"> This is resize css3 UserInferace property you can resize this box by clcik the resize option at bottom right corner of this box. </div>
Output:
This is resize css3 UserInferace property you can resize this box by clcik the resize option at bottom right corner of this box.
| Feature | Chrome | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | Yes | Yes | No | Yes | Yes |
