Предисловие 6
1. CSS3 сегодня 7
Не читайте спецификации 8
CSS3 – для всех 9
Целиться на взаимодействие 9
Когда применять CSS3 9
Главные свойства CSS3, применимые сейчас 11
border-radius 12
text-shadow 12
box-shadow 12
Несколько фоновых изображений 12
opacity 12
RGBA 13
Какие темы не будут затронуты 13
Префиксы конкретных браузеров 14
Как работают браузерные префиксы 15
Оптимальный порядок 15
Не пугайтесь браузерных префиксов! 16
А как насчет повторений? 17
2. Переходы в CSS 18
Хвост, который размахивает собакой 19
Что такое CSS-переходы 20
Простой пример 21
Временные функции (мне следовало быть внимательнее на уроках математики) 23
Задержка перехода 24
Краткая форма записи 25
Краткая форма записи перехода с задержкой 25
Поддержка в браузерах 26
Полная запись перехода 27
Состояния перехода 28
Переход нескольких свойств 29
Переход всех возможных состояний 30
К каким свойствам применим переход 31
Почему бы не воспользоваться JavaScript? 32
Используйте с умом 33
3. Hover по-новому 34
Наш пример 35
Сообщения в космосе и в вебе 35
Удивление и восторг 39
Должны ли сайты выглядеть полностью одинаково в каждом браузере? 41
Навигация на Луне 42
Сначала разметка 42
Сдвинем элементы 42
Определение цвета ссылки – RGBA 43
Запасной вариант для RGBA 44
Добавим text-shadow 44
Оформление состояний hover и focus 45
Скругление углов: border-radius 46
Добавим анимацию 47
Построение взаимодействия 48
Простой и гибкий hover с использованием opacity 49
Прозрачность на кликабельных картинках 49
Разметка 49
Прозрачность и эффективность картинки 50
Оформление списка 50
opacity: хак для IE 51
Добавим переход 52
Вперед, к новому hover 53
4. Преобразовывая содержимое 54
Масштабирование 55
Добавим стиль 57
Масштабирование в hover 57
Подходящая тень 58
Сгладим масштабирование переходом 59
Преобразовывая взаимодействие 61
Поворот, кручение, сдвиг 62
Добавим поворот 62
Нет поворота? Паника ни к чему 63
Повернутое Солнце 65
Кручение (skew) 66
Сдвиг (translate) 69
Разные преобразования, помогающие поддержать рассказ 71
Преобразования Луны 72
Поддержка сообщения 72
Разметка 73
Основные стили для каждого предмета 74
Общее правило 75
Масштабируем большой пончик 76
Перспектива: масштабирование и позиционирование 77
Ускользающая космическая кошка 78
Откидное кресло 78
Исчезающий гном 79
Безопасное упрощение 80
Еще раз: используйте с умом 81
Побольше «вау-вау», пожалуйста 81
5. Множественные фоны 83
Параллакс 84
Старый способ: дополнительная разметка 86
Новый способ: множественные фоны на CSS3 87
Синтаксис множественного фона 87
Поддержка в браузерах 88
Запасной вариант для всех браузеров 88
Использование множественных фонов 91
6. Улучшенные формы 92
Разметка для простой формы регистрации 94
Стили для полей и подписей 95
Больше CSS3-селекторов 97
Оформление полей ввода 98
Градиенты в CSS3 100
Настоящая кнопка на CSS3 104
Основные стили для кнопки 104
Скругление углов 105
Линейный градиент 106
text-shadow 107
Тень на кнопке 108
А как насчет других браузеров? 110
Использование box-shadow для создания состояния focus 111
Добавление CSS-анимаций для улучшения взаимодействия с формой 112
Ключевые кадры 112
Ссылки на keyframe 113
Повторное использование анимации для кнопки в состоянии hover 115
А как насчет остальных браузеров? 117
Сосредоточьтесь на взаимодействии 118
Заключение 119
А как насчет заказчиков и руководителей, которые не понимают этого? 120
Что дальше? 121
Дополнительные материалы и ресурсы 122
Об издательстве A Book Apart 123
Об авторе 124
