Cambiar el tamaño de la propiedad de CSS3

Entre las muchas innovaciones que está introduciendo CSS3, el nuevo - y todavía no es final - la liberación de las Hojas de Estilo en Cascada, una propiedad es particularmente interesante es el tamaño. Gracias a esta propiedad, es fácil de ver, puede crear, de manera simple, los elementos de tamaño variable dentro de nuestras páginas web en una línea de código CSS (hasta la llegada de CSS3 elementos de la creación requiere el uso de escalabilidad complejas funciones de JavaScript).

Actualmente esta propiedad, así como muchos otros de CSS3 no es universalmente soportado por todos los navegadores, pero sólo los de la familia WebKit (Safari y Chrome) y Firefox 4.

Se observó que algunos de estos elementos de la página navegadores, tales como la <textarea> etiqueta, se puede cambiar el tamaño por defecto en altura y anchura.

Cambiar el tamaño de la gestión

Cambiar el tamaño de la propiedad pueden tener diferentes valores:

• elemento no = no se puede cambiar el tamaño;
• Horizontal = el elemento puede ser redimensionado sólo horizontalmente;
• = Elemento vertical, puede cambiar el tamaño vertical solamente;
• = tanto el elemento puede ser redimensionado, tanto vertical como horizontal;

Aquí hay algunos ejemplo:

 / *







 Impide el cambio de tamaño de área de texto







 * /







 textarea {tamaño: none;}









 / *







 Puedo crear un elemento puede cambiar el tamaño vertical







 * /







 div.vert {tamaño: vertical;}

Administrar el tamaño de obligado

El uso de la propiedad de cambiar el tamaño a menudo se acompaña - por razones de diseño - a las limitaciones que determine el mínimo y / o máximo se puede suponer que el elemento de tamaño variable. Para ello hemos utilizado las siguientes propiedades CSS:

• max-width y max-altura
• min-width y min-altura

Vamos a ver un ejemplo de un div horizontal de tamaño variable con un ancho máximo fijado:

 {Div.horiz



  



 height: 200px;



  



 width: 300px;



  



 max-width: 600px;



  



 fondo: # EEEEEE;



  



 frontera: 3px sólido # dddddd;



  



 overflow: auto;



  



 cambiar el tamaño: horizontal;







 }

En esta página se puede ver una demostración de trabajo (por supuesto, para ver el tamaño de la propiedad del trabajo que debe utilizar un navegador que lo soporta).