HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
In this chapter you will learn about the following CSS user interface properties
In this chapter you will learn about the following CSS user interface properties:
resize
outline-offset
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
The resize
property specifies if (and how) an element should be resizable by the user.
This div element is resizable by the user!
To resize: Click and drag the bottom right corner of this div element.
The following example lets the user resize only the width of a <div> element:
div
{
resize: horizontal;
overflow: auto;
}
The following example lets the user resize only the height of a <div> element:
div
{
resize: vertical;
overflow: auto;
}
The following example lets the user resize both the height and width of a <div> element:
div
{
resize: both;
overflow: auto;
}
In many browsers, <textarea> is resizable by default. Here, we have used the resize property to disable the resizability:
textarea {
resize: none;
}
The outline-offset
property adds space between an outline and the edge or
border of an element.
This div has an 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.
The following example uses the outline-offset
property to add space
between the border and the outline:
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;
}
The following table lists all the user interface properties:
Property | Description |
---|---|
outline-offset | Adds space between an outline and the edge or border of an element |
resize | Specifies whether or not an element is resizable by the user |