Resize ejendom CSS3

Blandt de mange innovationer, der er indført ved CSS3, de nye - og endnu ikke endelig - frigivelse af Cascading Style Sheets, er en egenskab særligt interessant, er størrelsen. Takket være denne ejendom, er det nemt at se, kan du oprette, så enkelt, ændre størrelse på elementer på vores web-sider ved hjælp af en linje CSS kode (indtil fremkomsten af ​​CSS3 skabe elementer, der kræves brug af skalérbare komplekse JavaScript-funktioner).

I øjeblikket denne ejendom, såvel som mange andre af CSS3 er ikke alment understøttes af alle browsere, men kun dem af familien WebKit (Safari og Chrome) og Firefox 4.

Bemærkes, at nogle af disse browsere sideelementer, såsom tag <textarea> er resizable som standard i både højde og bredde.

Adm. resize

Resize ejendommen kan have forskellige værdier:

• none = element er ikke ændre størrelse;
• Vandret = elementet kan skaleres horisontalt kun;
• = Lodret element kan skaleres lodret kun;
• både = elementet kan ændre størrelse både lodret og vandret;

Her er nogle tilfælde:

 / *







 Forhindrer ændring af størrelsen på textarea







 * /







 textarea {resize: none;}









 / *







 Jeg oprette en resizable element lodret







 * /







 div.vert {resize: Lodret;}

Administrer størrelsen med bundne

Brugen af ​​ejendommen resize meget ofte ledsages - af hensyn til design - til de begrænsninger, der bestemmer den mindste og / eller maksimum kan antage, at elementet kan ændre størrelse på. For at gøre dette har vi brugt følgende CSS egenskaber:

• max-bredde og max-højde
• min-bredde og min-højde

Lad os se et eksempel på en resizable div vandret med fast maksimal bredde:

 {Div.horiz



  



 højde: 200px;



  



 bredde: 300px;



  



 max-width: 600px;



  



 Baggrunden: # EEEEEE;



  



 kant: 3px solid # dddddd;



  



 overflow: auto;



  



 resize: vandret;







 }

På denne side kan du se en fungerende demo (selvfølgelig, for at se ejendommen ændre størrelsen på arbejde, du skal bruge en browser, der understøtter det).