Redimensionar a propriedade de CSS3

Entre as muitas inovações introduzida pela CSS3, o novo - e ainda não final - lançamento do Cascading Style Sheets, uma propriedade é particularmente interessante é redimensionar. Graças a esta propriedade, é fácil de ver, você pode criar, tão simples, elementos resizable nas nossas páginas de web usando uma linha de código CSS (até o advento do CSS3 criação de elementos necessários o uso de escalável complexas funções JavaScript).

Atualmente essa propriedade, bem como muitos outros de CSS3 não é universalmente suportado por todos os navegadores, mas apenas os da família WebKit (Safari e Chrome) e Firefox 4.

Se notar que alguns destes elementos navegadores página, como o <textarea> tag, são redimensionáveis ​​por padrão em altura e largura.

Redimensionar a gestão

Redimensionar a propriedade pode ter valores diferentes:

• = nenhum elemento não é redimensionável;
• Horizontal = o elemento pode ser redimensionada horizontalmente;
• = Elemento vertical podem ser redimensionadas verticalmente;
• both = elemento pode ser redimensionada verticalmente e horizontalmente;

Aqui estão alguns exemplo:

 / *







 Impede o redimensionamento da textarea







 * /







 textarea {redimensionar: none;}









 / *







 Eu crio um elemento redimensionável verticalmente







 * /







 div.vert {resize: vertical;}

Gerenciar o tamanho com o limite

O uso da propriedade redimensionar muitas vezes é acompanhada - por razões de design - com as restrições que determinam o mínimo e / ou máximo podemos supor que o elemento redimensionável. Para isso, utilizamos as seguintes propriedades CSS:

• max-width e max-height
• min-width e min-height

Vamos ver um exemplo de uma div redimensionável horizontalmente, com largura máxima fixa:

 {Div.horiz



  



 height: 200px;



  



 width: 300px;



  



 max-width: 600px;



  



 background: # EEEEEE;



  



 margem: 3px solid # dddddd;



  



 overflow: auto;



  



 redimensionar: horizontal;







 }

Em desta página você pode ver uma demonstração de trabalho (é claro, para ver a propriedade redimensionar o trabalho que você deve usar um navegador que suporta).