• CSS3 Уроки

• CSS3 Уроки
• CSS3 Введение
• CSS3 Границы
• CSS3 Фон
• CSS3 Текстовые Эффекты
• CSS3 Шрифты
• CSS3 2D Трансформации
• CSS3 3D Трансформации
• CSS3 Переходы
• CSS3 Анимация
• CSS3 Многоколоночная Верстка
• CSS3 Интерфейс Пользователя

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

• CSS3 Справочник
• CSS3 Единицы Измерения
• CSS3 Значения Цветов
• CSS3 Названия Цветов
• CSS3 HEX Значения Цветов

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

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

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

• 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 указывает, может ли пользователь изменять размер элемента.

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 сдвигает контур и рисует его на расстоянии от границы.

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

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

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

Пример Указать контур на расстоянии от границы в 15 пикселов: div { border:2px solid black; outline:2px solid red; outline-offset:15px; } Попробуйте сами »

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