Множество ключевых кадров

14 15 16 17 18 19 20

Для определения промежуточного кадра применяется процентное значение анимации:

@keyframes backgroundColorAnimation {

from {

background-color: red;

}

25%{

background-color: yellow;

}

50%{

background-color: green;

}

75%{

background-color: blue;

}

to {

background-color: violet;

}

Также можно в одном ключевом кадре анимировать сразу несколько свойств:

@keyframes backgroundColorAnimation {

from {

background-color: red;

opacity: 0.2;

}

to {

background-color: blue;

opacity: 0.9;

}

В общем случае после завершения временного интервала, указанного в свойстве animation-duration, завершается выполнение анимации. С помощью дополнительных свойств можно переопределить поведение анимации.

Свойство animation-iteration-count определяет, сколько раз будет повторяться анимация. Значение infinite – запускает бесконечное повторение анимации.

Свойство animation-direction: alternate – запускает анимацию в противоположном направлении.

Свойство animation-delay – определяет время задержки анимации.

Функция плавности протекания анимации animation-timing-function принимает такие значения, как и у переходов.

Свойство animation можно использовать в сокращенном формате:

animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;

Тема 2.6 Введение в адаптивный дизайн

В настоящее время большое распространение находят различные гаджеты – смартфоны, планшеты, «умные часы» и другие устройства, которые тоже позволяют выход в Интернет.

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

Тестирование адаптивного сайта

При разработке адаптивных веб – страниц можно столкнуться с трудностями тестирования, т.к. разработка идет на обычном ПК. Но современные браузеры позволяют нам эмулировать запуск веб – страницы на том или ином устройстве с различной шириной экрана. Например, в Google Chrome надо перейти в меню Дополнительные инструменты – Инструменты разработчика. После открытия панели разработчика в начале меню самой панели нажать на иконку мобильного телефона, и после этого можно будет эмулировать отображение страницы на различных устройствах.

Метатег Viewport

Один из ключевых моментов адаптивного дизайна – метатег viewport, с этого тега начинается адаптивный дизайн.

Вся видимая часть на экране браузера описывается понятием Viewport, по сути - это область в которую веб – браузер пытается «впихнуть» веб – страницу. По умолчанию браузер считает, что каждая веб – страница предназначена для стандартных экранов ПК (десктопов с шириной 980px.). При этом для каждого браузера устанавливается своя ширина области viewport. Если устройство имеет меньшую ширину экрана, то страница сжимается на коэффициент масштабирования.

Чтобы избежать подобной картины следует использовать метатег viewport. Он имеет следующее определение:

<meta name="viewport" content="параметры_метатега">

В атрибуте content можно определить следующие параметры:

Параметр	Значение	Описание
width	Применяется целочисленное значение в пикселях или значение device-width	Устанавливает ширину области viewport
height	Применяется целочисленное значение в пикселях или значение device-height	Устанавливает высоту области viewport
initial-scale	Число с плавающей точкой от 0.1 и выше	Задает коэффициент масштабирования начального размера viewport. Значение 1.0 задает отсутствие масштабирования
user-scalable	no/yes	Указывает, может ли пользователь с помощью жестов масштабировать страницу
minimum-scale	Число с плавающей точкой от 0.1 и выше	Задает минимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования
maximum-scale	Число с плавающей точкой от 0.1 и выше	Задает максимальный масштаб размера viewport. Значение 1.0 задает отсутствие масштабирования

Пример применения: <meta name="viewport" content="width=device-width">

В данном случае веб – браузеру говориться, что в качестве начальной ширины области viewport надо брать непосредственно ширину экрана устройства. Можно применять другие параметры:

Правила Media Query

Важным элементом в построении адаптивного дизайна являются правила Media Query, которые позволяют определить стиль в зависимости от размера браузера пользователя.

<html>

<head>

<title>Адаптивная веб-страница</title>

<link rel="stylesheet" type="text/css" href="desctop.css" />

<link rel="stylesheet" type="text/css" media="(max-device-width:480px)" href="mobile.css" />

</head>

<body>

Значение атрибута media="(max-device-width:480px)" говорит о том, что стили из файла mobile.css будут применяться к тем устройствам, максимальная ширина экрана которых составляет 480px, т.е. для мобильных устройств.

С помощью ключевого слова and можно комбинировать условия:

С помощью директивы @ import можно определить один css-файл и импортировать в нем стили для определенных устройств:

@import url(desctop.css);

@import url(tablet.css) (min-device-width:481px) and (max-device-width:768);

@import url(mobile.css) (max-device-width:480px);

Также можно не разделят стили по файлам, а использовать правила CSS3 Media Query в одном файле css:

body {

background-color: red;

}

/*Далее остальные стили*/

@media (max-device-width:480px){

body {