CSS User Interface

The User Interface (UI) standard describes how people interact with information systems. User Interface (UI) is the layperson's word for the collection of screens, pages, buttons, forms, and other visual elements that are used to interact with the device. Every website and app has a user interface.

Any element can be converted into one of several common user interface elements using the user interface attribute.

We will talk about the following user interface property in this article:

resize
outline-offset

1. resize:

A box can be resized by the user using the resize property. Inline and block elements with visible overflow are exempt from this feature. The overflow setting in this property must be either "scroll," "auto," or "hidden."

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        border: 2px solid #00ab55;
        padding: 12px;
        width: 250px;
        resize: both;
        overflow: auto;
    }
</style>
</head>
<body>

<div class="box">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

</body>
</html>

Preview

2. outline-offset:

In CSS, the outline-offset property is used to specify the distance between an outline and an element's edge or border. The area between an element's outline and that element is transparent.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        border: 2px solid #ff4842;
        outline: 6px dashed #00ab55;
        outline-offset: 5px;
    }
</style>
</head>
<body>

<div class="ex1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>

Preview

CSS Multiple Columns

CSS Variables

CSS User Interface

1. resize:

Example

2. outline-offset:

Example

Links

Tutorials

Connect with us