In CSS3 we have new user interface features like Resizing element, Box sizing and outlining.

List Of User Interface Properties

  • resize
  • box-sizing
  • outline-offset

 

CSS3 Resizing

With resizing in CSS3 we can easily resize the element.

UI Resize
UI Resize
CSS


div {
resize: both;
overflow: auto;
}

 

CSS3 Box Sizing

With box-sizing property in CSS3 we can tell browser about what is the sizing property include (i.e: height, width).

They include border-box or the content-box which is default value of the width and height property.

UI box Sizing
UI box Sizing
CSS


div {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
width: 50%;
float: left;
}

 

CSS3 Outline Offset

With outline-offset property in CSS3 we can offset an outline, and also draw beyond the border edge.

Outline Offset differ in 2 ways,

  1. Outlines do not take up space
  2. Outlines may be non-rectangular
UI Outline
UI Outline
CSS


div {
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}

 

Full HTML & CSS Code

HTML & CSS





Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Note: Internet Explorer and Opera do not support the resize property.

This is left half div.
This is right half div.

This div has an outline border 15px outside the border edge.

Note: Internet Explorer does not support the outline-offset property.




 

Leave a Reply

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