JMiur [E]

Quienes usan Chrome, ya lo veían pero, para quienes usan Firefox 4 es una novedad.

Seguramente habrán notado que los formularios como el de comentarios, poseen en la parte inferior derecha, un simbolito que nos permite cambiar el tamaño de ese formulario, arrastrando y soltando el puntero del ratón del mismo modo que usualmente redimensionamos cualquier otra cosa.

Esto, que es tan útil, no es otra cosa que la incorporación a los estilos por defecto que tienen ciertas etiquetas en estos navegadores, de una de las nuevas propiedades del CSS3 llamada resize que, si bien no está disponible en todos los navegadores, es más que interesante porque no está limitada a los formualrios sino que se la puede utilizar con otro tipo de etiqueta de bloque como un DIV siempre que esa etiqueta, además, posea una propiedad overflow, distinta de visible.

La propiedad resize puede tener uno de cuatro valores: none es el valor por defecto, both permite redimensionar en ambos sentidos y horizontal o vertical, sólo en uno de ellos.

Como las etiquetas TEXTAREA de los formularios tienen esa propeidad por defecto, si no quisieramos permitirlo, deberíamos indicarlo en una regla de estilo:
textarea { resize: none; }
Y por el contrario, si quisiéramos que otra etiqueta tuviera esa particularidad, deberíamos agregarla. Por ejemplo, estos tres DIVs tienen las mismas propiedades:
.demoresize {
  background-color: #000;
  border: 1px solid #333;
  color: #EEE;
  margin: 10px auto;
  overflow: hidden;
  padding: 10px;
  width: 175px;
  resize: VALOR;
}
y en cada uno de ellos, lo que varia es el valor de resize:

resize:both

Quisque tellus arcu, tempor nec feugiat suscipit, commodo id sapien. Donec quam risus, ultrices ut porttitor sit amet, dignissim pharetra urna.

resize:horizontal

Quisque tellus arcu, tempor nec feugiat suscipit, commodo id sapien. Donec quam risus, ultrices ut porttitor sit amet, dignissim pharetra urna.

resize:vertical

Quisque tellus arcu, tempor nec feugiat suscipit, commodo id sapien. Donec quam risus, ultrices ut porttitor sit amet, dignissim pharetra urna.

Como la altura no está definida, overflow:hidden; no tiene ningún efecto y sólo se agrega para usar resize pero, bien podría darle una altura y en ese caso, sería visible solo una parte y el resto, se desplegaría cuando un usuario lo deseara:

resize:both

Quisque tellus arcu, tempor nec feugiat suscipit, commodo id sapien. Donec quam risus, ultrices ut porttitor sit amet, dignissim pharetra urna.

La redimensión sólo tiene como límite los bordes del contenedor, en este caso, la redimensión horizontal está contenida por los bordes de la entrada en si misma pero, la vertical no tiene límites. Si quisiéramos dárselos, es decir, permitir que se redimensione sólo hasta cierto tamaño y no más, podríamos usar las porpiedades max-width y max-height, indicando en ellas, los valores corespondientes, lo mismo que los mínimos con las propiedades min-width y min-height:

max 300x300

Sed et egestas sapien? Donec interdum molestie eleifend. Donec lectus enim; posuere mollis consectetur et, lacinia vel enim. Nullam aliquet nisl non sapien mattis tristique! Praesent vulputate diam vitae justo commodo id feugiat urna dictum. Integer vitae eros ac orci rutrum accumsan at ac tellus. Donec id aliquet massa. Ut id dignissim leo. Aenean orci aliquam.

7 comentarios:

Unknown  

A mi me van a dar el premio la tonta del año -para no decir otra cosa-, pensé con el nuevo monitor veo esa cosa? encima ni me animé a pinchar ahí...muy bueno Jmiur, menos mal que usted está atento :D

Responder
Beben Koben  

I think this facility is mounted on the latest browse version!
btw great tut :)

Responder
Beben Koben  

you wrong write coded my bos
.demoresize sspan ;)

Responder
JMiur  

Pruebe, Graciela, no hay problema :D

Beben Koben:
Yes, it's a good tool.
Ready. The sspan was changed :D

Responder
Unknown  

Interesante, lo implementaré en estos días, con un max-width/max-height quedará bien :D

Responder
Anónimo  

¿Esto mismo podría aplicarse al formulario de comentarios de blogger?, estoy bastante interesado en quitarlo pero no puedo ni dandole preferencia al css. Solo me gustaría saber si es posible anularlo.

Responder
JMiur  

El formulario de comentarios es un IFRAME así que no puede ser modificado.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR