CSS Properties Related to User Interface

Articles

This article explains CSS properties related to user interface.

You can learn about the content, cursor, pointer-events, and resize properties, including their use cases and how to write them.

YouTube Video

HTML for Preview

css-ui.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</html>

User Interface Related

`content` property

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

The content property is used to add content to pseudo-elements, mainly ::before or ::after. This property is used to define text, images, counters, etc., that are not directly displayed inside the element. Its main role is to allow control of decorative content or supplementary information not written directly in HTML through stylesheets.

In this example, "Note: " is added before the element, and "(End)" is added after. These use the pseudo-elements ::before and ::after respectively.

Values of the `content` property

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

The content property can take the following values:.

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}

Text
- You can add text by enclosing a string directly in double quotes ("").

1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}

Image
- You can insert an image using the url() function.

 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}

Counter
- Use the counter() function to display a counter.

1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}

Attribute
- The attr() function can be used to display the attribute value of an HTML element. For example, you can display the title attribute.

1/* None */
2.content-none::before {
3    content: none;
4}

none
- Specifies that no content should be displayed. This is the default state.

Usage Notes

When using the content property, keep the following points in mind:.

The content property applies only to pseudo-elements, not regular elements.
Since it is not added to the DOM, it cannot be directly manipulated with JavaScript.
It might affect layout, so it is commonly used for displaying decorative or supplementary information.

`cursor` Property

The cursor property is used to specify the type of cursor to be displayed when the mouse pointer is placed over an element. You can specify various cursor styles, and it's often applied to interactive elements to improve user experience.

Main Cursor Types

The following values can be specified as cursor types:.

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }

`default`

default is the normal arrow cursor (the browser's default cursor).

`pointer`

pointer is a hand-shaped cursor displayed when placed over a link.

`text`

text is an I-beam cursor displayed in areas where text can be selected.

`move`

- `move` is a cross-shaped cursor used when an element can be dragged.

`crosshair`

crosshair is a crosshair cursor for precise selection.

`not-allowed`

not-allowed is a cursor for regions or actions that are not allowed.

`help`

help is a cursor with a question mark displayed when placed over elements that can provide help information.

`wait`

wait is an hourglass or circular cursor representing a processing state.

`progress`

progress is a cursor representing an operation in progress. However, it indicates that the user can perform other operations.

`grab`

grab is a cursor for grabbing draggable elements.

`grabbing`

grabbing is a cursor indicating an element is being dragged.

`resize`

resize is a cursor used when a window or element can be resized. There are different types depending on the direction.

n-resize: A resize cursor pointing upward.
s-resize: A resize cursor pointing downward.
e-resize: A resize cursor pointing to the right.
w-resize: A resize cursor pointing to the left.
ne-resize: A resize cursor pointing to the upper right.
nw-resize: A resize cursor pointing to the upper left.
se-resize: A resize cursor pointing to the lower right.
sw-resize: A resize cursor pointing to the lower left.

Custom cursor

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

It is also possible to specify a custom cursor using url().

In this example, custom-cursor.png is the image file for the cursor. If that image is not available, the browser's default cursor is displayed with auto.

Summary

The cursor property specifies which cursor should be displayed when the user is over an element.
There are various cursor styles available depending on use, and custom cursors can also be set.
By selecting appropriate cursor styles according to interactive elements and restricted operations, a more user-friendly UI can be provided.

`pointer-events` property

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

The pointer-events property is used to control how an element handles events from pointer devices such as mouse, touch, and stylus. Normally, when an element is clicked or hovered over by a user, it receives pointer events, but this behavior can be changed using this property.

In the pointer-events-auto class, the pointer-events property is set to auto, allowing normal click and hover events to be processed. The element is clickable, so a message is displayed when it is clicked.
In the pointer-events-auto class, the pointer-events property is set to none, so the element does not receive pointer events. Even if the cursor property is set to pointer, the mouse cursor does not change, and other elements underneath become clickable.

Value types

The pointer-events property specifies whether and how an element receives pointer events. You can specify the following values.

`auto`

auto is the default value, where the element receives pointer events normally.

`none`

When none is specified, the element does not receive pointer events. The element disables interactions such as clicking and hovering, but other elements underneath can receive pointer events.

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;

These values are mainly used for SVG elements. Each value controls whether specific parts of an element (such as fill, stroke, etc.) respond to pointer events. It is not commonly used with regular HTML elements.

Key points for usage

Here are some examples of how to use the pointer-events property.

Selecting elements you want to disable
- The none value is useful for temporarily disabling elements like buttons or links.
Usage with overlaid elements
- When the position property is set to absolute or elements are layered using the z-index property, setting pointer-events to none on the top element allows pointer events to be sent to the element below.

`resize` property

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

The resize property is a CSS property that specifies in which direction an element can be resized by the user. By using this property, you can allow elements to be resized vertically or horizontally by dragging, or disable resizing entirely.

Value types

The resize property specifies the directions in which an element can be resized. You can specify the following values.

`both`

Specifying both allows the element to be resized in both vertical and horizontal directions.

`horizontal`

Specifying horizontal allows the element to be resized only in the horizontal direction (width).

`vertical`

Specifying vertical allows the element to be resized only in the vertical direction (height).

`none`

Specifying none disables resizing of the element. This is the default value.

`inherit`

Specifying inherit makes the element inherit the resize property value from its parent.

Notes

To make an element resizable, you need to set the overflow property along with the resize property. Resizable elements may require scrollbars, and overflow: auto is typically set.
Resizing is generally used with block elements such as div and textarea.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS Properties Related to 3D Animation

CSS Properties Related to User Interface

YouTube Video

HTML for Preview

User Interface Related

content property

Values of the content property

Usage Notes

cursor Property

Main Cursor Types

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

Custom cursor

Summary

pointer-events property

Value types

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

Key points for usage

resize property

Value types

both

horizontal

vertical

none

inherit

Notes

YouTube Video

`content` property

Values of the `content` property

`cursor` Property

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

`pointer-events` property

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

`resize` property

`both`

`horizontal`

`vertical`

`none`

`inherit`