Обзор нового в CSS3

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

CSS3 лого 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;
}
Два радиуса кривизны в CSS3

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

border-radius: 55pt 25pt;

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

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

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

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

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

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

Тень - новое свойство CSS

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

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

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

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

Text shadow в CSS3

Пример использования 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 - показан синим. Не забывайте, что синий и желтый цвета использованы только для наглядности - на самом деле их не будет:

Колонки в CSS3

Анимация/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 еще не завершена.

Теги: 

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <i> <strong> <b> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
CAPTCHA на основе изображений
Введите код с картинки