CodesJava

Easy learning with example program codes

CSS User Interface

Features like resizing elements, outlines, and box-sizing are a part of the user interface features facilitated by CSS. Some common properties of the CSS3 user interface are listed below.

ValuesUses
appearanceUsed to make elements as user interface elements.
box-sizingUsed to fix elements on area in clear way.
iconUsed to facilitate the icon on area.
resizeUsed to resize elements on area.
outline-offsetUsed to add space between the outline and the border of an element.
nav-downUsed while pressing the down arrow button on the keyboard to move down.
nav-leftUsed while pressing the left arrow button on the keyboard to move left.
nav-rightUsed while pressing the right arrow button on the keyboard to move right.
nav-upUsed while pressing the up arrow button on the keyboard to move up.

CSS3 Resize property:

CSS Resize and CSS Outline-offset are the two most important properties of the CSS user interface. To specify the resizing of an element, the CSS3 resize property is used. It can take either of the three values:

  • Horizontal resize
  • Vertical resize
  • Both (horizontal & vertical) resize.

Horizontal Resize:

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 10px; 
  width: 200px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>
<h1>Click and drag the bottom right corner of the below div element.</h1>
<div>
  <p>Hello World!!</p>
</div>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are resizing the width of the <div> element.

Vertical Resize:

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 5px solid red;
  padding: 10px; 
  width: 200px;
  resize: vertical;
  overflow: auto;
}
</style>
</head>
<body>
<p>Click and drag the bottom right corner of the below div element.</p>
<div>
  <p>Hello World!!</p>
</div>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are resizing the height of the <div> element.

Both horizontal & vertical resize:

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 5px solid red;
  padding: 10px; 
  width: 200px;
  resize: both;
  overflow: auto;
}
</style>
</head>
<body>
<p>Click and drag the bottom right corner of the below div element.</p>
<div>
  <p>Hello World!!</p>
</div>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are resizing both the width and the height of the <div> element.

CSS3 Outline Offset:

To add space between the outline and the border of an element, the CSS3 Outline Offset property is used.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
div.ex1 {
  margin: 20px;
  border: 2px solid red;
  outline: 5px solid yellow;
  outline-offset: 10px;
  text-align: center;
} 
 
div.ex2 {
  margin: 20px;
  border: 2px solid yellow;
  outline: 5px dashed red;
  outline-offset: 10px;
  text-align: center;
} 
</style>
</head>
<body>
<h1>Example:</h1>
<div class="ex1">Solid outline Solid border.</div>
<br>
<div class="ex2">Dashed outline Solid border.</div>
</body>
</html>

Output:

Explanation:

In the above example, we are adding space between the outline and the border of the <div> element.

Supporting Browsers:

PropertyChromeIEFirefoxOperaSafari
Resize4NA5.04.0 -moz-154
Outline-offset4NA5.04.0 -moz-9.54

 

Please follow and like us:
error
Posted in CSS   









Copyright © 2019 CodesJava DMCA.com Protection Status