Чтение онлайн

на главную - закладки

Жанры

CSS3 для веб-дизайнеров
Шрифт:

Полная запись перехода

Ниже приводится дополненное объявление перехода, в которое добавлены префиксы

– moz-
и 
– o-
, как и основное свойство
transition
. Как обычно, свойство без префикса ставится в самый конец, чтобы у него был наибольший вес, когда это свойство перейдет из состояния черновика в окончательную версию спецификации.

a.foo {

padding: 5px 10px;

background: #9c3;

– webkit-transition: background 0.3s ease;

– moz-transition: background 0.3s ease;

– o-transition: background 0.3s ease;

transition: background 0.3s ease;

}

a.foo: hover {

background: #690;

}

Такая запись позволяет получить сглаживание цвета фона в последних версиях Safari, Chrome и Opera, равно как и в более свежих версиях всех остальных браузеров, которые решат поддерживать переходы.

Состояния перехода

Я помню, что слегка запутался, когда в первый раз начал экспериментировать с переходами на CSS. Казалось, что было бы логичнее расположить объявление перехода в тот фрагмент кода, где определяется состояние

:hover
. Оказывается, что элемент может находиться и в других состояниях – не только в 
:hover 
– и наверняка захочется, чтобы переход происходил в каждом состоянии без дублирования кода.

Например, можно наложить переход на состояния

:focus
и 
:active
. Нам не придется добавлять объявление перехода в описание каждого свойства, так как параметры перехода указываются лишь один раз – для основного состояния элемента.

Следующий пример добавляет точно такое же переключение фона для состояния

:focus
.

Таким образом, переход произойдет либо от того, что на ссылку наведут курсор, либо от того, что на нее будет наведен фокус (например, клавиатурой).

a.foo {
 

padding: 5px 10px;

background: #9c3;

– webkit-transition: background 0.3s ease;

– moz-transition: background 0.3s ease;

– o-transition: background 0.3s ease;

transition: background 0.3s ease;

}

a.foo: hover,

a.foo: focus {

background: #690;

}

Переход нескольких свойств

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

Рис. 2.03. Обычное состояние ссылки и состояние: hover

a.foo {
 

padding: 5px 10px;

background: #9c3;

– webkit-transition: background.3s ease,
color 0.2s linear;

– moz-transition: background.3s ease,
color 0.2s linear;

– o-transition: background.3s ease, color 0.2s linear;

transition: background.3s ease, color 0.2s linear;

}

a.foo: hover,

a.foo: focus {

color: #030;

background: #690;

}

Переход всех возможных состояний

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

all
. Тогда переход будет наложен на все возможные свойства.

Заменим перечисление

background
и 
color
на значение
all
. Теперь эти переходы получат одинаковую продолжительность и временную функцию.

a.foo {
 

padding: 5px 10px;

background: #9c3;

– webkit-transition: all 0.3s ease;

– moz-transition: all 0.3s ease;

– o-transition: all 0.3s ease;

transition: all 0.3s ease;

}

a.foo: hover,

a.foo: focus {

color: #030;

background: #690;

}

Использование

all
 – удобный способ отследить все изменения, происходящие в состояниях
:hover
,
:focus
,
:active
, который избавляет от необходимости перечислять каждое свойство, нуждающееся в обозначении перехода.

К каким свойствам применим переход

Мы применили переход к свойствам background и color. Но есть много других свойств, на которые можно наложить переход, включая

width
,
opacity
,
position
и 
font-size
. Таблица всех свойств (и их типов значений) опубликована на сайте W3C [7] .

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

7

http://www.w3.org/tR/css3-transitions/#properties-from-css-

Поделиться:
Популярные книги

Феномен

Поселягин Владимир Геннадьевич
2. Уникум
Фантастика:
боевая фантастика
6.50
рейтинг книги
Феномен

Князь Андер Арес 2

Грехов Тимофей
2. Андер Арес
Фантастика:
рпг
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Князь Андер Арес 2

Лекарь

Первухин Андрей Евгеньевич
1. Лекарь
Фантастика:
фэнтези
попаданцы
альтернативная история
7.50
рейтинг книги
Лекарь

Кодекс Охотника. Книга XXXV

Винокуров Юрий
35. Кодекс Охотника
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Кодекс Охотника. Книга XXXV

Инженер Петра Великого 2

Гросов Виктор
2. Инженер Петра Великого
Фантастика:
попаданцы
альтернативная история
фэнтези
5.00
рейтинг книги
Инженер Петра Великого 2

Имперец. Том 1 и Том 2

Романов Михаил Яковлевич
1. Имперец
Фантастика:
попаданцы
альтернативная история
аниме
5.00
рейтинг книги
Имперец. Том 1 и Том 2

Сильнейший Столп Империи. Книга 5

Ермоленков Алексей
5. Сильнейший Столп Империи
Фантастика:
аниме
фэнтези
фантастика: прочее
попаданцы
5.00
рейтинг книги
Сильнейший Столп Империи. Книга 5

Бродяга 3

Первухин Андрей Евгеньевич
3. Бродяга
Фантастика:
фэнтези
попаданцы
5.00
рейтинг книги
Бродяга 3

КАМЕРГЕРСКИЙ ПЕРЕУЛОК

Орлов Владимир Викторович
Фантастика:
фэнтези
6.00
рейтинг книги
КАМЕРГЕРСКИЙ ПЕРЕУЛОК

Газлайтер. Том 9

Володин Григорий
9. История Телепата
Фантастика:
фэнтези
попаданцы
5.00
рейтинг книги
Газлайтер. Том 9

Перекресток судеб

Щепетнов Евгений Владимирович
6. Нед
Фантастика:
фэнтези
8.84
рейтинг книги
Перекресток судеб

Искатель 2

Шиленко Сергей
2. Валинор
Фантастика:
фэнтези
попаданцы
рпг
5.00
рейтинг книги
Искатель 2

Газлайтер. Том 23

Володин Григорий Григорьевич
23. История Телепата
Фантастика:
боевая фантастика
попаданцы
аниме
5.00
рейтинг книги
Газлайтер. Том 23

Кодекс Охотника. Книга IV

Винокуров Юрий
4. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Кодекс Охотника. Книга IV