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

1. CSS сегодня. Не читайте спецификации. CSS – для всех. Целиться на взаимодействие. Когда применять CSS. Главные свойства CSS, применимые сейчас. 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. Множественные фоны. Параллакс. Старый способ: дополнительная разметка. Новый способ: множественные фоны на CSS. Синтаксис множественного фона. Поддержка в браузерах. Запасной вариант для всех браузеров. Использование множественных фонов. 6. Улучшенные формы. Разметка для простой формы регистрации. Стили для полей и подписей. Больше CSS-селекторов. Оформление полей ввода. Градиенты в CSS. Настоящая кнопка на CSS. Основные стили для кнопки. Скругление углов. Линейный градиент. text-shadow. Тень на кнопке. А как насчет других браузеров? Использование box-shadow для создания состояния focus. Добавление CSS-анимаций для улучшения взаимодействия с формой. Ключевые кадры. Ссылки на keyframe. Повторное использование анимации для кнопки в состоянии hover. А как насчет остальных браузеров? Сосредоточьтесь на взаимодействии. Заключение. А как насчет заказчиков и руководителей, которые не понимают этого? Что дальше? Дополнительные материалы и ресурсы. Об издательстве A Book Apart. Об авторе. Примечания. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21.