Софкейз

И так, в первой части я уже вас познакомил со свойствами border-radius, text-shadow, box-shadow и множественными фонами. В этот раз я хочу познакомить вас с transition(анимация), resize, и background-size. Еще обещал рассказать про подключения сторонних шрифтов, но о них наверно позже (плюс прямого отношения к CSS3 они не имеют).

Resize

Это свойство позволяет пользователю динамически изменять размер элемента, к которому он применен. Например как по умолчанию textarea в Google Chrome. Свойство resize принимает один параметр, тип ресайза (hotizontal — горизонтальный, vertical — вертикальный, both — и тот и тот).

Так же для работы этого свойства нужно указывать overflow. Максимальный размер устанавливается используя max-width и max-height, а минимальный либо width и height, либо min-width и min-height. Это свойство поддерживается только в Safari и Google Chrome.

Background size

Свойство background-size позволяет задавать фиксированный размер фона. Принимает два значения, которые определяют размер фона (можно передавать одно, которое будет дублироваться). Принимает значения в пикселях, процентах и значение auto.

Как можно видеть картинка ужата по средствам свойства background-size. Это свойство не поддерживается только в Mozilla Firefox в данный момент.

Transition

Ну вот и самое вкусное, с появлением transition можно уже делать много анимационных вкусностей с элементами, не используя javascript. Синтаксис у свойства transition довольно простой:
transition: color 3s linear 4s;

Первое значение это свойство, к которому привязывается анимация, второе время выполнение, третий параметр это тайминг функция (о них немного ниже) и четвертый параметр это задержка. Нужно также не забывать что свойство transition множественное, т.е. через запятую можно указывать несколько правил для него, либо можно вместо первого параметра указать all, и тогда анимация будет применяться ко всем свойствам. В Mozilla Firefox могут быть проблемы с анимацией.

Для примера анимации — наведите на синий блок. Свойство transition имеет дочерние свойства transition-duration, transition-delay, transition-property и transition-timing-function. Теперь поговорим о тайминг функциях, их всего шесть: default, linear, ease-in, ease-out, ease-in-out и cubic-bezier. Эти тайминг функции говорят как будет вести себя анимация, например default в начале и в конце анимации замедляется, а linear всю анимацию выполняет на одинаковом интервале. Подробнее о тайминг-функциях можно почитать в спецификации CSS3 .