CSS3 User Interface

April 1, 2015
by Inaam Hussain

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

UI Resize

CSS
div {
    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

UI box Sizing

CSS
div {
    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,

  1. Outlines do not take up space
  2. Outlines may be non-rectangular
UI Outline

UI Outline

CSS
div {
    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>

 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

Leave a Comment