CSS3 Интерфейс Пользователя

« Назад

CSS3 Интерфейс Пользователя

В CSS3 добавлены некоторые новые свойства пользовательского интерфейса: изменение размеров элементов, задание (определение) размеров контейнера и оконтуривание.

В этом уроке вы узнаете о следующих свойствах пользовательского интерфейса:

resize
box-sizing
outline-offset

Поддержка Браузерами

Свойство	Поддержка Браузерами
resize
box-sizing
outline-offset

Свойство resize поддерживается в Firefox 4+, Chrome и Safari.

box-sizing поддерживается в Internet Explorer, Chrome и Opera. Firefox требует приставки -moz-. Safari требует приставки -webkit-.

Свойство outline поддерживается всеми основными браузерами, кроме Internet Explorer.

CSS3 Изменение Размеров

В CSS3 свойство resize указывает, может ли пользователь изменять размер элемента.

Размер этого div элемента можно изменять (в Firefox 4+, Chrome и Safari).

CSS код следующий:

Пример

Указать, что размеры элемента div могут изменяться пользователем:

div
{
resize:both;
overflow:auto;
}

Попробуйте сами »

CSS3 Задание Размеров Контейнера

Свойство box-sizing позволяет вам задать специфическое поведение для элементов относительно того, как они будут занимать отведенную под них область:

Пример

Определить два контейнера с границами, расположенных бок о бок друг с другом:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Попробуйте сами »

CSS3 Смещение Контура

Свойство outline-offset сдвигает контур и рисует его на расстоянии от границы.

Контуры отличается от границ двумя моментами:

Контуры не занимают места
Контуры могут быть не прямоугольными

Этот div имеет контур на расстоянии 15px от края границы.

Код CSS будет такой:

Пример

Указать контур на расстоянии от границы в 15 пикселов:

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Попробуйте сами »

Новые Свойства Интерфейса Пользователя

Свойство	Описание	CSS
appearance	Позволяет вам заставить элемент выглядеть наподобие стандартного элемента пользовательского интерфейса	3
box-sizing	Позволяет вам уточнить, как определенные элементы будут занимать отведенное под них пространство	3
icon	Обеспечивает автору возможность показать элемент в виде пиктограммы (иконки)	3
nav-down	Указывает, куда переходить при использовании клавиши навигации стрелка-вниз	3
nav-index	Указывает порядок табуляции для элемента	3
nav-left	Указывает, куда переходить при использовании клавиши навигации стрелка-влево	3
nav-right	Указывает, куда переходить при использовании клавиши навигации стрелка-вправо	3
nav-up	Указывает, куда переходить при использовании клавиши навигации стрелка-вверх	3
outline-offset	Смещает контур и отображает его за пределами края границы	3
resize	Указывает, могут ли размеры элемента изменяться пользователем	3

« Назад

CSS3 Уроки

CSS3 Справочники

CSS3 Интерфейс Пользователя