Interfaccia utente:Resizing (Ridimensionamento)
Questo tutorial molto interessante ci da alcuni dei nuovi modi per modificare
le caratteristiche di interfaccia utente in CSS3.
CSS3 porta con sé alcune grandi proprietà relative al nuovo ridimensionamento
In questo tutorial riportiamo tre esempi più significativi.
Ricordiamo che questi esempi possono essere applicati solo per le ultime versioni del browser
L'ultima versione di Safari ha una caratteristica che permette di creare aree di testo ridimensionabili.
.ui_resizable (
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
)
Box Sizing
La casella di dimensionamento permette di definire alcuni elementi
per adattare uno spazio in un certo modo. Ad esempio, se desideri delimitare due spazi una accanto
all'altra, può essere raggiunto attraverso la fissazione dei box-sizing a 'border-box'.
Questo costringe il browser a rendere la finestra con la larghezza e l'altezza specificata,
e posizionare il bordo e il padding all'interno dello spazio.
Ecco un esempio di base:
. area (
width: 300px;
border: 10px solid # ddccb5;
height: 60px;
)
.boxes (
box-sizing: border-box;
width:50%;
height: 60px;
text-align: centro;
border: 5px solid # 897048;
padding: 2px;
float:left;
)
Outline
La fissazione di un elemento di contorno è già disponibile in CSS2, ma in CSS3 include la possibilità di
compensare il contorno, di distanza dal elemento Si differenziano in due modi:
-
Contorni che non occupano spazio
- Contorni possono essere non-rettangolari
Esse possono essere create come segue:
. ui_outline (
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid # 897048;
outline-offset: 15px;
)
