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>

    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.
    Previous Tutorial Next Tutorial