CSS3 User Interface

It defines the features related to the user interface

User Interface related properties
- user-select
- resize
- box-sizing
- pointer-events
- scroll-behavior
- caret-color
- touch-action
- cursor

user-select

It specifies whether the text of an element can be selected

Values	Description
auto	Default. Text can be selected if browser allows it
none	The text can't be selected by the user
text	The text can be selected by the user
all	Text selection is made with one click

You can't select this text

div {
  -webkit-user-select: none; /*Chrome, Opera, Safari*/
  -moz-user-select: none; /*Firefox*/
  user-select: none; /*Standard syntax*/
}

user-select

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div {
  -webkit-user-select: none; /*Chrome, Opera, Safari*/
  -moz-user-select: none; /*Firefox*/
  user-select: none; /*Standard syntax*/
}
</style>
</head>
<body>
  <div style="text-align: center;">
    <h1>You can't select this text</h1>
  </div>
</body>
</html>

resize

It specifies whether an element is resizable or not by the user

Resize me !

You can now adjust both the height & width of the element

resize:

div {
  resize:both;
  overflow:auto;
  background-color: #f1f1f1;
}

resize

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div {
  resize:both;
  overflow:auto;
  text-align:center;
  background-color: #f1f1f1;
}
</style>
</head>
<body>
  <div>
    <h1>Resize me !</h1>
  </div>
</body>
</html>

box-sizing

It allows us to include the padding and border in an element's total width and height

Box !

Default value. Here, width and height properties includes only the content

box-sizing:

div {
  width: 230px;
  height: 100px;
  border: 20px solid #00ffac;
  box-sizing: content-box;
}

box-sizing

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div {
  width: 230px;
  height: 100px;
  border: 20px solid #00ffac;
  box-sizing: content-box;
  margin:auto;
  text-align:center;
}
</style>
</head>
<body>
  <div>
    <h1>Box !</h1>
  </div>
</body>
</html>

pointer-events

It specifies whether an element can become the target of mouse events (if any) or not

Mouse over on me !

Default value. (if any) Mouse event is their it will triggered by mouse

pointer-events:

h1 {
  pointer-events: auto;
  text-align:center;
}

pointer-events

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  pointer-events: auto;
  text-align:center;
}
</style>
</head>
<body>
  <h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
    Mouse over on me !
  </h1>
</body>
</html>

scroll-behavior

It specifies the behavior for a scrolling

Below example, change the values & click/try scroll links (S1, S2)

S1

S2

Scroll to : S1 S2

(Default) The scrolling box scrolls instantly

scroll-behavior:

div {
  border: 1px solid black;
  scroll-behavior: auto;
  text-align:center;
  height:120px;
  overflow:auto
}

scroll-behavior

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div {
  border: 1px solid black;
  scroll-behavior: auto;
  text-align:center;
  height:120px;
  overflow:auto;
}
h1{
  height:120px;
}
</style>
</head>
<body>
  <div>
      <h1 id="s1">S1</h1>
    <h1 id="s2">S2</h1>
  </div>
  Scroll to : 
  <a href="#s1"> S1</a>
  <a href="#s2">S2</a>
</body>
</html>

caret-color

It specifies the color of the visible input cursor

Try to input some value & see the input cursor color

caret-color:

input {
  caret-color: red;
  text-align:center;
}

caret-color

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
input {
  caret-color: red;
  text-align:center;
}
</style>
</head>
<body>
  <input type="text" placeholder="try to input">
</body>
</html>

touch-action

Used to restrict touch related controls

Example

touch-action: pan-x; /*To enable single-finger x-axis panning gestures*/

Values	Description
auto	(default) To enable browser handling of all panning and zooming gestures
none	To disable all touch related gestures
pan-x	To enable single-finger horizontal (x-axis) panning gestures
pan-y	To enable single-finger vertical (y-axis) panning gestures
manipulation	To enable panning and pinch-zoom gestures, but disable gestures such as double-tap to zoom
pinch-zoom	To enable multi-finger panning and zooming of the page, also can be used along with any of the pan- values

cursor

It specifies the type of cursor to be displayed when pointing on an element

#help {
  cursor:help;
}

Point on the below boxes and checkout your cursor Symbol

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:{cursor}

cursor:url('customCursorImage.png'),auto;

Media Query

"Learn to Explore..!"

TryOut Editor

User Interface