User Interface ng CSS

User Interface ng CSS

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

  • resize
  • outline-offset

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Atributo Chrome IE Firefox Safari Opera
resize 4.0 Not supported 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Resizing

resize The attribute specifies whether the element should (and how) be resized by the user.

This div element can be resized by the user!

Resize: click and drag the bottom right corner of this div element.

Note:Internet Explorer does not support the resize attribute.

The following example only allows users to adjust the width of the <div> element:

Example

div {
  resize: horizontal;
  overflow: auto;
}

Subukan ang Mga sarili

The following example only allows users to adjust the height of the <div> element:

Example

div {
  resize: vertical;
  overflow: auto;
}

Subukan ang Mga sarili

The following example allows users to adjust the height and width of the <div> element:

Example

div {
  resize: both;
  overflow: auto;
}

Subukan ang Mga sarili

In many browsers, <textarea> is default adjustable. Here, we use the resize attribute to disable this scalability:

Example

textarea {
  resize: none;
}

Subukan ang Mga sarili

CSS Outline Offset

outline-offset The attribute adds space between the outline and the element's edge border.

This div has a 15px outline outside the border edge.

Note:The outline is different from the border! Unlike the border, the outline line is drawn outside the element's border and may overlap with other content. At the same time, the outline is not part of the element's size: the total width and height of the element are not affected by the width of the outline line.

The following example uses the outline-offset attribute 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;
}

Subukan ang Mga sarili

Atributo ng User Interface ng CSS

Ang sumusunod na talahanan ay naglilista ng lahat ng mga atributo ng user interface:

Atributo Paglalarawan
outline-offset Magdagdag ng espasyo sa pagitan ng outline at ng gilid ng border ng elemento.
resize Ipinapaliwanag kung ang elemento ay pwedeng ayusin ng gumagamit.