В CSS3 добавлены весьма интересные свойства для преобразования элементов путем масштабирования, вращения, наклона и перемещения, а также возможность анимировать изменения от одного CSS-свойства к другому.
@keyframes Основой CSS-анимации является правило @keyframes. Оно позволяет дать анимации имя, которое затем можно будет применить к любому элементу страницы и создать набор ключевых кадров (keyframes). Например, чтобы постепенно превратить фон элемента из черного в белый, нужны два ключевых кадра: первый для CSS-установки цвета фона в черный, а второй — для его установки в белый. Ключевых кадров с различными CSS-свойствами может быть сколько угодно. Значения: правило @keyframes не похоже на любые другие свойства CSS, фактически это вообще не свойство. Оно названо правилом и намного сложнее обычного свойства. Ему нужно присвоить имя (которое позже будет использоваться для применения анимации к элементу на странице), а затем добавить набор фигурных скобок: { }. Внутри скобок находятся ключевые кадры, в качестве которых могут быть просто два ключевых слова from и to для обозначения первого и последнего ключевого кадра. Каждый ключевой кадр имеет свой набор фигурных скобок, внутри которого помещаются анимируемые CSS-свойства: background-color, font-size, позиция на странице и т. д.
Пример: @keyframes myAnimation { from { background-color: black; } to { background-color: white; } }
animation Это сокращенный метод применения анимации к элементу. Он является кратким способом включения следующих свойств в одно свойство: animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation-direction, animation-delay и animation-fill-mode. Все эти свойства рассматриваются на следующих страницах. Так как это свойство относится к CSS3, оно для многих браузеров требует применения префиксов производителей и не работает в Internet Explorer 9 и более ранних версиях. Значения: список значений, разделенных пробелами, в том числе свойства анимации, которые перечислены в предыдущем абзаце. Конкретные типы значений, предоставляемые каждому из свойств, будут рассмотрены в следующих статьях (animation-name, animation-duration) и т. д. Обязательными являются только два значения — animation-name и animation-duration. К одному и тому же элементу можно применить несколько именованных анимаций, предоставив список значений анимаций, с запятой в качестве разделителя.
Примеры: animation: myAnimation 2s; animation: myAnimation 2s ease-in 2 alternate 5s forwards; animation: fade-Out 2s ease-in-out 2 alternate 5s forwards, glow 5s;
animation-name Это свойство используется для назначения анимации, созданной с помощью правила @keyframes. Свойство добавляется в качестве части CSS-селектора, применяемого к одному или нескольким элементам страницы. Например, добавление этого свойства к стилю тега <h1> сообщит браузеру, что при загрузке страницы нужно запустить указанную анимацию в отношении всех тегов <h1>. Чтобы это сработало, необходимо также назначить свойство animation-duration. Это свойство не работает в Internet Explorer 9 и более ранних версиях. Значения: имя из правила @keyframes.
Пример: animation-name: myAnimation;.
animation-duration Определяет продолжительность анимации, указанной свойством animation-name. Значения: значение в секундах — 1s или в миллисекундах — 1000ms. Пример: animation-duration: 2s;.
animation-timing-function Задает скорость анимации в течение выделенного ей периода. Так, установив продолжительность перехода 5 секунд, можно также управлять тем, как проигрывается переход в течение этих 5 секунд, например медленный старт и быстрый финиш. Это свойство не работает в Internet Explorer 9 и более ранних версиях. Значения: одно из пяти ключевых слов: linear, ease, ease-in, ease-out и ease-in-out. Для пользовательской функции распределения по времени можно также применять значение кубической кривой Безье.
Примеры: animation-timing-function: ease-out; animation-timing-function: cubic-bezier(.20,.96,.74,.07);
animation-delay Определяет время задержки начала воспроизведения анимации в секундах или миллисекундах. Это свойство не работает в Internet Explorer 9 и более ранних версиях. Значения: значение в секундах — 1s или в миллисекундах — 1000ms. Пример: animation-delay: 1.5s;.
animation-iteration-count Определяет количество запусков анимации. Обычно анимация запускается один раз, а затем останавливается, но вы можете заставить анимацию запускаться 4, 5, 100 или бесконечное количество раз. Это свойство не работает в Internet Explorer 9 и более ранних версиях. Значения: положительное целое число или ключевое слово infinite. Примеры: animation-iteration-count: 5; animation-iteration-count: infinite;
animation-direction Когда анимация запускается более одного раза, это свойство указывает стартовую точку для каждой последующей анимации. Обычно браузер просто заново проигрывает анимацию от начальной стартовой точки снова и снова. Но можно также запустить анимацию вперед, а затем назад, затем опять вперед. Например, при наличии анимации, постепенно превращающей цвет фона из белого в черный, может потребоваться придать ей пульсирующий характер, заставив запускаться много раз и превращать белый цвет в черный, затем черный в белый, затем опять белый в черный и черный в белый и т. д. Это свойство не работает в Internet Explorer 9 и более ранних версиях. Значения: ключевое слово normal или alternate. Обычно браузер проигрывает анимацию в режиме normal, поэтому данное свойство нужно использовать только при потребности использования ключевого слова alternate.
Пример: animation-direction: alternate;.
animation-fill-mode Задает стилизацию анимируемого элемента в начале и (или) в конце анимации. Это свойство не работает в Internet Explorer 9 и более ранних версиях. Значения: одно из трех ключевых слов: backwards, forwards или both. Ключевое слово forwards применяется наиболее часто, поскольку оно оставляет элемент стилизованным так же, как в конце анимации, вместо возвращения к тому стилю, который был до начала анимации.
Пример: animation-fill-mode: backwards;.
animation-play-state Управляет проигрыванием анимации. Это свойство можно использовать с псевдоклассом:hover для приостановки анимации при прохождении указателя мыши посетителя над элементом. Свойство не работает в Internet Explorer 9 и более ранних версиях. Значения: одно из двух ключевых слов: pause или running. Ключевое слово pause приостанавливает анимацию, а running заставляет продолжить ее выполнение. По умолчанию используется ключевое слово running. Пример: animation-play-state: paused;.
transform Приводит к изменению элемента одним или несколькими способами, включая масштабирование, вращение, наклон или перемещение. Это свойство требует применения префиксов производителей и не работает в Internet Explorer 8 и более ранних версиях. Значения: ключевые слова rotate(), translate(), skew() или scale(). Каждое ключевое слово получает собственный тип значения. Например, rotate требует значения угла вращения — 180deg, translate требует такого показателя, как процент, em или пикселы, skew получает два угловых значения, а scale получает положительное или отрицательное число. К одному и тому же элементу можно применить более одного вида преобразования.
Примеры: transform: rotate(45deg); transform: scale(1.5); transform: skew(45deg 0); rotate(200deg); translate(100px, 0); scale(.5);
transform-origin Управляет точкой, в которой применяется преобразование. Например, обычно при вращении элемента за ось вращения берется центр элемента. Но его можно также вращать вокруг одного из его четырех углов. Это свойство не работает в Internet Explorer 8 и более ранних версиях. Значения: два значения, одно для горизонтальной координаты исходной точки, а другое — для вертикальной. Можно использовать те же ключевые слова и значения, что и для свойства background-position.
Примеры: transform-origin: left top; transform-origin: 0% 100%; transform-origin: 10px -100px;
transition Краткий метод определения свойств transition-property, transition-duration, transition-timing-function и transition-delay (рассматриваемых ниже). Свойство transition заставляет браузер анимировать изменения CSS-свойств элемента. Например, можно анимировать изменение фонового цвета кнопки навигации с красного на зеленый при проходе над ней указателя мыши посетителя. Это свойство не работает в Internet Explorer 9 и более ранних версиях. Значения: список свойств с пробелом в качестве разделителя, включающий свойства transition (необязательное, по умолчанию имеет значение all), transition-duration (обязательное), transition-timing-function (необязательное, по умолчанию имеет значение ease), transition-delay (необязательное, по умолчанию имеет значение 0).
Пример: transition: background-color 1.5s ease-in-out 500ms;.
transition-property Определяет конкретные CSS-свойства, подвергаемые анимированию при изменении CSS-свойств элемента. Это свойство не работает в Internet Explorer 9 и более ранних версиях. Значения: анимируемое CSS-свойство или ключевое слово all. Примеры: transition-property: width, left, background-color; transition-property: all;
transition-duration Определяет продолжительность анимации перехода. Значения: значение в секундах — 1s или в миллисекундах — 1000ms. Пример: animation-duration: 2s;.
transition-timing-function Задает скорость анимации перехода в течение определенного периода. Например, установив продолжительность перехода 5 секунд, можно также управлять тем, как проигрывается переход в течение этих 5 секунд, включив, допустим, медленный старт и быстрый финиш. Это свойство требует применения префиксов производителей и не работает в Internet Explorer 9 и более ранних версиях. Значения: одно из пяти ключевых слов: linear, ease, ease-in, ease-out или ease-in-out. Для пользовательской функции распределения по времени можно применять значение кубической кривой Безье. Примеры: transition-timing-function: ease-out; transition-timing-function: cubic-bezier(.20,.96,.74,.07);
transition-delay Определяет время задержки перед началом анимации перехода в секундах или миллисекундах. Это свойство не работает в Internet Explorer 9 и более ранних версиях. Значения: значение в секундах — 1s или в миллисекундах — 1000ms. Пример: transition-delay: 1.5s;.
Свойства таблицы
Существует несколько свойств CSS, которые относятся исключительно к таблицам HTML.
border-collapse Определяет, расширены границы вокруг ячеек таблицы или сжаты. Когда они расширены, браузеры добавляют пространство размером несколько пикселов между каждой ячейкой. Даже если вы уберете это пространство, установив значение 0 атрибуту cellspacing HTML-тега <table>, браузеры все еще будут отображать двойные границы. Таким образом, нижняя граница одной ячейки появится над верхней границей другой ячейки, расположенной ниже, что вызовет удвоение линий границ. Установка значения collapse свойства border-collapse устраняет и область между ячейками, и это удвоение границ. Свойство работает, только когда относится к тегу <table>.
Значения: collapse, separate. Пример: border-collapse: collapse;.
border-spacing Устанавливает расстояние между ячейками в таблице. Оно заменяет HTML-атри-бут cellspacing тега <table>. Однако InternetExplorer 7 и ниже не понимает свойство border-spacing, так что лучше продолжать использовать атрибут cellspacing в тегах <table> чтобы гарантировать пространство между ячейками во всех браузерах.
ПРИМЕЧАНИЕ. Если вы хотите удалить пространство, которое браузеры обычно вставляют между ячейками, просто установите значение collapse свойства border-collapse.
Значения: два CSS-значения длины. Первое устанавливает горизонтальное разделение (пространство с обеих сторон каждой ячейки), а второе — вертикальное (пространство, отделяющее основание одной ячейки от вершины другой ячейки, находящейся под первой). Пример: border-spacing: 0 10px;.
caption-side Когда свойство относится к заголовку таблицы, оно определяет, появится заголовок вверху или внизу таблицы. Поскольку, согласно правилам HTML, тег <caption> должен идти сразу за открывающим тегом <table> заголовок обычно возникает вверху таблицы. Значения: top, bottom. Пример: caption-side: bottom;.
ПРИМЕЧАНИЕ. К сожалению, это свойство не дает никакого эффекта в браузерах Internet Explorer 6 или 7 (в вер- сии 8 оно работает), так что безопаснее придерживаться эквивалентного HTML-кода: или.
empty-cells Определяет, как браузер должен отобразить ячейку таблицы, которая совершенно пуста. В HTML это выглядело бы следующим образом: <td></td>. Значение hide скрывает любую часть ячейки, вставляя пустое пространство, так что границы, фоновые цвета и изображения не показываются в пустой ячейке. Примените это свойство к стилю, форматирующему тег <table>.
Значения: show, hide. Пример: empty-cells: show;.
ПРИМЕЧАНИЕ. Свойство empty-cells не дает никакого эффекта в Internet Explorer 7 и более ранних версиях.
table-layout Управляет тем, как браузер чертит таблицу, и может немного влиять на скорость отображения страницы браузером. Установка значения fixed заставляет браузер привести все столбцы к той же ширине, что задана для столбцов из первой строки, из-за чего таблица чертится быстрее. Значение auto — стандартное, при котором «браузер делает свое дело», поэтому, если вы довольны тем, как быстро ваши таблицы появляются на странице, не беспокойтесь об этом свойстве. Если же вы используете его, то применяйте к стилю, форматирующему тег <table>. Значения: auto, fixed. Пример: table-layout: fixed;.
Различные свойства
CSS 2.1 предлагает некоторые дополнительные и иногда интересные свойства. Они позволяют улучшать веб-страницы, задавая специальное содержимое, различные указатели мыши, расширяют управление печатью страницы и т. д. К сожалению, не все браузеры одинаково правильно понимают эти свойства.
content Определяет текст, который появляется либо до, либо после элемента. Используйте это свойство с псевдоэлементами:after или:before. Вы можете добавить открывающую кавычку перед цитируемым материалом и закрывающую кавычку после него. Это свойство не поддерживается в Internet Explorer 6 и 7, так что его использование ограничено. Значения: текст в кавычках ("как этот"), ключевые слова normal, open-quote, close-quote, no-open-quote, no-close-quote. Примеры: p.advert:before {content: "And now a word from our sponsor…";} и a: after {content: "("attr(href)")";}.
ПРИМЕЧАНИЕ. Добавление текста таким способом (как пример с открывающими и закрывающими кавычками) называют генерируемым содержимым. Прочитайте простое объяснение этого феномена на сайте www.westciv.com/style_master/academy/css_tutorial/advanced/generated_content.html.
cursor Позволяет изменять вид указателя мыши, когда он передвигается над определенным элементом. Например, вы можете задать ему вид вопросительного знака, когда кто-то проводит указателем мыши над ссылкой, предоставляющей дополнительную информацию по какой-либо теме. Значения: auto, default, crosshair, pointer, move, e-resize, ne-resize, nw-resize, nresize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, progress. Вы также можете применять URL-значение, чтобы использовать для указателя собственное изображение (но прочтите примечание ниже). Указатель, который находится над ссылкой, выглядит как стрелка, так что, если хотите, чтобы какие-то элементы на странице показывали пользователю, что он может щелкнуть на них, добавьте к стилю объявление cursor: pointer. Пример: cursor: help; cursor: url(images/cursor.cur);.
ПРИМЕЧАНИЕ. Не все браузеры распознают значения URL для указателя. Для получения более полной информации зайдите на сайт www.quirksmode.org/css/cursor.html.
opacity Позволяет управлять прозрачностью любого элемента и всех его потомков. При этом через элемент могут просвечиваться находящиеся под ним цвета, изображения и содержимое. Учтите, что при применении свойства opacity к div-контейнеру тот же уровень прозрачности получат все содержащиеся в нем заголовки, изображения, абзацы и другие div-контейнеры. То есть, если для тега <div> установить значение свойства opacity, равное.5 (50 % прозрачность), изображение внутри этого тега так- же получит 50 %-ную прозрачность, даже если конкретно для него будет установлена прозрачность 1, она не отменит 50 %-ную прозрачность. Значения: десятичное значение от 0 до 1. Значение 0 означает невидимость, а значение 1 — полную непрозрачность. Пример: opacity:.5;.
orphans Определяет минимальное количество строк текста, которые можно оставить внизу распечатанной страницы. Предположим, вы печатаете страницу на лазерном принтере и пятистрочный абзац приходится на две страницы, причем всего одна строка находится внизу первой страницы, а четыре оставшиеся — на второй. Поскольку одна строка выглядит «висячей», вы можете указать браузеру разбить абзац, только если, скажем, по крайней мере три строки оставлены внизу распечатанной страницы (на момент написания книги только браузер Opera понимает это свойство). Значения: числа, например 1, 2, 3 или 5. Пример: orphans: 3;.
page-break-after Определяет, происходит ли разрыв страницы при печати после определенного элемента. С ним вы можете убедиться в том, что конкретный абзац всегда будет последним элементом, который появится на печатной странице. Значения: auto, always, avoid, left, right. Значение auto — стандартное, оно позволяет браузеру определять, когда и как разбивать содержимое на печатные страницы; always вынуждает элемент, который следует далее, появиться вверху отдельной печатной страницы, и это единственное значение, которое работает одинаково во всех браузерах; avoid предотвращает обрыв страницы после элемента; это отличный способ прикрепить заголовок к абзацу, который идет за ним, но, к сожалению, большинство браузеров не распознают его. Значения left и right определяют, появляется ли следующий элемент на лево- или правосторонней странице, что может заставить браузер напечатать дополнительную пустую страницу. Но, поскольку никакие браузеры не понимают эти значения, не волнуйтесь о напрасной трате бумаги. Браузеры обрабатывают значения left и right так же, как и always. Пример: page-break-after: always;.
page-break-before Работает так же, как и page-break-after, за исключением того, что разрыв страницы происходит перед стилизованным элементом. При этом элемент помещается наверх следующей печатной страницы. Вы можете использовать это свойство, чтобы убедиться в том, что каждый заголовок для различных разделов длинной веб-страницы появится вверху страницы. Значения: те же самые, что и для page-break-after. Пример: page-break-before: always;.
page-break-inside Препятствует тому, чтобы элемент был разбит на две печатные страницы. Если вы хотите держать фотографию и ее заголовок вместе на отдельной странице, укажите для них обоих один тег <div>, а затем примените к нему стиль со свойством pagebreak-inside (на момент написания книги только Opera понимает это свойство). Значения: avoid. Пример: page-break-inside: avoid;.
widows Противоположное свойству orphans, описанному выше. Оно определяет минимальное количество строк, которое должно появиться наверху печатной страницы. Скажем, принтер может поместить четыре из пяти строк абзаца внизу страницы и должен будет переместить последнюю строку наверх следующей страницы. Чтобы предотвратить появление таких «висячих» строк, используйте свойство widows, заставляющее браузер переместить по крайней мере две или три строки вместе наверх печатной страницы (только Opera понимает это свойство, поэтому оно ограничено в использовании). Значения: числа, например 1, 2, 3 или 5. Пример: widows: 3;.