CSS User Interface

CSS User Interface

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

• resize
• outline-offset

CSS Resizing

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.

Note: Internet Explorer does not support the resize property.

The following example lets the user resize only the width of a <div> element:

Example :

div {
    resize: horizontal;
    overflow: auto;}

Example :

div {
    resize: vertical;
    overflow: auto;}

Example :

div {
    resize: both;
    overflow: auto;}

Example :

textarea {
    resize: none;}

CSS Outline Offset

The outline-offset property adds space between an outline and the edge or border of an element.

Outlines differ from borders in three ways:

• An outline is a line drawn around elements, outside the border edge
• An outline does not take up space

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;}