CSS3 Offers for Interfacing is the section 12 and the final section of Basics of CSS3.
With CSS3 there comes advanced features to support creating user interfaces. Such as resizing elements, box sizing, and outlining. Look at the complete list it offers.
|appearance||Allows you to make an element look like a standard user interface element||3|
|box-sizing||Allows you to define certain elements to fit an area in a certain way||3|
|icon||Provides the author the ability to style an element with an iconic equivalent||3|
|nav-down||Specifies where to navigate when using the arrow-down navigation key||3|
|nav-index||Specifies the tabbing order for an element||3|
|nav-left||Specifies where to navigate when using the arrow-left navigation key||3|
|nav-right||Specifies where to navigate when using the arrow-right navigation key||3|
|nav-up||Specifies where to navigate when using the arrow-up navigation key||3|
|outline-offset||Offsets an outline, and draws it beyond the border edge||3|
|resize||Specifies whether or not an element is resizable by the user||3|
Let’s go through what are the important ones because some of them are still not supported by all the web browsers.
In CSS3, the resize property specifies whether or not an element should be resizable by the user. Before CSS3, this feature only applied for HTML text area element and it came by default. But now you can specify whether some element is resizable or not by the user. Look at the following division. You’ll see some mark in the bottom right corner. Click and drag it. You’ll see with your own eyes, what would happen.
Click and drag the bottom right marker in here
CSS3 Box Sizing
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include. Should they include the border-box or just the content-box which is the default value of the width and height properties. For example, if you want two bordered boxes side by side, it can be achieved through setting box-sizing to “border-box”. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.
Look at the following example. It specify two bordered boxes side by side.
This div occupies the left half.
This div occupies the right half.
CSS3 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
Look at the following example. What you see in red color is the outline and what you see in black color is the border.
This div has an outline border 20px outside the border edge.
border: 2px solid black;
outline: 2px solid red;
So this is all the basic information we have to give you in CSS3. We guess now you can build a cool web page using the tips and tricks we had given to you with all these 12 sections. We’ll come back with another amazing tutorial. So till then stay tuned… Keep in Touch!!