Книга: CSS3 для веб-дизайнеров
Простой пример
Простой пример
Начнем с простого примера: наложим переход на изменение фона ссылки. Когда пользователь будет наводить на ссылку, цвет ее фона будет меняться, и мы применим переход, чтобы сделать это изменение плавным. Такого эффекта раньше можно было добиться исключительно средствами Flash или JavaScript, но теперь его можно сделать, написав лишь несколько строчек на CSS.
Разметка состоит исключительно из одной ссылки:
<a href="#» me!</a>
Теперь мы объявим неактивное состояние ссылки с небольшим отступом и светло-зеленым фоном и затем укажем темно-зеленый цвет при наведении (рис. 2.01):
a.foo {
padding: 5px 10px;
background: #9c3;
}
a.foo: hover {
background: #690;
}
Рис. 2.01. Обычное состояние ссылки и: hover
Теперь наложим переход на это изменение. Переход сгладит и анимирует изменение в течение указанного промежутка времени (рис. 2.02).
Рис. 2.02. Печатная страница – не лучший способ показать анимированный переход, но на этой картинке попытались сделать именно это: плавный переход от светло– зеленого к темно-зеленому фону
Ради компактности будем использовать только те браузерные префиксы, которые сейчас работают в браузерах на движке WebKit (это Safari и Chrome). Позже добавим префиксы для Firefox и Opera.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: background;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
a.foo: hover {
background: #690;
}
В этом коде можно увидеть три составляющих перехода:
• transition-property
– свойство, на которое будет накладываться переход (в этом случае – свойство background);
• transition-duration
– продолжительность перехода (0,3 с);
• transition-timing-function
– как быстро переход осуществляется с течением времени (ease).
- Хвост, который размахивает собакой
- Что такое CSS-переходы
- Простой пример
- Временные функции (мне следовало быть внимательнее на уроках математики)
- Задержка перехода
- Краткая форма записи
- Поддержка в браузерах
- Полная запись перехода
- Состояния перехода
- Переход нескольких свойств
- Переход всех возможных состояний
- К каким свойствам применим переход
- Почему бы не воспользоваться JavaScript?
- Используйте с умом
- СТРУКТУРА ПРОСТОЙ ПРОГРАММЫ
- ПРИМЕР ПРОСТОЙ ПРОГРАММЫ НА ЯЗЫКЕ СИ
- 1.2.5. Пример программы
- 19.5.1. Простой пример
- Комментарии к примеру простой системы "производитель
- Пример 25-1. Простой массив
- Простой пример использования сигнала SIGURG
- Простой пример использования функции select
- Простой пример, иллюстрирующий применение модели XML DOM и однонаправленного чтения-записи XML-документов
- Простой пример с текстом
- Листинг 14.1. Простой пример создания и использования объекта ADO.NET DataSet
- 5.3.1. Учебный пример: SMTP, простой протокол передачи почты