Статьи и справочные
материалы

Для всех, в чьей жизни неотъемлемо присутствуют таблицы стилей, скорое появление их третьей версии - долгожданный подарок.

CSS3 - следующий шаг в развитии каскадных таблиц стилей. Он много нам обещает и, судя по всему, действительно будет прорывом для веб-дизайна. Если, конечно, опять не подкачают разработчики браузеров. В этой заметке я приведу наиболее интересные новые свойства CSS3:

Прозрачность/Opacity

В браузерах, поддерживающих это свойство, указать прозрачность можно так:

background-color: rgb(0,0,255);
opacity: 0.5;

Такое обьявление прозрачности подействует на всех потомков элемента. В том числе на текст, картинки, бэкграунд и т.д. Это очень неудобно. В грядущей версии CSS вводится новое обьявление - RGBA, которое решает данную проблему:

background-color: rgba(0,0,255,0.5);

В данном случае только фон получит значение прозрачности 0.5.

Указание нескольких фоновых картинок/Multiple Backgrounds

Новая версия CSS позволяет добавлять элементам несколько фоновых картинок! Можно разместить изображения вверху, в центре, в углу и в других местах. Верстать сложные макеты станет намного проще.

Вот пример установки нескольких картинок для фона:

background:
   url(body-top.gif) top left no-repeat,
   url(banner_fresco.jpg)  top 11px no-repeat, 
   url(body-bottom.gif) bottom left no-repeat,
   url(body-middle.gif) left repeat-y;

Пользовательское изменение размера/Resize

Средствами новой версии CSS можно будет добавить немного интерактивности на ваш сайт - свойство resize позволит посетителю изменять размер элементов:

div.resize {
   width: 100px;
   height: 100px;
   resize: both;
   overflow: auto;
}

Закругленные углы/border-radius

С помощью этого свойства возможно будет делать закругленные углы у блоков. Отлично, неправда ли? Особенно если учесть, что допустимо указывать радиус закругления для каждого угла в отдельности.

#elem {
   border-top-left-radius: 1em;
   border-top-right-radius: 2em;
   border-bottom-right-radius: 3em;
   border-bottom-left-radius: 4em;
}

Границы могут быть не только идеально круглыми - можно указывать два радиуса кривизны:

border-radius: 55pt 25pt;

В результате получится что-то вроде изображенного на рисунке справа.

В настоящий момент для скругленных углов можно использовать объявление -moz-border-radius:1em;, но оно работает только в Gecko-браузерах.

Тень блока/box-shadow

Абсолютно новое свойство, позволяющее показать бокс с тенью. Его формат таков:

span {
   box-shadow: 0.2em 0.2em 5px #CCC;
}

Результат можно увидеть на картинке:

Кроме цвета, в объявление тени входят три параметра -

• 1) Горизонтальный сдвиг тени. Положительное значение - тень справа, отрицательное - слева.
• 2) Вертикальный сдвиг. Положительное значение - тень снизу, отрицательное - сверху.
• 3) Радиус размытия. Чем больше значение - тем больше размытие. Рекомендуемый алгоритм вычисления в спецификации не приводится.

Текст с тенью/text-shadow

Это свойство не совсем новое, оно присутствовало и в CSS2, однако поддерживают его пока только браузеры Opera 9.5, Safari 3, Konqueror и iCab. Если ИЕ8 и Firefox 3 не отстанут, применять Photoshop для того, чтобы сделать простую тень, станет не нужно.

Пример использования text-shadow:

color: #fff;
background-color: #fff;
text-shadow: 2px 2px 2px #000;

- Такое правило сделает белый текст, подобный показанному выше на картинке, на белом фоне, с тенью черного цвета и радиусом размытия 2px и с направлением вправо-вниз. Порядок аргументов аналогичен предыдущему пункту - "Тень блока/box-shadow".

Колоночная раскладка/multi-column layout

В традиционной модели блока содержимое элемента наполняет бокс содержимого соответствующего элемента. Мульти-колоночная раскладка дает нам новый тип контейнера между боксом содержимого и контентом, называемый "колончный бокс". Элемент, который состоит больше, чем из 1 колонки, называется многоколоночным. У таких элементов значения column-count и column-width отличные от авто. Все колонки такого блока одинаковой ширины, высоты и с одинаковым расстоянием между ними.

<style type="text/css">
div {
   column-width: 15em;
   column-gap: 2em; /* показано желтым */
   column-rule: 4px solid green;
   padding: 5px; /* показано синим */
}
</style>
<div>
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
def g hij
...
</div>

На рисуке представлено расстояние между колонками (column gaps) (желтый) и направляющие (column rules) (зеленый). Всему элементу назначен внутренний отступ 5px - показан синим. Не забывайте, что синий и желтый цвета использованы только для наглядности - на самом деле их не будет:

Анимация/Animation

Еще одна замечательная возможность третьей версии CSS - анимация. Здесь довольно много нюансов, поэтому начнем с самого начала.

Самый простой вид анимации - "transition", то бишь "переход". Суть его состоит в том, что можно заставить элемент, при смене какого-то css-свойства, меняться не мгновенно, а в соответствии с какой-то временной функцией. Интересно, не так ли?

"transitions" определяются следующими свойствами:

• • transition-property - Какое свойство элемента мы анимируем - например, "opacity".
• • transition-duration - Время, которое будет продолжаться анимация.
• • transition-timing-function - Функция от времени, определяющая типа изменения - например: liner, ease-in, и т.п.
• • transition - Возможна короткая запись трех предыдущих свойств.

Вот простой пример:

div {
   opacity: 1;
   -webkit-transition: opacity 1s linear;
}
div:hover {
   opacity: 0;
}

Каждое из этих свойств может принимать несколько значений, разделенных запятыми (наподобие описанного выше multiple backgrounds). Это позволяет описывать разные виды переходов для разных css-свойств в одном стилевом правиле. Значения соответствуют друг другу согласно порядку следования:

-webkit-transition-property: opacity, left;
-webkit-transition-duration: 2s, 4s;

- в этом правиле, степень прозрачности будет менятся две секунды, а отступ слева(left) - четыре.

Могут быть анимированы и некоторые сложные свойства. Возьмем для примера новое свойство -webkit-transform. Вот пример эффекта кручения с анимацией:

<div style="-webkit-transition: -webkit-transform 3s ease-in"
      onclick="this.style.webkitTransform='rotate(360deg)'">
При первом клике этот блок будет поворачиваться!
</div>

Границы блоков тоже можно анимировать. Следующий блок будет менять толщину и цвет границы при наведении мышкой.

Заметьте, что в примерах с наведением курсора анимация сама меняет "направление" когда курсор перемещается за пределы элемента. В любой момент, когда свойство меняет значение, анимация начинается с текущей позиции (также как с изначального значения) и целью становится новое значение. Для вычисления новой цели испольуется исходное значение свойства, указанного в transition-property.

Моменты, важные для понимания "переходов":

• • Transitions - это неявные анимации. Скрипты и остальные стили могут быть обычными, и анимирование будет происходить неявно во время смены значений у свойств.
• • Эти свойства абсолютно не критичны. Браузеры, не поддерживающие их, просто не покажут анимацию - остальной код и стили будет работать как обычно.

Вот более детальное описание данных свойств. Всем им можно писать значения списком через запятую.

transition-property

Значения: none | all | <property>
По умолчанию: all
Описание: Указывает какое css-свойство подвергается анимации. Если указано значение 'none' - анимации не будет. Значение 'all' значит, что каждое свойство будет анимировано, если такое возможно. В остальных случаях значением будет определенное css-свойство.

transition-duration

Значения: <time>
По умолчанию: 0
Описание: Определяет продолжительность (время) изменения значения свойства.

transition-timing-function

Значения: default | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
По умолчанию: default
Описание: Это свойство задает закон, по которому будет изменяться заданное свойство элемента.

Ключевые слова, которыми задается значение transition-timing-function, имеют такие определения:

• • linear - Линейная функция возвращает неизмененное полученное значение.
• • default - Функция по умолчанию эквивалентна cubic-bezier(0.25, 0.1, 0.25, 1.0)
• • ease-in - cubic-bezier(0.42, 0, 1.0, 1.0)
• • ease-out - cubic-bezier(0, 0, 0.58, 1.0)
• • ease-in-out - cubic-bezier(0.42, 0, 0.58, 1.0)
• • cubic-bezier - Задает кривую Безье третьего порядка с точками P0 и P3 в (0,0) и (1,1) соответственно. Четыре параметра задают координаты точек P1 и P2 в таком порядке: (x1, y1, x2, y2).

В одной из следующих статьей мы поговорим о явной анимации. А также разберем описанное выше более подробно.

Переменные в CSS

Еще одно нововведение, волной обсуждений прокатившееся по интернету, - переменные в стилях. Вы можете их обьявлять, используя следующий синтаксис:

@variables { keyColor: #f00; }

- А потом использовать где угодно в вашем CSS:

h1 { color: var(keyColor); }

Используя этот метод, вы сможете, например, определить все нужные цвета в начале файла:

@variables { firstcolor: #f00; secondcolor: #300; thirdcolor: #300; }

С одной стороны, переменные в CSS - большой шаг к увеличению возможностей. С другой же - порядочное усложнение языка. В любом случае - разработка CSS3 еще не завершена.

В обзоре использованы источники:
W3C Reports
www.css3.info
vibemanslim.com
virtuelvis.com
www.dave-woods.co.uk
Перевод 3hrek