belarusweb.net - веб-программирование для новичков: HTML,CSS, JavaScript, PHP, MySQL и др.

# §4. Установка цвета и фона, использование анимации

4.1. Установка цвета. Мы уже неоднократно использовали наследуемое свойство color для установки цвета текста, при чем уже в процессе изучения языка гипертекстовой разметки HTML. Однако применение данного свойства влияет не только на сам текст, но и на цвет границ элемента в случае, если он не будет установлен явно. Поэтому, если нам нужен цвет границ отличный от цвета текста, необходимо задать его при помощи свойства border-color.

В качестве значений свойство color принимает цвет, который можно задать одним из допустимых способов, указав ключевое слово цвета, его шестнадцатеричное значение или же использовав синтаксис одной из цветовых моделей rgb, rgba, hsl или hsla. Кроме того, имеется специальное значение transparent, которое устанавливает прозрачный текст (см. пример 4.1). Также не забываем про универсальное значение inherit.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка цвета текста</title>
    	<style>
    		.color_1{
    		border: solid 2px;
    		color: #995533;
    		width: 300px;
    		}
    		.color_2{
    		border: solid 2px green;
    		color: rgba(40%,60%,90%,0.9);
    		width: 300px;
    		}
    	</style>
    </head>
    <body>
    	<p class="color_1">
    		Цвет границы будет такой же, как
    		у текста.
    	</p>

    	<p class="color_2">
    		Цвет границы задали явно.
    	</p>
    </body>
    </html>

Пример 4.1. Использование свойства color

4.2. Установка фона. Для установки фона в CSS присутствует целая группа свойств, отвечающая за его внешний вид и другие характеристики. При этом фон может охватывать как содержимое элемента, так и его внутренние отступы и границы.

Цвет фона определяется при помощи ненаследуемого свойства background-color, которое принимает те же значения цвета, что и свойство color (смотреть). Также в качестве фона разрешается использовать изображения. Для этого нужно использовать свойство background-image, которое в качестве значений принимает путь к одному или нескольким файлам изображений, перечисляемых через запятую в формате {background-image: url("path_1"), url("path_2"), ...}, где путь, опять же, можно писать как в кавычках, так и без них. Если фоновых изображений указывается несколько, то приоритет будет отдаваться первым из них, т.е. изображения, указанные впереди, будут располагаться выше остальных в порядке своего перечисления в значении свойства. Отметим, что в качестве значения может использоваться ключевое слово none, которое отменяет установку фона. Браузеры используют это значение по умолчанию, а также в случае, если фоновое изображение по каким-либо причинам не может быть загружено. Для исключения таких ситуаций разрешается одновременное использование свойств background-color и background-image. В этом случае фон будет отображаться до момента полной загрузки фонового изображения или вместо него из-за невозможности установки изображения в качестве фона элемента.

Использование свойств background-color, background-image показано в примере 4.2.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка фона</title>
    	<style>
    		.background_1{
    		width: 300px;
    		border: solid 2px;
    		background-color: yellow;
    		}
    		.background_2{
    		width: 300px;
    		height: 200px;
    		border: solid 2px green;
    		background-color: #0000ff;
    		background-image:
    	url("css_textbook_4_examples/balls_2015.jpg");
    		}
    	</style>
    </head>
    <body>
    	<p class="background_1">
    		Данный абзац имеет желтый фон.
    	</p>

    	<p class="background_2">
    		По умолчанию фоновое изображение располагается браузером в левом
    		верхнем углу и затем повторяется по вертикали и горизонтали.
    		Если изображение не будет загружено, то будет использован синий фон,
    		заданный в свойстве background-color.
    	</p>
    </body>
    </html>

Пример 4.2. Установка фона элемента

Когда браузер устанавливает изображение в качестве фона элемента, он, по умолчанию, размещает его в верхнем левом углу и затем тиражирует по вертикали и горизонтали до заполнения выделенной под фон области элемента. Если нужно изменить такое поведение браузера, следует использовать ненаследуемое свойство background-repeat (см. пример 4.3), которое может принимать следующие значения:

- repeat – используется браузером по умолчанию, повторяя изображение по вертикали и горизонтали;
- repeat-x – изображение повторяется только по вертикали;
- repeat-y – изображение повторяется только по горизонтали;
- no-repeat – изображение не повторяется;
- space – изображение повторяется таким образом, чтобы полностью заполнить область; если же это не удаётся, между картинками добавляется пустое пространство;
- round – изображение повторяется таким образом, чтобы в области поместилось целое число рисунков; если же это не удаётся, фоновые рисунки масштабируются.

Отметим, что допустимо указывать через запятую сразу два значения: первое ключевое слово задаёт повторение по горизонтали, второе – по вертикали. При этом ключевыми словами не должны быть repeat-x или же repeat-y.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка фона</title>
    	<style>
    		.background_1{
    		width: 310px;
    		height: 100px;
    		border: solid 2px red;
    		background-color: yellow;
    		background-repeat: repeat-x;
    		background-image:
    	url("css_textbook_4_examples/cabinet.png");
    		}
    		.background_2{
    		width: 310px;
    		height: 100px;
    		border: solid 2px green;
    		background-repeat: repeat-y;
    		background-image:
    	url("css_textbook_4_examples/cabinet.png");
    		}
    	</style>
    </head>
    <body>
    	<p class="background_1">	</p>

    	<p class="background_2">	</p>
    </body>
    </html>

Пример 4.3. Использование свойства background-repeat

Чтобы указать браузеру, где ему следует разместить фоновое изображение, следует использовать ненаследуемое свойство background-position, которое определяет начальное положение фонового изображения (см. пример 4.4). Свойство может принимать как одну пару значений (или одиночное значение), так и несколько пар значений (или одиночных значений), разделяемых запятой для каждого изображения, указанного в значении свойства background-image:

- x y – первое значение указывает позицию фонового изображения по горизонтали, а второе (через пробел) – по вертикали; в качестве координат могут приниматься любые доступные в CSS единицы измерения, а также проценты, в любом сочетании; при этом считается, что верхний левый угол задается координатами 0 0, например, 0px 0em; если указано только одно значение, то второе принимается за 50%; если координаты заданы в процентах, то нижний правый угол задается координатами 100% 100%;
- ключевые слова – вместо координат разрешается использовать ключевые слова left (x=0%), center (x=50%), right (x=100%) вместо координаты x и top (y=0%), center (y=50%), bottom (y=100%) вместо координаты y. Например, center top соответствует паре координат в процентах 50% 0% и т.д.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка фона</title>
    	<style>
    		.background_1{
    		width: 400px;
    		height: 80px;
    		border: solid 2px red;
    		background-color: yellow;
    		background-repeat: no-repeat;
    		background-image:
    	url("css_textbook_4_examples/cabinet.png");
    		}

    		.background_2{background-position: 30px 60%;}
    		.background_3{background-position: 80% 2em}
    		.background_4{background-position: center bottom;}
    	</style>
    </head>
    <body>
    	<p class="background_1 background_2">30px 60%;</p>
    	<p class="background_1 background_3">80% 2em</p>
    	<p class="background_1 background_4">center bottom</p>
    </body>
    </html>

Пример 4.4. Использование свойства background-position

Имеется в CSS и возможность масштабирования фонового изображения, которая осуществляется за счет использования ненаследуемого свойства background-size (см. пример 4.5), задающего необходимые размеры изображения в зависимости от принимаемых значений:

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

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка фона</title>
    	<style>
    		.background_1{
    		width: 400px;
    		height: 80px;
    		border: solid 2px red;
    		background-color: yellow;
    		background-repeat: no-repeat;
    		background-image:
    	url("css_textbook_4_examples/balls_2015.jpg");
    		}

    		.background_2{background-size: cover;}
    		.background_3{background-size: contain}
    		.background_4{background-size: 20%;}
    	</style>
    </head>
    <body>
    	<p class="background_1 background_2">cover - высота изображения
    	больше его ширины, поэтому по ширине изображение приняло
    	ширину элемента, а по высоте было обрезано по высоте элемента.</p>
    	<p class="background_1 background_3">contain - фоновое изображение
    	полностью поместилось в пределах элемента, но часть площади элемента
    	не была покрыта фоновым изображением.</p>
    	<p class="background_1 background_4">20% - ширина и высота фонового
    	изображения равны 20% от ширины элемента. </p>
    </body>
    </html>

Пример 4.5. Использование свойства background-size

Чтобы указать браузеру какую область элемента следует использовать для фона, используется ненаследуемое свойство background-clip, принимающее следующие значения:

- border-box – под фон отводится вся площадь элемента, включая внутренние отступы и границы; эффект от применения этого значения будет заметен, если границы будут прозрачными или, например, пунктирными;
- padding-box – под фон отводится вся площадь элемента до самых границ, но не включая их;
- content-box – под фон отводится только область содержимого элемента, не включая отступы и границы.

Отметим, что разрешается указывать через запятую несколько значений в случае использования более одного фонового изображения.

Для управления поведением фонового изображения при прокрутке элемента, используется ненаследуемое свойство background-attachment. Оно может принимать следующие значения:

- fixed – фоновое изображение фиксируется относительно верхнего левого угла области просмотра окна браузера и не перемещается при прокрутке содержимого страницы или элемента;
- scroll – при прокрутке содержимого страницы фоновое изображение будет перемещаться вместе со своим элементом, при этом относительно своего элемента изображение будет фиксировано; значение используется браузерами по умолчанию;
- local – фоновое изображение фиксируется не относительно элемента, а относительно его содержимого, поэтому при прокрутке содержимого страницы, оно будет перемещаться вместе с элементом, но стоит начать прокручивать содержимое самого элемента, фоновое изображение начнет перемещаться вместе с содержимым.

Опять же, разрешается указывать через запятую несколько значений в случае использования более одного фонового изображения.

Чтобы указать браузеру относительно чего нужно позиционировать фоновое изображение внутри элемента, используется ненаследуемое свойство background-origin (см. пример 4.6), которое не применяется, если значение свойства background-attachment указано, как fixed. Также, если задано свойство background-size, то приоритет будет отдан браузером значению этого свойства. Перечислим значения, принимаемые свойством:

- border-box – фоновое изображение позиционируется относительно левого верхнего угла элемента, включая содержимое, отступы и границы, при этом часть изображения может перекрываться линиями границ элемента;
- padding-box – фоновое изображение позиционируется относительно левого верхнего угла области, включающей содержимое и внутренние отступы элемента, но не включающей границы элемента;
- content-box – фоновое изображение позиционируется относительно левого верхнего угла области содержимого элемента (прямоугольная область без учета отступов и границ).

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка фона</title>
    	<style>
    		.background_1{
    		padding: 10px;
    		width: 300px;
    		height: 60px;
    		border: dotted 6px red;
    		background-color: yellow;
    		background-repeat: no-repeat;
    		background-image:
    	url("css_textbook_4_examples/cabinet.png");
    		}

    		.background_2{background-origin: border-box;}
    		.background_3{background-origin: padding-box}
    		.background_4{background-origin: content-box}
    	</style>
    </head>
    <body>
    	<p class="background_1 background_2">border-box</p>
    	<p class="background_1 background_3">padding-box</p>
    	<p class="background_1 background_4">content-box </p>
    </body>
    </html>

Пример 4.6. Использование свойства background-origin

Опять же, в CSS для одновременного определения сразу нескольких характеристик фона присутствует ненаследуемое универсальное свойство background. В качестве значений свойства можно в любом порядке через пробел задать значения свойств background-color, background-image background-position, background-repeat, background-attachment, background-size, background-origin и background-clip (см. пример 4.7). Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию.

Свойства background-position и background-size принимают свои значения в одном и том же формате. Поэтому, если необходимо задать значение свойства background-size, оно должно указываться через слэш '/' после значения свойства background-position. Если задано только одно значение, браузер считает, что задано значение свойства background-position.

Кроме того, свойства background-origin и background-clip имеют одни и те же название ключевых слов, принимаемых в качестве значений. Поэтому в случае, когда в элементе установлены как фоновое изображение, так и фон, браузер будет считать, что заданы оба свойства, выделяя соответствующую область элемента под фон и позиционируя соответствующим образом фоновое изображение. Задавать через пробел или слэш '/' значения обоих свойств не разрешается.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка фона</title>
    	<style>
    		.background_1{
    		padding: 10px;
    		width: 300px;
    		height: 60px;
    		border: dotted 6px red;
    		}
    		.background_2{
    		background: #00ff00 fixed padding-box;
    		}
    		.background_3{
    		background: no-repeat #00ff00  content-box 100px 30px/15px 15px
    		url("css_textbook_4_examples/cabinet.png");
    		}
    		.background_4{
    		background: no-repeat #00ff00 content-box
    		url("css_textbook_4_examples/cabinet.png");
    		}
    	</style>
    </head>
    <body>
    	<p class="background_1 background_2">
    		#00ff00 fixed padding-box
    	</p>
    	<p class="background_1 background_3">
    		no-repeat #00ff00  content-box <br> 100px 30px/15px 15px url("path")
    	</p>
    	<p class="background_1 background_4">
    		no-repeat #00ff00  content-box url("path")
    	</p>
    </body>
    </html>

Пример 4.7. Использование универсального свойства background

Отдельно отметим, что красивого визуального эффекта фона можно добиться за счет использования функций linear-gradient() и radial-gradient(), которые могут использоваться в качестве значений в свойствах background и background-image и добавляют, соответственно, линейный и радиальный градиент к фону изображения.

Функция linear-gradient() принимает в качестве аргументов угол или ключевое слово, стартовое значение цвета и конечное значение цвета. Например, запись linear-gradient(30deg, #000000, #ffffff) создает линейный градиент цвета от черного к белому вдоль градиентной прямой, которая расположена под углом в 30 градусов относительно вертикальной прямой. Значение угла может быть как положительным (отсчет ведется по часовой стрелке), так и отрицательным (отсчет ведется против часовой стрелки), но после него в любом случае сразу же и без пробела должно записываться обозначение единицы измерения deg (см. пример 4.8). Цвет может быть указан с использованием любой доступной в CSS цветовой модели. Кроме того, разрешается через запятую указывать более двух значений цветов, тогда цвет будет меняться волнами на протяжении всего градиентного направления от одного цвета к другому. Также следует отметить, что вместо значения угла разрешается использовать следующие ключевые слова:

- to top – направление градиента снизу вверх (0deg);
- to top right – направление градиента от нижнего левого угла к верхнему правому (45deg);
- to right – направление градиента слева направо (90deg);
- to bottom right – направление градиента от верхнего левого угла к нижнему правому (135deg);
- to bottom – направление градиента сверху вниз (180deg);
- to bottom left – направление градиента от верхнего правого угла к нижнему левому (225deg);
- to left – направление градиента справа налево (270deg);
- to top left – направление градиента от нижнего правого угла к верхнему левому (315deg).

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка фона</title>
    	<style>
    		.background_1{
    		padding: 10px;
    		width: 350px;
    		height:100px;
    		border: solid 6px red;
    		}

    	.background_2{background: linear-gradient(0deg, #000000, #ffffff);}
    	.background_3{background: linear-gradient(to top, #000000, #ffffff);}
    	.background_4{background: linear-gradient(225deg, #000000, #ffffff);}
    	.background_5{background: linear-gradient(to bottom left, #000000, #ffffff);}
    	</style>
    </head>
    <body>
    	<p class="background_1 background_2">
    		linear-gradient(0deg, #000000, #ffffff)
    	</p>
    	<p class="background_1 background_3">
    		linear-gradient(to top, #000000, #ffffff)
    	</p>
    	<p class="background_1 background_4">
    		linear-gradient(225deg, #000000, #ffffff)
    	</p>
    	<p class="background_1 background_5">
    		linear-gradient(to bottom left, #000000, #ffffff)
    	</p>
    </body>
    </html>

Пример 4.8. Использование функции linear-gradient()

Функция radial-gradient() в общем случае в качестве аргументов принимает радиусы a и b эллипса, координаты x и y центра эллипса относительно вершины верхнего левого угла элемента и значения цветов с указанием через пробел их горизонтальной позиции относительно центра эллипса. В качестве числовых аргументов могут использоваться любые доступные в CSS единицы измерения, а также проценты. Цвет также может быть указан с использованием любой доступной в CSS цветовой модели.

Рассмотрим в качестве примера конкретное использование функции с указанием всех перечисленных арументов: radial-gradient(150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px). Данная функция создает радиальные градиенты цветов от белого к черному и от черного к серому, которые распространяются от центра эллипса с радиусами 150px по горизонтали и 100px по вертикали. При этом координата x центра равна 50% от ширины элемента, а координата y – 50% от высоты элемента (повторимся, отсчет координат центра ведется от вершины верхнего левого угла элемента). Величины, которые указаны через пробел после значений цветов, представляют собой позиции соответствующих цветов на горизонтальной градиентной прямой, которые определяют резкость переходов от одного цвета к другому. В нашем примере белый цвет заполняет соответствующую эллиптическую область с горизонтальным радиусом длиной 2px и вертикальным радиусом, длина которого вычисляется браузером автоматически в зависимости от соотношения радиусов a и b, заданных в качестве аргументов функции. Затем происходит радиальный переход цвета от белого к черному, позиция которого находится на расстоянии 30px от центра эллипса на прямой, содержащей горизонтальный радиус нашего эллипса. После чего начинается новый переход от черного цвета к серому, позиция которого расположена на расстоянии 70px от центра эллипса. Остальная площадь элемента, отведенная под фон, если градиентная область не покрывает ее всю, будет залита серым цветом. Внимательно и неторопясь изучите пример 4.9, в котором показано использование функции. Обратите внимание, что рассмотренное нами значение функции было использовано для создания фона первого абзаца.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка фона</title>
    	<style>
    		.background_1{
    		padding: 10px;
    		width: 460px;
    		height:110px;
    		border: solid 6px red;
    		}

    	.background_2{background:
    	radial-gradient(150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px);}
    	.background_3{background:
    	radial-gradient(150px 100px at 50% 50%, #ffffff, #000000 100px, #dddddd 200px);}
    	.background_4{background:
    	radial-gradient(550px 200px at 30% 50px, #ffffff 20%, #000000 70%, #dddddd);}
    	.background_5{background:
    	radial-gradient(300px 250px at 40% 100px, #ffffff, #000000, #dddddd);}
    	</style>
    </head>
    <body>
    	<p class="background_1 background_2">
    		150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px
    	</p>
    	<p class="background_1 background_3">
    		150px 100px at 50% 50%, #ffffff 20px, #000000 60px, #dddddd 100px
    	</p>
    	<p class="background_1 background_4">
    		550px 200px at 30% 50px, #ffffff 20%, #000000 70%, #dddddd
    	</p>
    	<p class="background_1 background_5">
    		300px 250px at 40% 100px, #ffffff, #000000, #dddddd
    	</p>
    </body>
    </html>

Пример 4.9. Использование функции radial-gradient()

Если вместо двух радиусов указать только один, то будет задан градиент круглой формы, а в случае отсутствия значений градиент заполнит всю отведенную под фон область элемента. Вместо радиусов a и b разрешается использовать ключевые слова circle и ellipse. Первое из них задает радиальный градиент круглой формы, а второй используется по умолчанию и задает радиальный градиент эллиптической формы. В случае использования данных ключевых слов размеры эллипса (круга) либо не указываются вообще, либо через пробел используются следующие ключевые слова (см. пример 4.10):

- closest-side – для круга радиус будет равен расстоянию от центра круга до ближайшей стороны элемента; для эллипса радиус a будет равен расстоянию от центра до ближайшей левой или правой стороны, а для радиуса b – до ближайшей верхней или нижней стороны элемента;
- farthest-side – для круга радиус будет равен расстоянию от центра круга до самой удаленной стороны элемента; для эллипса радиус a будет равен расстоянию от центра до более удаленной левой или правой стороны, а для радиуса b – до более удаленной верхней или нижней стороны элемента;
- closest-corner – для круга радиус будет равен расстоянию от центра круга до вершины ближайшего угла элемента; для эллипса радиусы вычисляются на основании расстояния от его центра до вершины ближайшего угла элемента;
- farthest-corner – для круга радиус будет равен расстоянию от центра круга до вершины самого дальнего угла элемента; для эллипса радиусы вычисляются на основании расстояния от его центра до самого дальнего угла элемента.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка фона</title>
    	<style>
    		.background_1{
    		padding: 10px;
    		width: 300px;
    		height: 60px;
    		border: solid 6px red;
    		}
    	.background_2{background:
    	radial-gradient(circle closest-side at 30% 40%, #ffffff, #000000);}
    	.background_3{background:
    	radial-gradient(ellipse closest-side at 30% 40%, #ffffff, #000000);}
    	.background_4{background:
    	radial-gradient(circle closest-corner at 30% 40%, #ffffff, #000000);}
    	.background_5{background:
    	radial-gradient(ellipse closest-corner at 30% 40%, #ffffff, #000000);}
    	.background_6{background:
    	radial-gradient(circle farthest-corner at 30% 40%, #ffffff, #000000);}
    	.background_7{background:
    	radial-gradient(ellipse farthest-corner at 30% 40%, #ffffff, #000000);}

    	</style>
    </head>
    <body>
    	<p class="background_1 background_2"></p>
    	<p class="background_1 background_3"></p>
    	<p class="background_1 background_4"></p>
    	<p class="background_1 background_5"></p>
    	<p class="background_1 background_6"></p>
    	<p class="background_1 background_7"></p>
    </body>
    </html>

Пример 4.10. Использование ключевых слов в функции radial-gradient()

Вместо координат центра эллипса также разрешается использовать ключевые слова, задающие его расположение:

- at left top||at top left – в левом верхнем углу (0% 0%);
- at center top||at top center||at top – по центру вверху (50% 0%);
- at right top||at top right – в правом верхнем углу (100% 0%);
- at right center||at center right||at right – справа по центру (100% 50%);
- at right bottom||at bottom right – в правом нижнем углу (100% 100%);
- at center bottom||at bottom center||at bottom – по центру внизу (50% 100%);
- at left bottom||at bottom left – в левом нижнем углу (0% 100%);
- at left center||at center left||at left – слева по центру (0% 50%);
- at center center||at center – в центре элемента (50% 50%).

Что касается позиций цветов относительно центра радиальной области, то их можно не указывать или указывать только некоторые из них. В таких случаях браузер будет равномерно распределять позиции всех цветов, попадающих в соответствующие промежутки (см. пример 4.9).

4.3. Использование анимации. Имеются в CSS и возможности для создания анимационных эффектов и различных визуальных переходов элементов из одного состояния в другое, которые реализуются за счет набора специальных свойств, отвечающих за продолжительность, направление, количество повторений эффектов и т.д.

Для того, чтобы указать для каких именно свойств элемента необходимо применять анимационные эффекты, используется отдельное правило @keyframes. Оно устанавливает ключевые кадры при анимации элемента, которые представляют собой конкретные стилевые свойства элемента в данный момент. Таким образом, анимация представляет собою не что иное, как переход от одного набора стилевых свойств элемента к другому. В простейшем случае используется два ключевых кадра, т.е. два набора стилевых свойств элемента, между которыми и происходит анимационный переход.

Формат записи правила имеет вид @keyframes имя_анимации {a% {св-во_1: начальное_значение_св-ва; св-во_2: начальное_значение_св-ва; ...} b% {св-во_1: промежуточное_значение_св-ва; св-во_2: промежуточное_значение_св-ва; ...} ... c% {св-во_1: конечное_значение_св-ва; св-во_2: конечное_значение_св-ва; ...}}, где проценты отсчитываются от промежутка времени всей анимации. В простейшем случае при наличии всего двух ключевых кадров разрешается использовать вместо 0% ключевое слово from, а вместо 100% – ключевое слово to. Использование данного правила, а также свойств, устанавливающих параметры анимации, показан рис. 4.11. Наберите код в редакторе и в процессе чтения данного пункта поэкспериментируйте с различными вариантами значений анимационных свойств.

Сами анимационные свойства записываются в отдельном от @keyframes правиле на общих основаниях с другими правилами CSS. А для того, чтобы привязать анимационные свойства к конкретной анимации, т.е. к правилу @keyframes, используется свойство animation-name, принимающее в качестве значений либо список имен анимаций, которые должны быть применены к элементу, либо ключевое слово none, которое используется по умолчанию и отменяет анимацию. Имена в списке анимаций должны перечисляться через запятую.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Использование анимации</title>
    	<style>
    		.background_1{
    		padding: 0px;
    		width: 460px;
    		height: 110px;
    		border: solid 4px red;
    		animation-name: example_1, example_2;
    		animation-delay: 2s;
    		animation-duration: 3s;
    		animation-iteration-count: infinite;
    		animation-direction: alternate;
    		animation-timing-function: ease-in-out;
    		animation-fill-mode: backwards;
    		}

    		@keyframes example_1{
    			0% {
    			background: #ff0000;
    			height: 0px;
    			}

    			50% {
    			background: #00ff00;
    			height: 400px;
    			}

    			100% {
    			background: #0000ff;
    			height: 200px;
    			}
    		}

    		@keyframes example_2{
    			from {
    			width: 0px;
    			}

    			to {
    			width 500px;
    			}
    		}
    	</style>
    </head>
    <body>
    	<p class="background_1">	</p>
    </body>
    </html>

Пример 4.11. Определение параметров анимации

Перечислим все доступные анимационные свойства, используемые в CSS. Начнем с animation-delay, которое устанавливает время задержки перед запуском анимации. В качестве значения свойство принимает время, указанное в секундах (s) или миллисекундах (ms). Если указано нулевое значение времени (используется браузером по умолчанию), то анимация запускается без задержек. Также разрешается использовать отрицательные значения, но с ними нужно быть осторожным, т.к. это может привести к изменению вида анимации в начальной стадии процесса.

Чтобы установить продолжительность одного цикла анимации, необходимо использовать свойство animation-duration, которое также принимает в качестве значения время, указанное в секундах (s) или миллисекундах (ms). По умолчанию используется время равное нулю, что означает отсутствие анимации вообще. Отрицательные значения не разрешаются.

Количество повторений анимации можно задать при помощи свойства animation-iteration-count, которое принимает в качестве значений либо положительное число, указывающее количество повторений, либо ключевое слово infinite, означающее воспроизведение анимации бесконечное число раз. При этом разрешается использовать не только целые значения, но и дробные. Например, если значение равно 1.5, то анимация совершит один полный цикл и потом завершится на половине второго цикла. По умолчанию анимация воспроизводится только один раз.

Помимо количества повторений анимации можно задать и ее направление. Делается это при помощи свойства animation-direction, которое принимает значения в виде ключевых слов:

- normal – после завершения цикла, анимация сбрасывается в исходное состояние и стартует заново (используется по умолчанию);
- alternate – после завершения цикла, анимация начинает шаг за шагом воспроизводиться в обратном направлении;
- reverse – анимация начинается сразу с конца цикла, выполняя все шаги в обратном направлении, а затем сбрасывается опять в конец цикла;
- alternate-reverse – анимация начинается сразу с конца цикла, выполняя все шаги в обратном направлении, а затем начинает шаг за шагом воспроизводиться в прямом направлении, возвращаясь в конец цикла, который в данном случае является стартовой точкой.

Управлять плавностью анимации (скоростью переходов от одного состояния к другому) позволяет свойство animation-timing-function, которое использует значения математической функции Безье, а также значения пошаговой функции:

- cubic-bezier(n1,n2,n3,n4) – поведение анимации будет зависеть от результата вычисления функции Безье, в качестве аргументов которой можно задавать четыре числа от нуля до единицы включительно;
- ease – соответствует результату функции cubic-bezier(0.25,1,0.25,1); анимация ускоряется к середине, а затем замедляется к концу;
- ease-in – соответствует результату функции cubic-bezier(0.42,0,1,1); анимация начинает медленно ускоряться с самого начала и до конца;
- ease-out – соответствует результату функции cubic-bezier(0,0,0.58,1); анимация стартует ускоренно и замедляется к концу;
- ease-in-out – соответствует результату функции cubic-bezier(0.42,0,0.58,1); анимация медленно стартует и медленно заканчивается;
- linear – соответствует результату функции cubic-bezier(0,0,1,1); постоянная скорость на всем промежутке воспроизведения;
- steps(n, start|end) – здесь n представляет собою положительное целое число, которое задает число шагов функции, а ключевые слова определяют когда эти шаги будут сделаны – в начале или в конце указанного промежутка времени;
- step-start – соответствует результату функции step(1,start); стилевые свойства элемента сразу же принимают конечные значения, при этом анимация как бы отсутствует;
- step-end – соответствует результату функции step(1,end); стилевые свойства элемента находятся в исходном состоянии указанное время, а затем скачком принимают конечные значения, при этом анимация как бы отсутствует.

Если в определенный момент нужно поставить анимацию на паузу, следует воспользоваться свойством animation-play-state, которое определяет два состояния анимации:

- running – анимация проигрывается;
- paused – анимация поставлена на паузу.

Изменять значение свойства можно, например, при помощи JavaScript. При этом при постановке анимации на паузу, на экране пользователя будет отображаться текущее состояние анимации, а после снятия ее с паузы, анимация продолжит свое воспроизведение с момента постановки ее на паузу.

Немаловажным является вопрос о том, какие стили применять к элементу до и после анимации. Для таких случаев предусмотрено свойство animation-fill-mode, которое может принимать следующие значения:

- backwards – во время старта анимации к элементу применяется стиль первого ключевого кадра, который будет сохраняться на весь период задержки анимации, установленный свойством animation-delay;
- forward – по окончании анимации к элементу применяется стиль последнего ключевого кадра;
- both – применяются оба значения: для момента запуска анимации применяется первое значение, т.е. backwards, а в момент финиша – второе, т.е. forward;
- none – данное значение применяется по умолчанию; стиль элемента до и после анимации остается неизменным, а если ранее было применено одно из значений backwards или forward, то их действия будут отменены.

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

Анимационные, а также описываемые ниже транзитные свойства разрешается применять ко всем элементам, а также к псевдоэлементам ::before и ::after.

Для простейших случаев анимации, когда требуется совершить плавный переход между двумя значениями какого-нибудь CSS-свойства, используется небольшой набор специальных транзитных свойств, являющихся в некотором смысле аналогом анимационных свойств. Транзитные свойства перечисляются в правиле на общих основаниях и срабатывают при каждом изменении целевого свойства. Рассмотрим этот вопрос подробнее.

Если для какого-нибудь свойства элемента требуется создать эффект перехода, чтобы изменения происходили не моментально, а постепенно согласно указанным параметрам, следует указать это свойство в качестве значения транзитного свойства transition-property. Если значений несколько, то их следует указывать через запятую. Кроме того, в качестве значений разрешается использовать ключевое слово none, которое указывает браузеру, что эффект перехода вообще не нужно применять ни к каким свойствам, а также ключевое слово all, которое указывает браузеру на создание эффекта перехода для всех анимируемых свойств в данном правиле. Использование транзитных свойств, показан рис. 4.12. Опять же, наберите код в редакторе и в процессе чтения данного пункта поэкспериментируйте с различными вариантами значений свойств.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Создание эффектов перехода</title>
    	<style>
    		.background_1{
    		padding: 0px;
    		width: 130px;
    		height: 50px;
    		border: solid 4px red;
    		background-color: #00ff00;
    		transition-property: width, background-color;
    		transition-delay: 0.1s;
    		transition-duration: 1s;
    		transition-timing-function: ease;
    		}

    		p:hover{
    		cursor: pointer;
    		background-color: #0000ff;
    		width: 450px;
    		}
    	</style>
    </head>
    <body>
    	<p class="background_1">Наведите курсор!</p>
    </body>
    </html>

Пример 4.12. Создание эффектов перехода

Для установки периода ожидания перед началом перехода используется свойство transition-delay. В качестве значения свойство принимает время, указанное в секундах (s) или миллисекундах (ms). Если указано нулевое значение времени (используется браузером по умолчанию), то переход начинается без задержек. Также разрешается использовать отрицательные значения, но с ними нужно быть осторожным, т.к. это может привести к изменению вида перехода в начальной стадии процесса. Разрешается перечислять через запятую несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в transition-property.

Чтобы установить продолжительность перехода из начального состояния в конечное, необходимо использовать свойство transition-duration, которое также принимает в качестве значения время, указанное в секундах (s) или миллисекундах (ms). Разрешается перечислять через запятую несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в transition-property. По умолчанию используется время равное нулю, что означает отсутствие перехода вообще. Отрицательные значения не разрешаются.

Разрешается также управлять скоростью перехода от одного состояния к другому. Для этого используется свойство transition-timing-function, которое использует значения математической функции Безье, а также значения пошаговой функции. Все эти значения аналогичны принимаемым значениям анимационного свойства animation-timing-function, которые можно посмотреть (здесь).

Опять же, если необходимо задать сразу несколько параметров перехода, можно использовать универсальное свойство transition, в котором значения соответствующих транзитных свойств могут быть перечислены в любой последовательности через пробел. Если значение какого-нибудь свойства не будет указано, то браузер применит значение по умолчанию. Если указать в качестве значения ключевое слово none, эффект перехода будет отменен.

Контрольные вопросы и задания

1. Какое свойство используется в CSS для установки цвета текста? Может ли использование этого свойства повлиять на цвет границ элемента?
2. Какое свойство отвечает за установку цвета фона? Можно ли использовать в качестве фона элемента изображение?
3. Перечислите значения свойства background-repeat.
4. Как указать начальную позицию фонового изображения в элементе?
5. Имеется ли в CSS возможность масштабирования фонового изображения? Если да, то перечислите значения соответствующего свойства.
6. Как задать для элемента область, которая будет использоваться для фона?
7. При помощи какого свойства можно управлять поведением фонового изображения при прокрутке страницы или элемента?
8. Для чего используется свойство background-origin? Перечислите принимаемые им значения.
9. Можно ли задать сразу несколько характеристик фона в одном свойстве?
10. Для чего используются функции linear-gradient() и radial-gradient()? Опишите их.
11. Для чего используется правило @frames? Как связать его с нужным набором анимационных свойств?
12. Перечислите свойства, которые задают задержку перед анимацией, дительность анимации и количество циклов анимации.
13. Как задать нужное направление и плавность анимации?
14. Опишите свойства animation-play-state и animation-fill-mode.
15. Опишите универсальное свойство, при помощи которого можно задать сразу несколько характеристик анимации.
16. Для чего используются транзитные свойства? Перечислите их.
17. К камим элементам разрешается применять анимационные и транзитные свойства?

Словарь новых английских слов

transparent [tranˈspar(ə)nt] – прозрачный, просвечивающийся.
repeat [rɪˈpiːt] – повторять.
cover [ˈkʌvə] – покрывать, накрывать, прятать.
contain [kənˈteɪn] – вмещать, содержать.
fixed [fɪkst] – неподвижный, закрепленный.
scroll [skrəʊl] – прокрутить, прокрутка.
local [ˈləʊk(ə)l] – местный, локальный.
origin [ˈɒrɪdʒɪn] – источник, начало, исходная точка.
attachment [əˈtatʃm(ə)nt] – прикрепление, привязанность.
clip [klɪp] – урезать, обрезать.
linear [ˈlɪnɪə] – линейный.
radial [ˈreɪdɪəl] – радиальный, лучевой.
gradient [ˈɡreɪdɪənt] – градиент, уклон.
closest [ˈkləʊsɪst] – ограниченный, закрытый.
farthest [ˈfɑːðɪst] – самый удаленный.
side [saɪd] – стенка, сторона.
corner [ˈkɔːnə] – угол.
duration [djʊˈreɪʃ(ə)n] – продолжительность, длительность.

delay [dɪˈleɪ] – задержка, отсрочка.
iteration [ɪtəˈreɪʃ(ə)n] – повтор, итерация.
count [kaʊnt] – счет, подсчет, итог.
infinite [ˈɪnfɪnɪt] – бесконечный.
direction [dɪˈrɛkʃ(ə)n] – направление.
alternate [ɔːlˈtɜːnət] – чередоваться, колебаться.
reverse [rɪˈvəːs] – направленный в обратную сторону.
ease [iːz] – легкость, свобода.
step [step] – шаг.
end [end] – конец.
state [steɪt] – состояние, положение.
running [ˈrʌnɪŋ] – бегущий.
paused [pɔːzd] – поставленный на паузу.
backwards [ˈbakwədz] – назад, в обратном направлении.
forward [] – вперед, дальше.
both [bəʊθ] – оба.
property [ˈprɒpəti] – свойство.
transition [tranˈzɪʃ(ə)n] – переход.

belarusweb.net © Петр Романовский, Минск, 2016.