WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 User Interface


CSS3 user interface

In CSS3, some new user interface features have been added to adjust element size, box size and outer border.

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

  • resize
  • box-sizing
  • outline-offset

Browser support

The numbers in the table indicate the first browser version number that supports this attribute.

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

Property
resize 4.0 Not supported Not supported 5.0
4.0 - moz-
4.0 15.0
outline-offset 4.0 Not supported Not supported 5.0
4.0 - moz-
4.0 9.5

CSS3 Resizing

In CSS3, the resize attribute specifies whether an element should be resized by the user.

This div element is resized by the user. (In Firefox 4+, Chrome, and Safari)

CSS code is as follows:

Example

div { resize:both; overflow:auto; }
Try it yourself »

The following model gives the client a chance to resize just the overflow of a <div> element:

Example

div { resize:both; overflow:auto; }
Try it yourself »

The following precedent gives the client a chance to resize both the tallness and the width of a <div> element:

Example

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

CSS3 Outline Offset

outline-offset attribute offsets the outline and draws the outline beyond the edge of the border.

There are two differences between outline and border:

  • The outline does not take up space
  • The outline may be non-rectangular
This div has an outline 15 pixels outside the border.

CSS code is as follows:

Example

div { border:2px solid black; outline:2px solid red; outline-offset:15px; }
Try it yourself »