La proprietà resize CSS

Grazie a questa proprietà css è possibile ridimensionare un elemento html (div) con l'uso del mouse.

Un elemento html che è possibile ridimensionare di default è ad esempio la <textarea>

textarea

Prima di fare un esempio della proprietà resize è meglio precisare che questa è compatibile soltanto con i browser della famiglia webkit (Safari e Chrome) e da Firefox 4.

Consideriamo di avere questo div:

Codice HTML

 <div class="boxresize">Lorem Ipsum</div>

al quale applichiamo le proprietà css:

Codice CSS

 .boxresize
{ 
width:200px; 
height:200px; 
overflow:auto; 
text-align:center; 
border: 1px solid grey; 
resize:both; 
background-color:#D1EEEE; 
padding:10px; 
font-size:15px; 
}

per rendere questo contenitore ridimensionabile tramite il mouse basta applicare la proprietà resize:

Codice CSS

 .boxresize
{ 
..... 
..... 
resize:both; 
}

in particolare la proprietà resize può avere i seguento valori:

1. none: l'elemento non è ridimensionabile;
2. horizontal: l'elemento può essere ridimensionato solo orizzontalmente;
3. vertical: l'elemento può essere ridimensionato solo verticalmente;
4. both: l'elemento può essere ridimensionato sia verticalmente che orizzontalmente;

nel mio esempio ho usato il valore both, a volte per ragioni di design è richiesta un ridimensionamento massimo o minimo, in tal caso si usano le proprietà:

1. max-width e max-height
2. min-width e min-height

Questo è il risultato: