Friday, September 9, 2011

Advanced CSS3 Tutorial 12: User Interface


In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining.
The resize property is supported in Firefox 4+, Chrome, and Safari.
The box-sizing is supported in Internet Explorer, Chrome, and Opera. Firefox requires the prefix -moz-. Safari requires the prefix -webkit-.
The outline property is supported in all major browsers, except Internet Explorer.

In CSS3, the resize property specifies whether or not an element should be resizable by the user.

div
{
resize:both;
overflow:auto;
}

Box Sizing
The box-sizing property allows you to define certain elements to fit an area in a certain way:

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

Outline Offset
The outline-offset property offsets an outline, and draws it beyond the border edge.
Outlines differ from borders in two ways:
Outlines do not take up space
Outlines may be non-rectangular

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

1 comment: