User Interface in CSS3
Additional functionality of user interfaces is one of the most distinguishing features presented in CSS3. Some of the new user interface features introduced in CSS3 are resizing elements, box sizing, and outlining. First of all, a little about resizing elements is presented. This feature specifies whether or not an element should be resizable by the user while browsing the web page. Consider an example:
|
1 2 3 4 5 |
div { resize:both; overflow:auto; } |
As per the above code, the div element should be resizable by the user. The resizing property is not supported by Internal Explorer and Opera. All other browsers support it.
Second important feature is box-sizing. For example:
|
1 2 3 4 5 6 7 8 |
div { box-sizing:border-box; -moz-box-sizing:border-box; /* For Firefox */ -webkit-box-sizing:border-box; /* For Safari */ width:50%; float:left; } |
This specifies that two bordered boxes side by side be fit in the given area. This feature is supported by all the browsers.
Third important feature is outlining, also known as outline offset. The outline-offset property offsets an outline, and draws it beyond the border edge. The outlining property differs form the ‘boarders’ element in two ways: First, unlike boarders, outlines do not take up space. Second, outlines may be non-rectangular but ‘boarders’ can only have rectangular shape. Consider the following piece of code:
|
1 2 3 4 5 6 |
div { border:2px solid black; outline:2px solid red; outline-offset:15px; } |
The above code specifies an outline of 15px outside the border edge. Other noteworthy elements used in user interfacing are appearance, icon, nav-down, nav-index and resize etc. but the above three elements are the most powerful and widely used interfacing elements of CSS3. Given the attractiveness of an efficiently designed user interface, CSS3’s user interfacing feature gives it an upper hand over other versions when it comes to web designing.
BlueHost | HostGator | Media Temple
