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 и fосus. ⇢
- Скругление углов: border-radius. ⇢
- Добавим анимацию. ⇢
- Построение взаимодействия. ⇢
- Простой и гибкий hover с использованием орасitу. ⇢
- Прозрачность на кликабельных картинках. ⇢
- Разметка. ⇢
- Прозрачность и эффективность картинки. ⇢
- Оформление списка. ⇢
- opacity: хак для IE. ⇢
- Добавим переход. ⇢
- Вперед, к новому hover. ⇢
- 4. Преобразовывая содержимое. ⇢
- Масштабирование. ⇢
- Добавим стиль. ⇢
- Масштабирование в hоvеr. ⇢
- Подходящая тень. ⇢
- Сгладим масштабирование переходом. ⇢
- Преобразовывая взаимодействие. ⇢
- Поворот, кручение, сдвиг. ⇢
- Добавим поворот. ⇢
- Нет поворота? Паника ни к чему. ⇢
- Повернутое Солнце. ⇢
- Кручение (skew). ⇢
- Сдвиг (translate). ⇢
- Разные преобразования, помогающие поддержать рассказ. ⇢
- Преобразования Луны. ⇢
- Поддержка сообщения. ⇢
- Разметка. ⇢
- Основные стили для каждого предмета. ⇢
- Общее правило. ⇢
- Масштабируем большой пончик. ⇢
- Перспектива: масштабирование и позиционирование. ⇢
- Ускользающая космическая кошка. ⇢
- Откидное кресло. ⇢
- Исчезающий гном. ⇢
- Безопасное упрощение. ⇢
- Еще раз: используйте с умом. ⇢
- Побольше «вау-вау», пожалуйста. ⇢
- 5. Множественные фоны. ⇢
- Параллакс. ⇢
- Старый способ: дополнительная разметка. ⇢
- Новый способ: множественные фоны на CSS. ⇢
- Синтаксис множественного фона. ⇢
- Поддержка в браузерах. ⇢
- Запасной вариант для всех браузеров. ⇢
- Использование множественных фонов. ⇢
- 6. Улучшенные формы. ⇢
- Разметка для простой формы регистрации. ⇢
- Стили для полей и подписей. ⇢
- Больше CSS-селекторов. ⇢
- Оформление полей ввода. ⇢
- Градиенты в CSS. ⇢
- Настоящая кнопка на CSS. ⇢
- Основные стили для кнопки. ⇢
- Скругление углов. ⇢
- Линейный градиент. ⇢
- text-shadow. ⇢
- Тень на кнопке. ⇢
- А как насчет других браузеров? ⇢
- Использование box-shadow для создания состояния focus. ⇢
- Добавление CSS-анимаций для улучшения взаимодействия с формой. ⇢
- Ключевые кадры. ⇢
- Ссылки на keyframe. ⇢
- Повторное использование анимации для кнопки в состоянии hover. ⇢
- А как насчет остальных браузеров? ⇢
- Сосредоточьтесь на взаимодействии. ⇢
- Заключение. ⇢
- А как насчет заказчиков и руководителей, которые не понимают этого? ⇢
- Примечания. ⇢
Д. Сидерхолм.