Zmień rozmiar własności CSS3

Wśród wielu innowacji wprowadzanych przez CSS3, nowy - i nie jest jeszcze ostateczna - uwolnienie Cascading Style Sheets, właściwość jest szczególnie interesująca jest zmiana rozmiaru. Dzięki tej właściwości, to łatwo zauważyć, można utworzyć, tak proste, resizable elementy na naszych stronach za pomocą jednej linii kodu CSS (aż do pojawienia się CSS3 elementów tworzenia wymagały użycia skalowalne złożonych funkcji JavaScript).

Obecnie jest to nieruchomość, jak również wielu innych CSS3 nie jest powszechnie obsługiwany przez wszystkie przeglądarki, ale tylko te rodziny, WebKit (Safari i Chrome) i Firefox 4.

Należy zauważyć, że niektóre z tych przeglądarek elementów strony, takich jak <textarea> tag, są resizable domyślnie w wysokości i szerokości.

Rozmiar Zarządzanie

Zmień rozmiar własności mogą mieć różne wartości:

• element = żaden nie jest resizable;
• Pozioma = elementu można zmieniać wyłącznie poziomo;
• = Pionowy element może być zmieniany tylko w pionie;
• zarówno = element może być zmieniany w pionie iw poziomie;

Oto przykład:

 / *







 Zapobiega zmiana rozmiaru textarea







 * /







 textarea {rozmiar: none;}









 / *







 Utworzyć resizable elementu w pionie







 * /







 div.vert {rozmiar: pionowa;}

Zarządzanie wielkości związane z

Korzystanie z rozmiaru nieruchomości bardzo często towarzyszy - ze względu na design - do ograniczeń, które określają minimalną i / lub maksymalną można zakładać, że resizable element. W tym celu wykorzystano następujące właściwości CSS:

• max-width i max-height
• min-width i min-height

Zobaczmy przykład resizable div poziomo ze stałą maksymalną szerokość:

 {Div.horiz



  



 height: 200px;



  



 width: 300px;



  



 max-width: 600px;



  



 background: # EEEEEE;



  



 obramowania: 3px solid # dddddd;



  



 overflow: auto;



  



 rozmiar: poziome;







 }

Na tej stronie można zobaczyć demo pracy (oczywiście, żeby zobaczyć nieruchomości zmienić rozmiar, należy używać przeglądarki, która obsługuje).