CSS3 User Interface

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.


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.


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


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


Full HTML & CSS Code

Mukul K

I build websites | Been building websites for the last 3 years and been venturing into App Development now.

Tech Stacks: C, HTML, CSS, JavaScript, C++