CSS3 CSS3 (каскадные таблицы стилей) – расширение CSS 2.1, добавляет новую функциональность к существующим возможностям спецификация разделена на модули. - презентация

1

2 CSS3 CSS3 (каскадные таблицы стилей) – расширение CSS 2.1, добавляет новую функциональность к существующим возможностям спецификация разделена на модули обратная совместимость с предыдущими версиями стандарт в разработке с 1999 года

3 CSS3. Нововведения Визуальные эффекты, не зависящие от изображений Трансформации полей Уникальные шрифты Мощный механизм селекторов Переходы и анимация Медиазапросы Многостолбцовые макеты

4 Поддержка броузерами

5

6 Броузерные префиксы

7 Проблемы префиксами div { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } Помогут препроцессоры:

8 Новые селекторы E[foo^="bar"] E[foo$="bar"] E[foo*="bar"] E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:target E:enabled E:disabled E:checked E:not(s) E ~ F E::selection

9 Медиазапросы Медиазапросы позволяют настраивать стили страницы в зависимости от характеристик пользовательского устройства или дисплея, таких как ширина области просмотра, ориентация (портретная или альбомная) и возможность отображения цветов

10 Адаптивный(отзывчивый) дизайн Адаптивный веб-дизайн (англ. Responsive web design) дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах не нужно создавать отдельные версии сайта для отдельных видов устройств

11 Основые принципы применение гибкого макета на основе сетки (flexible, grid-based layout) использование гибких изображений (flexible images) работа с медиазапросами (media queries)

12 Стратегии Постепенное улучшение (progressive enhancement) o Mobile first - проектирование для мобильных устройств с самых ранних этапов Умеренная деградация (graceful degradation)

13 screen and (max-width: 600px) { body { font-size: 88%; } #content-main { float: none; width: 100%; url(narrow.css) only screen and (max-width:600px);

14 Типы медианосителей braille embossed handheld print projection screen speech tty tv all

15 Характеристики медианосителей width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid

16 Характеристики медианосителей

17 Переходы CSS переходы позволяют плавно изменять значения CSS свойства в течение заданного времени представлены Safari 2007 года, первоначально были отнесены с CSS анимации

18 Свойства перехода transition-property - название CSS свойства, к которому следует применить переход transition-duration - определяет, сколько времени займет переход transition-timing-function - описывает, как будет изменяться скорость выполнения перехода transition-delay - определяет, когда начнется переход

19 Функции сихронизации ease linear ease-in ease-out ease-in-out cubic-bezier(x, x,x,x)

20 Переходы. Пример div { width: 100px; height: 100px; -webkit-transition: width 3s; -moz-transition: width 3s; -o-transition: width 3s; transition: width 3s; } div:hover { width: 200px; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; }

21 Особенности одна итерация нет полного контроля не все свойства подходят для переходов from-css- from-css-

22 Трансформация transform: [ ] – translate - сдвиг – scale - масштабирование – rotate - поворот – skew - наклон – matrix – задает матрицу 2D и 3D контекст

23 Трансформация. Пример div { height: 100px; width: 100px; transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); }

24 Анимация

25 Свойства анимации animation-name - имя анимации animation-duration - время проигрывания animation-timing-function - функция расчета промежуточных значений animation-delay - задержку анимации animation-iteration-count - количество циклов анимации animation-direction - задает направление анимации animation-play-state - определяет, проигрывается ли анимация или стоит на паузе

26 Ключевые movement { 0% { top: 0; left: 0; } 25% { top: 0; left: 100px; } 50% { top: 100px; left: 100px; } 100% { top: 100px; left: 0; } } div { animation: movement 1s 500ms; }

27 Демо CSS3 man css3/launch css3/launch

28 Ресурсы