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>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</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:.

  • Testo: Specificare direttamente racchiudendo la stringa tra "". Aggiunge testo.
  • Immagine: Utilizzare la funzione url() per inserire immagini.
  • Contatore: Utilizzare la funzione counter() per visualizzare contatori.
  • Attributo: Utilizzare la funzione attr() per visualizzare i valori degli attributi degli elementi HTML. Ad esempio, è possibile visualizzare l'attributo title.
  • none: Specifica che non verrà visualizzato alcun contenuto. Questo è lo stato predefinito.

Note sull'utilizzo

  • 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.

Esempio 

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

Questo è un esempio di aggiunta di un'icona prima di un tag <p>. In questo modo, è possibile integrare visivamente il contenuto tramite i fogli di stile.

Proprietà cursor 

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

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:.

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`**: ridimensiona verso l'alto.
    - **`s-resize`**: ridimensiona verso il basso.
    - **`e-resize`**: ridimensiona verso destra.
    - **`w-resize`**: ridimensiona verso sinistra.
    - **`ne-resize`**: ridimensiona verso l'alto a destra.
    - **`nw-resize`**: ridimensiona verso l'alto a sinistra.
    - **`se-resize`**: ridimensiona verso il basso a destra.
    - **`sw-resize`**: ridimensiona 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.

In questo esempio, la direzione in cui una textarea può essere ridimensionata è specificata utilizzando la proprietà resize.

  • Con resize: both;, un elemento può essere ridimensionato sia orizzontalmente che verticalmente.
  • Con resize: horizontal;, un elemento può essere ridimensionato solo orizzontalmente.
  • Con resize: vertical;, un elemento può essere ridimensionato solo verticalmente.
  • Con resize: none;, un elemento non può essere ridimensionato.

Tipi di valori

  • Alla proprietà resize viene assegnato un valore che specifica la direzione in cui un elemento può essere ridimensionato. Puoi specificare i seguenti valori.
none
  • Specificare none disabilita il ridimensionamento dell'elemento. Questo è il valore predefinito.
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).
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 3D