In the previous chapter you learnt about CSS3 Transition Effects. Now in this chapter we will learn about CSS3 User Interface, Which allows the user some extra ability to work on the design.
CSS3 User Interface
CSS3 User Interface is not much popular features of CSS3. It is also not a milestone in designing that it shouldn't be avoided. But after all that if you want, you can manipulate these user interfaces to enhance the design skills.
Css3 has introduced mainly three types of user interface that has been described as follows:
✔ resize
✔ box-sizing
✔ outline-offset
The resize is a such property of User Interface, by which you can resize your div layout on your browser. Three features of resize you can use a) resize:both b) resize:vertical c) resize:horizontal.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#div_both
{
border:1px solid green;
margin-top:20px;
padding:15px 30px;
width:250px;
resize:both;
overflow:auto;
}
#div_horizontal
{
border:1px solid green;
margin-top:20px;
padding:15px 30px;
width:250px;
resize:horizontal;
overflow:auto;
}
#div_vertical
{
border:1px solid green;
margin-top:20px;
padding:15px 30px;
width:250px;
resize:vertical;
overflow:auto;
}
</style>
</head>
<body>
<div id="div_both">This div is stretchable from both corner (Horizontal & Vertical).</div>
<div id="div_horizontal">This div is stretchable from horizontal corner.</div>
<div id="div_vertical">This div is stretchable from vertical corner.</div>
</body>
</html>
The box-sizing is such a property which allows user to fit a box within the size of an element, the element size may vary but the box-sizing properties always fit the box within the given element width.
The default box-sizing is fit into the content-box. But we can change the specification of box-sizing with changing in box-width and box-height, as we can also modify our box-padding value. And finally It renders to the element to fix the box within given criteria.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#box_size
{
width:450px;
border: 8px solid red;
height: 45px;
}
#box_inner
{
box-sizing: border-box;
-o-box-sizing: border-box;
-icab-box-sizing: border-box;
-khtml-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width:50%;
height: 45px;
text-align: center;
border: 5px solid #6AAFCF;
padding: 3px;
float:left;
}
</style>
</head>
<body>
<div id="box_size">
<div id="box_inner">This div contains the left half.</div>
<div id="box_inner">This div contains the right half.</div>
</div>
</body>
</html>
The outline-offset is such property of the CSS3 User Interface, which can be used to define the space between the element's border and its outline.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#offsite_outline
{
margin:10px;
width:180px;
padding:15px;
height:80px;
border:1px solid red;
outline:1px solid green;
outline-offset:20px;
}
</style>
</head>
<body>
<div id="offsite_outline">
This div is containing the outline offset of 20 px.
</div>
</body>
</html>