Ändern Sie die Eigenschaft von CSS3

Unter den vielen Innovationen, die von CSS3, die neue eingeführt - und noch nicht rechtskräftig - Veröffentlichung der Cascading Style Sheets, ist eine Eigenschaft besonders interessant ist die Größe. Dank dieser Eigenschaft ist es leicht zu sehen, die Sie erstellen können, so einfach, resizable Elemente innerhalb unserer Web-Seiten mit einer Zeile CSS-Code (bis zum Aufkommen der CSS3 Erstellen von Elementen erforderte den Einsatz von skalierbaren komplexe JavaScript-Funktionen).

Derzeit dieser Eigenschaft, ebenso wie viele andere von CSS3 ist nicht allgemein von allen Browsern unterstützt, sondern nur die der Familie WebKit (Safari und Chrome) und Firefox 4.

Festgestellt, dass einige dieser Browser Seite Elemente, wie der Tag <textarea>, resizable standardmäßig in Höhe und Breite sind.

Managing resize

Ändern Sie die Eigenschaft kann verschiedene Werte haben:

• none = Element ist nicht veränderbar;
• Horizontal = das Element kann nur horizontal skaliert werden;
• = Vertikale Element kann nur vertikal skaliert werden;
• beide = das Element kann sowohl vertikal als auch horizontal skaliert werden kann;

Hier sind einige Beispiele:

 / *







 Verhindert Größenänderung textarea







 * /







 textarea {resize: none;}









 / *







 Erstelle ich eine resizable Element vertikal







 * /







 div.vert {resize: vertikal;}

Verwalten der Größe mit gebundenem

Die Nutzung der Immobilie Größe sehr oft begleitet wird - aus Gründen des Designs - die Einschränkungen, dass die Mindest-und / oder Maximum bestimmen kann davon ausgehen, dass das Element der Größe veränderbar. Dazu haben wir die folgenden CSS-Eigenschaften:

• max-width und max-height
• min-width und min-height

Mal sehen, ein Beispiel für eine resizable div horizontal mit fester maximale Breite:

 {Div.horiz



  



 height: 200px;



  



 width: 300px;



  



 max-width: 600px;



  



 background: # EEEEEE;



  



 border: 3px solid # dddddd;



  



 overflow: auto;



  



 Größe: horizontal;







 }

Auf dieser Seite sehen Sie eine funktionsfähige Demo (natürlich, um zu sehen das Eigentum Größe der Arbeit, die Sie einen Browser, der es unterstützt die Verwendung muss).