CSS User Interface

By | October 3, 2021

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.

Vamware
  • 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 resizefor 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:

Leave a Reply

Your email address will not be published. Required fields are marked *