WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 User Interface


CSS3 User Interface

CSS3 has new UI highlights, for example, resizing components, diagrams, and box sizing.

In this section you will find out about the accompanying UI properties:

  • resize
  • outline-offset

Browser Support

The numbers in the table determine the main program form that completely underpins the property.

Numbers pursued by - webkit-or - moz-determine the primary form that worked with a prefix.

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

The resize property indicates regardless of whether a component ought to be resizable by the user.

This div component is resizable by the client (works in Chrome, Firefox, Safari and Opera).

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

Example

div {
    resize: horizontal;
    flood: auto;
}
Try it yourself »

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

Example

div {
    resize: vertical;
    flood: 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 {
    resize: both;
    flood: auto;
}
Try it yourself »

CSS3 Outline Offset

The outline-offset property includes space between a blueprint and the edge or fringe of an element.

Outlines contrast from fringes in three ways:

  • An plot is a line drawn around components, outside the fringe edge
  • An plot does not take up space
  • An layout might be non-rectangular
This div has a diagram 15px outside the fringe edge.

The following model uses the framework counterbalance property to include a 15px space between the fringe and the outline:

Example

div {
    fringe: 1px strong black;
    layout: 1px strong blue;
    layout balance: 20px;
}
Try it yourself »