CSS3 User Interface

CSS3 User Interface

In CSS3, increasing the number of new user interface features to adjust the element size, frame size and external borders.

In this chapter, you will learn the following user interface properties:

• resize
• box-sizing
• outline-offset

Browser Support

Figures in the table represent the first browser to support the version number of the property.

Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.

CSS3 resizing (Resizing)

In CSS3, resize property specifies whether an element should the user to adjust the size.

CSS code is as follows:

Examples

A div element specified by the user Size:

div
{
resize:both;
overflow:auto;
}

try it"

CSS3 resize box (Box Sizing)

box-sizing property allows you to define the exact contents of a specific area of ​​adaptation.

Examples

Provisions of two side by side with a border block:

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

try it"

CSS3 modified shape (outline-offset)

outline-offset property offset contour and draw the profile beyond the edge of the border.

There are two different contour and frame:

• Contour does not occupy space
• It may be non-rectangular outline

The CSS code is as follows:

Examples

Provisions outside of the contour pixels at the edge of the border 15:

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

try it"

The new user interface features