CSS User Interface

CSS User Interface


CSS User Interface 
Here we will see two user interface properties  -

1. Resize

2. Outline-offset.

1. Resize - 
This property specifies if the element can be resized  by the user or not.
It has two values - 
i. Horizontal
ii. Vertical
Example - 

<!DOCTYPE html>
<html>
<head>
<style>
.one {
  resize: horizontal;
  padding: 23px;
  border: 3px solid ;
  width: 200px;
  overflow: auto;
}
.two {
  resize: vertical;
  padding: 23px;
  border: 3px solid ;
  width: 200px;
  overflow: auto;
}
</style>
</head>
<body>
<h1>horizontal resize</h1>
<div class="one">
<p>This is a pera here</p>
<p>This is a pera here</p>
<p>This is a pera here</p>
<p>This is a pera here</p>
</div>
<h1>vertical resize</h1>
<div class="two">
  <p>This is a pera here</p>
  <p>This is a pera here</p>
  <p>This is a pera here</p>
  <p>This is a pera here</p>
</div>

</body>
</html>

Output  -
2. Outline offset -
This property adds some space between the outline and the border.
Now we will see the example -
Example -
<!DOCTYPE html>
<html>
<head>
<style>
.one {
  border: 3px solid ;
  width: 200px;
  overflow: auto;
  margin: 10px;
  border: 1px solid black;
  outline: 5px dotted rgb(189, 10, 121);
  outline-offset: 12px;
}
.two {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed rgb(189, 10, 121);
  outline-offset: 15px;
  border: 3px solid ;
  width: 200px;
  overflow: auto;
}
</style>
</head>
<body>
<h1>one</h1>
<div class="one">
<p>This is a pera here</p>
<p>This is a pera here</p>
<p>This is a pera here</p>
<p>This is a pera here</p>
</div>
<h1>two</h1>
<div class="two">
  <p>This is a pera here</p>
  <p>This is a pera here</p>
  <p>This is a pera here</p>
  <p>This is a pera here</p>
</div>
</body>
</html>
Output -