CSS3 для веб-дизайнеров

Оглавление

Дэн Сидерхолм. CSS3 для веб-дизайнеров

Предисловие

1. CSS3 сегодня

Не читайте спецификации

CSS3 – для всех

Целиться на взаимодействие

Когда применять CSS3

Главные свойства CSS3, применимые сейчас

border-radius

text-shadow

box-shadow

Несколько фоновых изображений

opacity

RGBA

Какие темы не будут затронуты

Префиксы конкретных браузеров

Как работают браузерные префиксы

Оптимальный порядок

Не пугайтесь браузерных префиксов!

А как насчет повторений?

2. Переходы в CSS

Хвост, который размахивает собакой

Что такое CSS-переходы

Простой пример

Временные функции (мне следовало быть внимательнее на уроках математики)

Задержка перехода

Краткая форма записи

Краткая форма записи перехода с задержкой

Поддержка в браузерах

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

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

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

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

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

Почему бы не воспользоваться JavaScript?

Используйте с умом

3. Hover по-новому

Наш пример

Сообщения в космосе и в вебе

Удивление и восторг

Должны ли сайты выглядеть полностью одинаково в каждом браузере?

Навигация на Луне

Сначала разметка

Сдвинем элементы

Определение цвета ссылки – RGBA

Запасной вариант для RGBA

Добавим text-shadow

Оформление состояний hover и focus

Скругление углов: border-radius

Добавим анимацию

Построение взаимодействия

Простой и гибкий hover с использованием opacity

Прозрачность на кликабельных картинках

Разметка

Прозрачность и эффективность картинки

Оформление списка

opacity: хак для IE

Добавим переход

Вперед, к новому hover

4. Преобразовывая содержимое

Масштабирование

Добавим стиль

Масштабирование в hover

Подходящая тень

Сгладим масштабирование переходом

Преобразовывая взаимодействие

Поворот, кручение, сдвиг

Добавим поворот

Нет поворота? Паника ни к чему

Повернутое Солнце

Кручение (skew)

Сдвиг (translate)

Разные преобразования, помогающие поддержать рассказ

Преобразования Луны

Поддержка сообщения

Разметка

Основные стили для каждого предмета

Общее правило

Масштабируем большой пончик

Перспектива: масштабирование и позиционирование

Ускользающая космическая кошка

Откидное кресло

Исчезающий гном

Безопасное упрощение

Еще раз: используйте с умом

Побольше «вау-вау», пожалуйста

5. Множественные фоны

Параллакс

Старый способ: дополнительная разметка

Новый способ: множественные фоны на CSS3

Синтаксис множественного фона

Поддержка в браузерах

Запасной вариант для всех браузеров

Использование множественных фонов

6. Улучшенные формы

Разметка для простой формы регистрации

Стили для полей и подписей

Больше CSS3-селекторов

Оформление полей ввода

Градиенты в CSS3

Настоящая кнопка на CSS3

Основные стили для кнопки

Скругление углов

Линейный градиент

text-shadow

Тень на кнопке

А как насчет других браузеров?

Использование box-shadow для создания состояния focus

Добавление CSS-анимаций для улучшения взаимодействия с формой

Ключевые кадры

Ссылки на keyframe

Повторное использование анимации для кнопки в состоянии hover

А как насчет остальных браузеров?

Сосредоточьтесь на взаимодействии

Заключение

А как насчет заказчиков и руководителей, которые не понимают этого?

Что дальше?

Дополнительные материалы и ресурсы

Об издательстве A Book Apart

Об авторе

Отрывок из книги

Глядя в прошлое, на яркую историю CSS, мы видим важные этапы, которые формировали наше видение веб-дизайна. Прорывные приемы, статьи и события научили нас создавать гибкие и доступные сайты, которыми мы можем гордиться – и их обликом, и качеством кода.

Можно утверждать, что все интересное началось в 2001-м, когда Джефри Зельдман написал статью «К черту плохие браузеры» (http://bkaprt.com/css3/1/)[1], обозначив рассвет эпохи CSS. Этот манифест заставил дизайнеров двигаться дальше и использовать CSS не только для задания шрифтов и цветов ссылок, таким образом оставляя позади старые браузеры, не понимавшие CSS1. Да-да, CSS1.

.....

}

Определяет непрозрачность элемента. Значение 1 соответствует полной непрозрачности; значение 0 соответствует полной прозрачности. Поддерживается в Safari 1.2+, Chrome 1+, Firefox 1.5+, Opera 9+ и IE9 Beta. Пример:

.....