Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

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 код следующий:

Opera Safari Chrome Firefox Internet Explorer

Пример

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

div
{
resize:both;
overflow:auto;
}

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


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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

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 будет такой:

Opera Safari Chrome Firefox Internet Explorer

Пример

Указать контур на расстоянии от границы в 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






« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru