Този път ще обърнем малко повече внимание на новите възможности за манипулация на потребителския интерфейс чрез CSS3. Но какво се има предвид под „потребителски интерфейс”?
CSS3 ни предоставя някои нови пропъртита за преоразмеряване на елементите, курсорите, външните линии, изгледа на блоковите елементи и т.н. Ще обърнем внимание на 3 от най – значимите нови пропъртита за работа с потребителския интерфейс.

Преоразмеряване

Предполагам сте виждали textarea(многоредов textbox). Може би сте обърнали внимание на диагоналните четички в долният десен ъгъл, които ви позволяват да променяте размера на textarea-та. Със сигурност сте попадали и на ситуации при които това чупи дизайна – започва да излиза извън него и т.н. CSS3 ни позволява първо да добавяме такова оразмеряване на всеки елемент, както и да ограничим начините на оразмеряване – само вертикално, само хоризонтално, и в двете посоки чрез пропъртито resize.

 .ui_resizable {
   padding: 20px;
   border: 1px solid;
   resize: both;
   overflow: auto;
 }
 

Преоразмеряем div.

Box-sizing

Дори и да не сте успели да разберете box модела до сега, CSS3 ни предлага ново пропърти – box-sizing, което ни позволява да променим поведението на browser-а и по – скоро начина по който се калкулира широчината на даден елемент. По подразбиране box-sizing е със стойност content-box. По този начин browser-a изчислява височината и широчината само според съдържанието. Border, margin, padding не се включват в зададената широчина. Стойността padding-box добавя padding-a към размерите на box-a. Тази стойност се поддържа само от Gecko. Тя беше част от по – ранните CSS3-UI спецификации, но по – късно беше прехвърлена за редактиране и в момента се счита за рискова и е възможно да се премахне. Border-box стойността включва padding и border към размерите, но не и margin. Това е моделът по който работи IE когато е в quirks mode.

Outline

Задаването на outline беше възможно още при CSS2, но при CSS3 имаме възможността да посочим изместването на outline-a от елемента. Различията между outline и border са главно 2 – outline-ите не заемат място и може да не са правоъгълници.

.ui_outline {
   width: 150px;
   padding: 10px;
   height: 70px;
   border: 2px solid black;
   outline: 2px solid #897048;
   outline-offset: 15px;
}