CSS User Interface (UI) Properties

CSS User Interface (UI) properties allow you to control the appearance and behavior of user interface elements on a webpage. These properties enhance user interactions by providing visual cues and ensuring a more intuitive and accessible interface.

Key CSS User Interface Properties

`cursor`: Specifies the type of cursor to be displayed when the mouse pointer is over an element.
`resize`: Defines if and how an element can be resized by the user.
`outline`: Draws a line around elements, outside the border edge, to make them stand out.
`outline-offset`: Sets the space between the outline and the border edge of an element.
`box-sizing`: Controls how the total width and height of an element are calculated.
`user-select`: Determines whether the user can select text within an element.

Examples of CSS UI Properties

Example: Custom Cursor


/* Custom Cursor Example */
.custom-cursor {
    cursor: pointer;
}

Hover over this area to see the custom cursor.

Example: Resizable Element


/* Resizable Element Example */
.resizable-box {
    width: 300px;
    height: 150px;
    padding: 10px;
    resize: both;
    overflow: auto;
    border: 1px solid #ccc;
}

You can resize this box by dragging its corners or edges.

Example: Outline with Offset


/* Outline with Offset Example */
.outline-box {
    outline: 2px solid red;
    outline-offset: 5px;
    padding: 10px;
    border: 1px solid #000;
}

This box has a red outline with an offset.

Example: Box-Sizing Property


/* Box-Sizing Property Example */
.box-sizing-example {
    width: 200px;
    padding: 20px;
    border: 10px solid #000;
    box-sizing: border-box;
}

This box uses `box-sizing: border-box;`, so its width includes padding and borders.

Example: User Select


/* User Select Example */
.user-select-none {
    user-select: none;
}

.user-select-text {
    user-select: text;
}

This text cannot be selected by the user.

This text can be selected by the user.

Explanation of CSS UI Properties

- `cursor: pointer;`: Changes the cursor to a pointer, typically used for clickable elements like buttons and links.
- `resize: both;`: Allows the element to be resized both horizontally and vertically by the user.
- `outline: 2px solid red;`: Adds a solid red outline around the element, making it stand out.
- `outline-offset: 5px;`: Offsets the outline by 5px from the element's border, creating a gap between the element and the outline.
- `box-sizing: border-box;`: Ensures the padding and border are included within the element's specified width and height.
- `user-select: none;`: Prevents the user from selecting the text within the element, useful for disabling text selection on buttons or images.