Interfaccia utente CSS3
CSS3 ha nuove funzionalità dell'interfaccia utente, quali elementi di ridimensionamento, contorni, e scatola di dimensionamento.
In questo capitolo imparerete sulle seguenti proprietà di interfaccia utente:
-
resize -
outline-offset
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit- o -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| resize | 4.0 | Non supportato | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | Non supportato | 5.0 4.0 -moz- | 4.0 | 9.5 |
CSS3 ridimensionamento
Il resize proprietà specifica se un elemento deve essere ridimensionabile dall'utente.
L'esempio seguente consente all'utente di ridimensionare solo la larghezza di un <div> elemento:
L'esempio seguente consente all'utente di ridimensionare solo l'altezza di un <div> elemento:
L'esempio seguente consente all'utente di ridimensionare l'altezza e la larghezza di un <div> elemento:
CSS3 Outline Offset
Il outline-offset struttura aggiunge spazio tra un profilo e il bordo o il bordo di un elemento.
Lineamenti differiscono dai confini in tre modi:
- Un profilo è una linea tracciata attorno agli elementi, al di fuori del limite del bordo
- Un profilo non occupa spazio
- Un profilo può essere non rettangolare
L'esempio seguente utilizza la proprietà contorno-offset per aggiungere uno spazio 15px tra il bordo e il contorno:
Esempio
div
{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Prova tu stesso " CSS3 Proprietà interfaccia utente
Nella tabella seguente sono elencate tutte le proprietà di interfaccia utente:
| Proprietà | Descrizione |
|---|---|
| box-sizing | Consente di includere il padding e border in larghezza totale di un elemento e l'altezza |
| nav-down | Specifica dove navigare quando si utilizza il tasto di navigazione freccia verso il basso |
| nav-index | Specifica l'ordine di tabulazione per un elemento |
| nav-left | Specifica dove navigare quando si utilizza il tasto di navigazione freccia-sinistra |
| nav-right | Specifica dove navigare quando si utilizza il tasto di navigazione freccia a destra |
| nav-up | Specifica dove navigare quando si utilizza il tasto di navigazione freccia-up |
| outline-offset | Aggiunge spazio tra un profilo e il bordo o il bordo di un elemento |
| resize | Specifica se un elemento è ridimensionabile dall'utente |