Articles
Introduzione al CSS
Proprietà CSS relative all'interfaccia utente

Proprietà CSS relative all'interfaccia utente

Questo articolo spiega le proprietà CSS relative all'interfaccia utente.

Puoi imparare le proprietà content, cursor, pointer-events e resize, incluso il loro utilizzo e come scriverle.

YouTube Video

HTML per Anteprima

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>

Relativo all'interfaccia utente

Proprietà content 

 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}

La proprietà content viene utilizzata per aggiungere contenuto ai pseudo-elementi, principalmente ::before o ::after. Questa proprietà viene utilizzata per definire testo, immagini, contatori, ecc., che non sono mostrati direttamente all'interno dell'elemento. Il suo ruolo principale è consentire il controllo dei contenuti decorativi o delle informazioni supplementari non scritte direttamente in HTML tramite fogli di stile.

In questo esempio, "Nota: " viene aggiunto prima dell'elemento e "(Fine)" viene aggiunto dopo. Questi utilizzano rispettivamente i pseudo-elementi ::before e ::after.

Valori della proprietà content 

 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;

La proprietà content può assumere i seguenti valori:.

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}
  • Testo
    • Puoi aggiungere del testo racchiudendo una stringa direttamente tra virgolette doppie ("").
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}
  • Immagine
    • Puoi inserire un'immagine usando la funzione url().
 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}
  • Contatore
    • Usa la funzione counter() per visualizzare un contatore.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • Attributo
    • La funzione attr() può essere utilizzata per visualizzare il valore di un attributo di un elemento HTML. Ad esempio, è possibile visualizzare l'attributo title.
1/* None */
2.content-none::before {
3    content: none;
4}
  • nessuno
    • Specifica che non deve essere visualizzato alcun contenuto. Questo è lo stato predefinito.

Note sull'utilizzo

Quando si utilizza la proprietà content, tenere a mente i seguenti punti:.

  • La proprietà content si applica solo ai pseudo-elementi, non agli elementi regolari.
  • Poiché non è aggiunto al DOM, non può essere manipolato direttamente con JavaScript.
  • Potrebbe influire sul layout, quindi viene comunemente utilizzato per mostrare informazioni decorative o supplementari.

Proprietà cursor

La proprietà cursor viene utilizzata per specificare il tipo di cursore da visualizzare quando il puntatore del mouse si trova sopra un elemento. Puoi specificare vari stili di cursori, ed è spesso applicato agli elementi interattivi per migliorare l'esperienza utente.

Tipi principali di cursori

I seguenti valori possono essere specificati come tipi di cursore:.

 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 è il cursore a forma di freccia normale (il cursore predefinito del browser).
pointer
  • pointer è un cursore a forma di mano visualizzato quando è posizionato su un link.
text
  • text è un cursore a forma di trave a I visualizzato nelle aree in cui è possibile selezionare testo.
move 
- `move` è un cursore a forma di croce utilizzato quando un elemento può essere trascinato.
crosshair
  • crosshair è un cursore a forma di mirino per una selezione precisa.
not-allowed
  • not-allowed è un cursore per indicare regioni o azioni non consentite.
help
  • help è un cursore con un punto interrogativo visualizzato quando è posizionato su elementi che possono fornire informazioni di aiuto.
wait
  • wait è un cursore a forma di clessidra o circolare che rappresenta uno stato di elaborazione.
progress
  • progress è un cursore che rappresenta un'operazione in corso. Tuttavia, indica che l'utente può eseguire altre operazioni.
grab
  • grab è un cursore per afferrare elementi trascinabili.
grabbing
  • grabbing è un cursore che indica che un elemento è in fase di trascinamento.
resize

resize è un cursore utilizzato quando una finestra o un elemento può essere ridimensionato. Esistono diversi tipi a seconda della direzione.

  • n-resize: Un cursore di ridimensionamento che punta verso l'alto.

  • s-resize: Un cursore di ridimensionamento che punta verso il basso.

  • e-resize: Un cursore di ridimensionamento che punta verso destra.

  • w-resize: Un cursore di ridimensionamento che punta verso sinistra.

  • ne-resize: Un cursore di ridimensionamento che punta verso l'alto a destra.

  • nw-resize: Un cursore di ridimensionamento che punta verso l'alto a sinistra.

  • se-resize: Un cursore di ridimensionamento che punta verso il basso a destra.

  • sw-resize: Un cursore di ridimensionamento che punta verso il basso a sinistra.

Cursore personalizzato 

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

È anche possibile specificare un cursore personalizzato usando url().

  • In questo esempio, custom-cursor.png è il file immagine per il cursore. Se quell'immagine non è disponibile, il cursore predefinito del browser viene mostrato con auto.

Riepilogo

  • La proprietà cursor specifica quale cursore deve essere mostrato quando l'utente è sopra un elemento.
  • Esistono vari stili di cursore disponibili a seconda dell'uso ed è possibile impostare cursori personalizzati.
  • Selezionando stili di cursore appropriati per elementi interattivi e operazioni limitate, è possibile fornire un'interfaccia utente più intuitiva.

Proprietà pointer-events 

 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}

La proprietà pointer-events viene utilizzata per controllare come un elemento gestisce gli eventi provenienti da dispositivi di puntamento come mouse, touch e penne digitali. Normalmente, quando un utente clicca o passa il mouse sopra un elemento, questo riceve eventi di puntamento, ma tale comportamento può essere modificato usando questa proprietà.

  • Nella classe pointer-events-auto, la proprietà pointer-events è impostata su auto, consentendo di processare normalmente eventi di clic e passaggio del mouse. L'elemento è cliccabile, quindi appare un messaggio quando viene cliccato.

  • Nella classe pointer-events-auto, la proprietà pointer-events è impostata su none, quindi l'elemento non riceve eventi di puntamento. Anche se la proprietà cursor è impostata su pointer, il cursore del mouse non cambia e gli altri elementi sottostanti diventano cliccabili.

Tipi di valori

  • La proprietà pointer-events specifica se e come un elemento riceve eventi di puntamento. Puoi specificare i seguenti valori.
auto
  • auto è il valore di default, in cui l'elemento riceve normalmente gli eventi pointer.
none
  • Quando viene specificato none, l'elemento non riceve eventi pointer. L'elemento disabilita interazioni come clic e passaggio del mouse, ma altri elementi sottostanti possono ricevere eventi pointer.
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;
  • Questi valori sono principalmente utilizzati per gli elementi SVG. Ogni valore controlla se parti specifiche di un elemento (come fill, stroke, ecc.) rispondono agli eventi pointer. Non viene comunemente utilizzato con elementi HTML standard.

Punti chiave per l'utilizzo

Ecco alcuni esempi di come utilizzare la proprietà pointer-events.

  1. Selezionare gli elementi che si desidera disabilitare

    • Il valore none è utile per disabilitare temporaneamente elementi come pulsanti o link.

  2. Utilizzo con elementi sovrapposti

    • Quando la proprietà position è impostata su absolute o gli elementi sono stratificati utilizzando la proprietà z-index, impostare pointer-events su none sull'elemento superiore consente agli eventi pointer di essere inviati all'elemento sottostante.

Proprietà resize 

 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}

La proprietà resize è una proprietà CSS che specifica in quale direzione un elemento può essere ridimensionato dall'utente. Utilizzando questa proprietà, è possibile consentire il ridimensionamento degli elementi verticalmente o orizzontalmente trascinandoli, oppure disabilitare completamente il ridimensionamento.

Tipi di valori

  • La proprietà resize specifica le direzioni in cui un elemento può essere ridimensionato. Puoi specificare i seguenti valori.
both
  • Specificare both consente all'elemento di essere ridimensionato sia in direzione verticale che orizzontale.
horizontal
  • Specificare horizontal consente all'elemento di essere ridimensionato solo in direzione orizzontale (larghezza).
vertical
  • Specificare vertical consente all'elemento di essere ridimensionato solo in direzione verticale (altezza).
none
  • Specificare none disabilita il ridimensionamento dell'elemento. Questo è il valore predefinito.
inherit
  • Specificare inherit fa sì che l'elemento erediti il valore della proprietà resize dal suo genitore.

Note

  • Per rendere un elemento ridimensionabile, è necessario impostare la proprietà overflow insieme alla proprietà resize. Gli elementi ridimensionabili possono necessitare di barre di scorrimento, e in genere si imposta overflow: auto.
  • Il ridimensionamento viene generalmente utilizzato con elementi di blocco come div e textarea.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative alle animazioni 3DProprietà CSS relative al float