Вторник, 11 Декабря 2012 17:23

Тянущийся блок на CSS

Written by 
Оцени эту запись
(1 Голос)

Это будет не статья, а скорее заметка. Речь пойдет о свойстве resize, присущему элементу textarea. Но мы применим его к обычному блоку div.

 

 

<textarea>Defaut Text</textarea>

 

 

 

Это стандартный тег textarea. У него внизу справа есть уголок, потянув за который область можно растягивать. Это благодаря свойству resize со значением auto. В этой статье(пункт 3) я уже писала о том, как можно использовать это свойство, задавая изменение размера только по горизонтали или вертикали в случае, когда ресайз может портить дизайн.

Сейчас мы поступим ровно наоборот - поставим resize: auto для блока:

 

<div style="resize: auto; overflow: hidden; width: 200px; height: 100px; border: 1px solid violet; background: lightblue;">Default Text</div>

 

 

Default Text

 

Как видим, у нашего блока тоже появился уголок, за который можно тянуть, изменяя размеры блока. 

 

 

Additional Info

Комментарии  

 
0 #2 Vit 22.08.2017 12:29
Подскажите можно ли изменить стиль уголка у DIV?
 
 
0 #1 Дмитрий 11.01.2015 15:14
В Мозилле 34 не работает почему-то.
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов