Interfaccia utente CSS
Interfaccia utente CSS
In questo capitolo imparerai le seguenti proprietà dell'interfaccia utente CSS:
resizeoutline-offset
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Ridimensionamento CSS
La resizeproprietà specifica se (e come) un elemento deve essere ridimensionabile dall'utente.
Questo elemento div è ridimensionabile dall'utente!
Per ridimensionare: fare clic e trascinare l'angolo inferiore destro di questo elemento div.
L'esempio seguente consente all'utente di ridimensionare solo la larghezza di un elemento <div>:
Esempio
div
{
resize: horizontal;
overflow: auto;
}
L'esempio seguente consente all'utente di ridimensionare solo l'altezza di un elemento <div>:
Esempio
div
{
resize: vertical;
overflow: auto;
}
L'esempio seguente consente all'utente di ridimensionare sia l'altezza che la larghezza di un elemento <div>:
Esempio
div
{
resize: both;
overflow: auto;
}
In molti browser, <textarea> è ridimensionabile per impostazione predefinita. Qui, abbiamo usato la proprietà di ridimensionamento per disabilitare il ridimensionamento:
Esempio
textarea {
resize: none;
}
Spostamento contorno CSS
La outline-offsetproprietà aggiunge spazio tra un contorno e il bordo o il bordo di un elemento.
Nota: il contorno è diverso dai bordi! A differenza del bordo, il contorno viene disegnato al di fuori del bordo dell'elemento e può sovrapporsi ad altri contenuti. Inoltre, il contorno NON fa parte delle dimensioni dell'elemento; la larghezza e l'altezza totali dell'elemento non sono influenzate dalla larghezza del contorno.
L'esempio seguente usa la outline-offsetproprietà per aggiungere spazio tra il bordo e il contorno:
Esempio
div.ex1 {
margin: 20px;
border:
1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
Proprietà dell'interfaccia utente CSS
La tabella seguente elenca tutte le proprietà dell'interfaccia utente:
| Property | Description |
|---|---|
| outline-offset | Adds space between an outline and the edge or border of an element |
| resize | Specifies whether or not an element is resizable by the user |