CSS3 user interface

CSS3 user interface

In CSS3, some new user interface features have been added to resize elements, boxes, and borders.

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

• Resize

• Box-sizing

• Outline-offset

Browser support

The number in the table represents the first browser version number that supports the property.

The number immediately preceding -webkit- , -ms- , or -moz- is the first browser version number that supports the prefix attribute.

CSS3 Resize (Resizing)

In CSS3 resize property specifies whether an element should be resized by the user. This div element is resized by the user. (in Firefox 4, Chrome, and Safari)

The CSS code is as follows:

div
{
    resize:both;
    overflow:auto;
}

CSS3 box resizing (Box Sizing)

box-sizing property allows you to define specific content that fits an area in an exact way.

Example

Specify two side-by-side boxes with borders:

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

CSS3 shape Modification (outline-offset)

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

An outline differs from a border in two things:

• The outline does not take up space.

• The outline may be non-rectangular

The div has an outline 15 pixels outside the border.

The CSS code is as follows:

Example

Specify the outline at 15 pixels outside the edge of the border:

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

New user interface features