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.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

Leave a Comment