CSS3 User Interface
In CSS3 we have new user interface features like Resizing element, Box sizing and outlining.
List Of User Interface Properties
- resize
- box-sizing
- outline-offset
CSS3 Resizing
With resizing in CSS3 we can easily resize the element.
UI Resize
CSS
div {
resize: both;
overflow: auto;
}
resize: both;
overflow: auto;
}
CSS3 Box Sizing
With box-sizing property in CSS3 we can tell browser about what is the sizing property include (i.e: height, width).
They include border-box or the content-box which is default value of the width and height property.
UI box Sizing
CSS
div {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
width: 50%;
float: left;
}
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
width: 50%;
float: left;
}
CSS3 Outline Offset
With outline-offset property in CSS3 we can offset an outline, and also draw beyond the border edge.
Outline Offset differ in 2 ways,
- Outlines do not take up space
- Outlines may be non-rectangular
UI Outline
CSS
div {
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}
Full HTML & CSS Code
HTML & CSS
<!DOCTYPE html>
<html>
<head>
<style>
div.resize {
border: 2px solid;
padding: 10px 40px;
width: 300px;
resize: both;
overflow: auto;
}
div.container {
width: 30em;
border: 1em solid;
}
div.box
{
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box;
width: 50%;
border: 1em solid #1FA67A;
float: left;
}
div.outline {
margin: 20px;
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #1FA67A;
outline-offset: 15px;
}
</style>
</head>
<body>
<div class="resize">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<p><b>Note:</b> Internet Explorer and Opera do not support the resize property.</p>
<div class="container">
<div class="box">This is left half div.</div>
<div class="box">This is right half div.</div>
</div>
<div class="outline">This div has an outline border 15px outside the border edge.</div>
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
</body>
</html>
<html>
<head>
<style>
div.resize {
border: 2px solid;
padding: 10px 40px;
width: 300px;
resize: both;
overflow: auto;
}
div.container {
width: 30em;
border: 1em solid;
}
div.box
{
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box;
width: 50%;
border: 1em solid #1FA67A;
float: left;
}
div.outline {
margin: 20px;
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #1FA67A;
outline-offset: 15px;
}
</style>
</head>
<body>
<div class="resize">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<p><b>Note:</b> Internet Explorer and Opera do not support the resize property.</p>
<div class="container">
<div class="box">This is left half div.</div>
<div class="box">This is right half div.</div>
</div>
<div class="outline">This div has an outline border 15px outside the border edge.</div>
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
</body>
</html>
