Loading lesson path

CSS•Advanced Styling

CSS User Interface

Concept visual

CSS User Interface

Graph traversalgraph

current

queued

Start from A

Overview

In this chapter you will learn about the following CSS user interface properties:

Formula

resize outline - offset

CSS Resize

The resize property specifies if (and how) an element can be resized by a user.

This property can have one of the following values: horizontal - user can resize the element horizontally (the width) vertical - user can resize the element vertically (the height) both - user can resize the element both vertically and horizontally none - user cannot resize the element You can resize this div element in a vertical way!

Formula

To resize: Click and drag at the bottom - right corner!
CSS Resize - Only Width
The following example lets the user resize only the width of a < div > element:

Example div

{
resize: horizontal;
overflow: auto;
}

Formula

CSS Resize - Only Height
The following example lets the user resize only the height of a < div > element:

Example div

{
resize: vertical;
overflow: auto;
}

Formula

CSS Resize - Both Width and Height
The following example lets the user resize both the width and height of a < div > element:

Example div

{
resize: both;
overflow: auto;
}

CSS Disable Resize in Textarea

Formula

A < textarea > is often resizable by default.
Here, we have used the resize property to disable the resizability in < textarea >:

Example textarea {
resize: none;
}

CSS Outline Offset

The outline-offset property adds a space between an outline and the edge/border of an element. The space between an element and its outline is transparent. The following example specifies an outline 15px outside the border edge: This paragraph has a black border and a red outline 15px outside the border edge.

Note:

Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is

NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

Formula

The following example uses the outline - offset property to add space between the border and the outline:

Example div.ex1 {
margin: 20px;

border:

1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}