CSS User Interface

    In this advanced CSS tutorial, we will be learning two CSS properties that are often used to create a good user Interface.

    CSS user Interface

    CSS is all about styling the skeleton HTML and make a good user interface. And in this article, we discuss the two prominent CSS properties.

    • resize
    • outline-offset

    CSS resize property

    The resize property creates a user resizable element box and lets the user resize the box according to his/her need. resize value:

    • none is the default value of resize for most of the elements, except <textarea>.
    • horizontal value specify that the element box can only be expended horizontally.
    • vertical specify that the element box can be expended vertically
    • both value specifies that the element box can be expended horizontally as well as vertically

    <Note> When setting the resize value make sure that you also set the overflow to auto, else the content of the element will leak out from the box. Example Create a <div> element with resize:horizontal value.

    <!DOCTYPE  html>
    <html>
    <head>
        <title></title>
        <style>
            .resizable{
                      border: 1px solid;
                      padding: 15px;
                      width: 200px;
                      resize: horizontal;
                      overflow: auto;
                     }
        </style>
    </head>
    <body>
        <div class="resizable">
              This is a horizontal resizable element, to resize this box drag the bottom right corner of it.
        </div>
    </body>
    </html>

    <Tip> For <textarea> element the default resize value is both, if you want to create a textares which does not resize, set the resize property to none. Example (set the text area box to none)

    <!DOTYPE  html>
    <html>
    <head>
        <title></title>
        <style>
            .fixed{
                resize: none;
                background-color: lightblue;
                }
        </style>
    </head>
    <body>
        <textarea>This is a resizable text area box</textarea>
        <br>
        <textarea class="fixed">This is a fixed text area box</textarea>
    </body>
    </html>

    CSS Outline Offset Property

    The outline-offset property specifies the gap or space between the outline and the border of an element. The outline looks like a border for the element but it is outside of the actual element border. And using the outline-offset property we can see the difference between the border and outline. The outline of an element may overlap the content or border of another property, because it is not a part of element dimensions that’s why the width and height of element does not affected by the outline. Example Create a <p> element with green border and red outline, and set the space between the border and outline.

    <!DOCTYPE  html>
    <html>
    <head>
        <title></title>
        <style>
            p{
                border:2px solid green;
                outline: 2px solid red;
                outline-offset: 4px;
            }
        </style>
    </head>
    <body>
        <p>This paragraph has green border and red outline and the space between the border and outline is 4px</p>
    </body>
    </html>

    CSS User Interface Summary

    • The resize property all the user to resize the element box
    • Textarea element default resize value is both.
    • The outline property resides outside of the element borders.
    • The outline-offset property set space between the border and outline of the element.

    People are also reading: