Redimensionarea proprietatea CSS3

Printre elementele de noutate introduse de mai multe fiind CSS3, noi - şi care nu sunt încă definitive - eliberarea de Cascading Style Sheets, o proprietate este deosebit de interesant este redimensionarea. Datorita acestei proprietati, este uşor pentru a vedea, aveţi posibilitatea să creaţi, atât de simplu, elemente redimensionabile în paginile noastre de web folosind o linie de cod CSS (pana la aparitia CSS3 elemente de creare a necesitat utilizarea a scalabile funcţii complexe JavaScript).

În prezent această proprietate, precum şi multe alte CSS3 nu este universal acceptat de toate browserele, dar numai cele ale familiei WebKit (Safari şi Chrome) si Firefox 4.

Trebui menţionat faptul că unele dintre aceste elemente paginii browsere, cum ar fi <textarea> tag-ul, sunt redimensionabile în mod implicit atât în ​​înălţime şi lăţime.

Gestionarea redimensiona

Redimensionarea proprietate poate avea valori diferite:

• Elementul = nici unul nu este redimensionabilă;
• Orizontal = element poate fi redimensionate doar orizontal;
• = Element vertical pot fi redimensionate doar vertical;
• atât = element poate fi redimensionată, atât pe verticală şi pe orizontală;

Iată câteva exemplu:

 / *







 Previne redimensionarea textarea







 * /







 textarea {redimensionare: none;}









 / *







 Am crea un element vertical redimensionabilă







 * /







 div.vert {redimensionare: vertical;}

Gestionaţi cu dimensiunea obligat

Utilizarea de redimensionare proprietate de foarte multe ori este însoţită - din motive de proiectare - la constrângerile care determină minime şi / sau maxime pot presupune că redimensionabilă element. Pentru a face acest lucru am utilizat urmatoarele proprietati CSS:

• max-lăţimea şi înălţimea max-
• min-lăţimea şi înălţimea min-

Să vedem un exemplu de div redimensionabilă orizontal cu lăţimea maximă fixă:

 {Div.horiz



  



 Inaltime: 200px;



  



 lăţime: 300px;



  



 max-width: 600px;



  



 background: # EEEEEE;



  



 frontieră: 3px solide # dddddd;



  



 overflow: auto;



  



 redimensionare: orizontal;







 }

Pe această pagină , puteţi vedea un demo de lucru (desigur, pentru a vedea proprietatea redimensiona de muncă trebuie să utilizaţi un browser care acceptă).