CSS :: Установка фона
- Фон элемента, css-свойства background-color и background-image
- Повторение фона, css-свойство background-repeat
- Стартовая позиция фона, css-свойство background-position
- Масштабирование фона, css-свойство background-size
- Выделение области под фон, css-свойство background-clip
- css-свойство background-attachment
- css-свойство background-origin
- Сокращенное css-свойство background
- css-функции linear-gradient() и repeating-linear-gradient()
- css-функции radial-gradient() и repeating-radial-gradient()
- Использование фильтров изображений
Фон элемента, css-свойства
background-color и background-image
Для установки фона в CSS присутствует целая группа свойств, отвечающая за его внешний вид и другие характеристики. При этом фон может охватывать как содержимое элемента, так и его границы.
Цвет фона определяется при помощи ненаследуемого свойства background-color, которое принимает те же значения цвета, что и свойство color. Также в качестве фона разрешается использовать изображения. Для этого нужно использовать свойство background-image, которое в качестве значений принимает путь к одному или нескольким файлам изображений, перечисляемых через запятую в формате {background-image: url("path_1"), url("path_2"), ...}, где путь, опять же, можно писать как в кавычках, так и без них. Если фоновых изображений указывается несколько, то приоритет будет отдаваться первым из них, т.е. изображения, указанные впереди, будут располагаться выше остальных в порядке своего перечисления в значении свойства. Отметим, что в качестве значения фонового изображения может использоваться ключевое слово none, которое отменяет установку фона. Браузеры используют это значение по умолчанию, а также в случае, если фоновое изображение по каким-либо причинам не может быть загружено. Для исключения таких ситуаций разрешается одновременное использование свойств background-color и background-image (см. пример №1). В этом случае фон будет отображаться до момента полной загрузки фонового изображения или вместо него из-за невозможности установки изображения в качестве фона элемента.
htmlCodes
<!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("images/balls_2015.jpg");
}
</style>
</head>
<body>
<p class="background_1">
Данный абзац имеет желтый фон.
</p>
<p class="background_2">
По умолчанию фоновое изображение располагается браузером в левом
верхнем углу и затем повторяется по вертикали и горизонтали.
Если изображение не будет загружено, то будет использован синий фон,
заданный в свойстве background-color.
</p>
</body>
</html>
Пример №1. Установка фона элемента
Повторение фона,
css-свойство background-repeat
Когда браузер устанавливает изображение в качестве фона элемента, он, по умолчанию, размещает его в верхнем левом углу и затем тиражирует по вертикали и горизонтали до заполнения выделенной под фон области элемента. Если нужно изменить такое поведение браузера, следует использовать ненаследуемое свойство background-repeat (см. пример №2), которое может принимать следующие значения:
- repeat – используется браузером по умолчанию, повторяя изображение по вертикали и горизонтали;
- repeat-x – изображение повторяется только по горизонтали;
- repeat-y – изображение повторяется только по вертикали;
- no-repeat – изображение не повторяется;
- space – изображение повторяется таким образом, чтобы полностью заполнить область; если же это не удаётся, между картинками добавляется пустое пространство;
- round – изображение повторяется таким образом, чтобы в области поместилось целое число рисунков; если же это не удаётся, фоновые рисунки масштабируются.
Отметим, что допустимо указывать через пробел сразу два значения: первое ключевое слово задаёт повторение по горизонтали, второе – по вертикали. При этом ключевыми словами не должны быть repeat-x или же repeat-y.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Повторение фона</title>
<style>
p{
width: 310px;
height: 100px;
border: solid 2px red;
background-color: yellow;
background-image: url("images/cabinet.png");
}
.repeat_1{
background-repeat: repeat-x;
}
.repeat_2{
background-repeat: no-repeat round;
}
</style>
</head>
<body>
<p class="repeat_1"> </p>
<p class="repeat_2"> </p>
</body>
</html>
Пример №2. Использование свойства background-repeat
Стартовая позиция фона,
css-свойство background-position
Чтобы указать браузеру, где ему следует разместить фоновое изображение, следует использовать ненаследуемое свойство background-position, которое определяет начальное положение фонового изображения (см. пример №3). Свойство может принимать как одну пару значений (или одиночное значение), так и несколько пар значений (или одиночных значений), разделяемых запятой для каждого изображения, указанного в значении свойства 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% и т.д.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство background-position</title>
<style>
.background_1{
width: 400px;
height: 80px;
border: solid 2px red;
background-color: yellow;
background-repeat: no-repeat;
background-image: url("images/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>
Пример №3. Использование свойства background-position
В конце пункта добавим, что в случаях, когда нужно изменить начальное положение фонового изображения только по горизонтали либо только по вертикали, можно использовать ненаследуемые свойства background-position-x и background-position-y.
Масштабирование фона,
css-свойство background-size
Имеется в CSS и возможность масштабирования фонового изображения, которая осуществляется за счет использования ненаследуемого свойства background-size (см. пример №4), задающего необходимые размеры изображения в зависимости от принимаемых значений:
- auto – не изменяет исходный размер изображения, используется браузером по умолчанию;
- размеры – пара значений, указываемых через пробел, определяют ширину и высоту фонового изображения в любых доступных в CSS единицах измерения; если будет указано только одно значение, т.е. ширина, то высоту браузер рассчитает автоматически с сохранением пропорций изображения;
- % – пара значений, но указанных в процентах; первое значение определяет ширину фонового изображения относительно ширины элемента, а второе определяет его высоту относительно высоты элемента; если будет указано только одно значение, браузер будет рассчитывать размеры относительно ширины элемента;
- cover – изображение будет масштабировано с сохранением пропорций под размеры элемента, при этом часть изображения может быть обрезано в зависимости от размеров ширины и высоты как фонового изображения, так и самого элемента;
- contain – изображение будет масштабировано с сохранением пропорций таким образом, чтобы полностью поместиться внутри элемента, при этом изображение нигде не обрезается, но необязательно покрывает всю необходимую фоновую область элемента.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Масштабирование фонового изображения</title>
<style>
p{
width: 400px;
height: 80px;
border: solid 2px red;
background-color: yellow;
background-repeat: no-repeat;
background-image: url("images/balls_2015.jpg");
}
.size_1{background-size: cover;}
.size_2{background-size: contain;}
.size_3{background-size: 20%;}
</style>
</head>
<body>
<p class="size_1">
cover - высота изображения больше его ширины,
поэтому по ширине изображение приняло ширину
элемента, а по высоте было обрезано по высоте элемента.
</p>
<p class="size_2">
contain - фоновое изображение полностью поместилось
в пределах элемента, но часть площади элемента не
была покрыта фоновым изображением.
</p>
<p class="size_3">
20% - ширина и высота фонового изображения равны
20% от ширины элемента.
</p>
</body>
</html>
Пример №4. Использование свойства background-size
Выделение области под фон,
css-свойство background-clip
Чтобы указать браузеру какую область элемента следует использовать для фона, используется ненаследуемое свойство background-clip (см. пример №5), принимающее следующие значения:
- border-box – под фон отводится вся площадь элемента, включая внутренние отступы и границы; эффект от применения этого значения будет заметен, если границы будут прозрачными или, например, пунктирными;
- padding-box – под фон отводится вся площадь элемента до самых границ, но не включая их;
- content-box – под фон отводится только область содержимого элемента, не включая отступы и границы.
Отметим, что разрешается указывать через запятую несколько значений в случае использования более одного фонового изображения.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Выделение области под фон</title>
<style>
p{
padding: 3em;
margin-top: 4em;
width: 300px;
height: 100px;
border: dashed 20px green;
background-size: cover;
background-image: url("images/balls_2015.jpg");
}
.background_1{
background-origin: border-box;
background-clip: border-box;
}
.background_2{
background-clip: padding-box;
background-origin: padding-box;
}
.background_3{
background-clip: content-box;
background-origin: content-box;
}
</style>
</head>
<body>
<p class="background_1">
background-clip: border-box<br>
background-origin: border-box
</p>
<p class="background_2">
background-clip: padding-box<br>
background-origin: padding-box
</p>
<p class="background_3">
background-clip: content-box<br>
background-origin: content-box
</p>
</body>
</html>
Пример №5. Использование свойства background-size
css-свойство background-attachment
Для управления поведением фонового изображения при прокрутке элемента, используется ненаследуемое свойство background-attachment (см. пример №6). Оно может принимать следующие значения:
- fixed – фоновое изображение фиксируется относительно верхнего левого угла области просмотра окна браузера и не перемещается при прокрутке содержимого страницы или элемента;
- scroll – при прокрутке содержимого страницы фоновое изображение будет перемещаться вместе со своим элементом, при этом относительно своего элемента изображение будет фиксировано; значение используется браузерами по умолчанию;
- local – фоновое изображение фиксируется не относительно элемента, а относительно его содержимого, поэтому при прокрутке содержимого страницы, оно будет перемещаться вместе с элементом, но стоит начать прокручивать содержимое самого элемента, фоновое изображение начнет перемещаться вместе с содержимым.
Опять же, разрешается указывать через запятую несколько значений в случае использования более одного фонового изображения.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство background-attachment</title>
<style>
p{
overflow-y: scroll;
padding: 10px;
width: 500px;
height: 200px;
border: solid 3px green;
background-size: cover;
background-image: url("images/balls_2015.jpg");
}
.background_1{
background-attachment: scroll;
}
.background_2{
background-attachment: fixed;
}
.background_3{
background-attachment: local;
}
</style>
</head>
<body>
<p class="background_1">
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
</p>
<p class="background_2">
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed<br>
</p>
<p class="background_3">
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
background-attachment: local<br>
</p>
<div style="height: 1700px;">
Блок добавлен для появления прокрутки
в окне браузера или фрейме.<br>
Внимательно поюзайте прокрутку фрема и
самих блоков.
</div>
</body>
</html>
Пример №6. Использование свойства background-attachment
css-свойство background-origin
Чтобы указать браузеру относительно чего нужно позиционировать фоновое изображение внутри элемента, используется ненаследуемое свойство background-origin (см. пример №7), которое не применяется, если значение свойства background-attachment указано, как fixed. Перечислим значения, принимаемые свойством:
- border-box – фоновое изображение позиционируется относительно левого верхнего угла элемента, включая содержимое, отступы и границы, при этом часть изображения может перекрываться линиями границ элемента;
- padding-box – фоновое изображение позиционируется относительно левого верхнего угла области, включающей содержимое и внутренние отступы элемента, но не включающей границы элемента;
- content-box – фоновое изображение позиционируется относительно левого верхнего угла области содержимого элемента (прямоугольная область без учета отступов и границ).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Позиционирование фона</title>
<style>
p{
padding: 3em;
width: 200px;
min-height: 40px;
border: dashed green 12px;
background-color: yellow;
background-repeat: no-repeat;
background-image: url("images/cabinet.png");
}
.background_origin_1{background-origin: border-box;}
.background_origin_2{background-origin: padding-box}
.background_origin_3{background-origin: content-box}
</style>
</head>
<body>
<p class="background_origin_1">border-box</p>
<p class="background_origin_2">padding-box</p>
<p class="background_origin_3">content-box </p>
</body>
</html>
Пример №7. Использование свойства background-origin
Сокращенное css-свойство background
Опять же, в CSS для одновременного определения сразу нескольких характеристик фона присутствует ненаследуемое сокращенное свойство background. В качестве значений свойства можно в любом порядке через пробел задать значения свойств background-color, background-image, background-position, background-repeat, background-attachment, background-size, background-origin и background-clip (см. пример №8). Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию.
Свойства background-position и background-size принимают свои значения в одном и том же формате. Поэтому, если необходимо задать значение свойства background-size, оно должно указываться через слеш / после значения свойства background-position. Если задано только одно значение, браузер считает, что задано значение свойства background-position.
Кроме того, свойства background-origin и background-clip имеют одни и те же название ключевых слов, принимаемых в качестве значений. Поэтому в случае, когда в элементе установлены как фоновое изображение, так и фон, браузер будет считать, что заданы оба свойства, выделяя соответствующую область элемента под фон и позиционируя соответствующим образом фоновое изображение. Задавать через пробел или слеш / значения обоих свойств не разрешается.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Установка фона</title>
<style>
p{
padding: 10px;
width: 600px;
height: 60px;
border: dotted 6px red;
}
.background_1{
background: #00ff00 fixed padding-box;
}
.background_2{
background: no-repeat #00ff00 content-box 100px 30px/15px 15px
url("images/cabinet.png");
}
.background_3{
background: no-repeat #00ff00 content-box
url("images/cabinet.png");
}
</style>
</head>
<body>
<p class="background_1">
#00ff00 fixed padding-box
</p>
<p class="background_2">
no-repeat #00ff00 content-box <br>
100px 30px/15px 15px url("images/cabinet.png")
</p>
<p class="background_3">
no-repeat #00ff00 content-box url("images/cabinet.png")
</p>
</body>
</html>
Пример №8. Использование сокращенного свойства background
css-функции linear-gradient() и repeating-linear-gradient()
Отдельно отметим, что красивого визуального эффекта фона можно добиться за счет использования функций linear-gradient() и radial-gradient(), которые могут использоваться в качестве значений в свойствах background и background-image и добавляют, соответственно, линейный и радиальный градиент к фону изображения.
Функция linear-gradient() имеет довольно сложный синтаксис, однако довольно проста в использовании.
linear-gradient(
[<угол> | to <направление>]?,
<цвет> <стоп-позиция>?,
[<стоп-позиция>?, <цвет> <стоп-позиция>?]#
), где
- <угол> – угол наклона градиентной прямой, проходящей через центр элемента, который отсчитывается относительно вертикальной прямой. При этом значение угла может быть как положительным (отсчет ведется по часовой стрелке), так и отрицательным (отсчет ведется против часовой стрелки). После числового значения сразу и без пробела должно записываться обозначение единицы измерения deg (например, 30deg). Значению 0deg соответствует направление градиента снизу вверх, а значению 90deg - слева направо.
-
<направление> – направление градиента, которое задается комбинацией допустимых ключевых слов и
может использоваться вместо указания значения угла:
- to top – направление градиента снизу вверх (0deg);
- to top right – направление градиента от нижнего левого угла к верхнему правому;
- to right – направление градиента слева направо (90deg);
- to bottom right – направление градиента от верхнего левого угла к нижнему правому;
- to bottom – направление градиента сверху вниз (180deg);
- to bottom left – направление градиента от верхнего правого угла к нижнему левому;
- to left – направление градиента справа налево (270deg);
- to top left – направление градиента от нижнего правого угла к верхнему левому.
- <цвет> – цвет в любой доступной в CSS цветовой модели (смотреть).
- <стоп-позиция> – координаты точки на градиентной прямой в любых доступных в CSS единицах измерения (смотреть), а также процентах, по достижении которой браузер начнет создавать переход от текущего цвета к следующему в списке. При этом, если два соседних цвета в списке идентичны, то их стоп-позиции разрешается указывать через пробел после требуемого цвета. Например, вместо linear-gradient(0deg, red 10%, red 35%, blue 100%) можно сокращенно записать linear-gradient(0deg, red 10% 35%, blue 100%). Более того, можно вообще не указывать стоп-позиции или указывать только некоторые из них. В таких случаях браузер будет равномерно распределять позиции всех цветов, попадающих в соответствующие промежутки.
Таким образом, функция linear-gradient() принимает в качестве аргументов угол или ключевое слово, обязательное стартовое значение цвета и, как минимум, одно обязательное конечное значение цвета (см. пример №9). При этом разрешается через запятую указывать несколько цветов, в случае необходимости дополняя их через пробел точками остановки. Например, запись linear-gradient(30deg, #000000 10%, #ffffff 100%) создает линейный градиент цвета от черного к белому с соответствующими точками остановки вдоль градиентной прямой, которая расположена под углом в 30 градусов относительно вертикальной прямой.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Функция linear-gradient()</title>
<style>
p{
width: 500px;
height: 100px;
margin: 4em;
padding: 10px;
}
.background_1{
background: linear-gradient(90deg, #ff0000 10%, #00ff00 20%, #0000ff 100%);
}
.background_2{
background: linear-gradient(to top, #000000, #ffffff);
}
.background_3{
background: linear-gradient(225deg, #000000, #ffffff);
}
.background_4{
background: linear-gradient(to bottom left, #000000, #ffffff);
}
.background_5{
background: linear-gradient(to right, red 20%, orange 20% 40%,
yellow 40% 60%, green 60% 80%, blue 80%);
}
</style>
</head>
<body>
<p class="background_1">
Несколько значений указываются через запятую: <br>
linear-gradient(90deg, #ff0000 10%, #00ff00 20%, #0000ff 100%)
</p>
<p class="background_2">
linear-gradient(to top, #000000, #ffffff)
</p>
<p class="background_3">
linear-gradient(225deg, #000000, #ffffff)
</p>
<p class="background_4">
linear-gradient(to bottom left, #000000, #ffffff)
</p>
<p class="background_5">
Небольшая палитра (не поллитра!).
</p>
</body>
</html>
Пример №9. Использование функции linear-gradient()
В конце пункта добавим, что для создания бесконечно повторяющегося линейного градиента можно использовать функцию repeating-linear-gradient(), которая принимает те же значения, что и функция linear-gradient().
css-функции radial-gradient() и repeating-radial-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 от центра эллипса. Остальная площадь элемента, отведенная под фон, если градиентная область не покрывает ее всю, будет залита серым цветом. Внимательно и неторопясь изучите пример №10, в котором показано использование функции. Обратите внимание, что рассмотренное нами значение функции было использовано для создания фона первого абзаца.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>Функция radial-gradient()</title>
<style>
p{
width: 500px;
height: 300px;
padding: 10px;
margin: 4em;
border: solid 3px black;
}
.background_1{
background: radial-gradient(150px 100px at 50% 50%,
#ffffff 2px, #000000 30px, #dddddd 70px);
}
.background_2{
background: radial-gradient(150px 100px at 50% 50%,
#ffffff, #000000 100px, #dddddd 200px);
}
.background_3{
background: radial-gradient(550px 200px at 30% 50px,
#ffffff 20%, #000000 70%, #dddddd);
}
.background_4{
background: radial-gradient(300px 250px at 40% 100px,
#ffffff, #000000, #dddddd);
}
</style>
</head>
<body>
<p class="background_1">
150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px
</p>
<p class="background_2">
150px 100px at 50% 50%, #ffffff, #000000 100px, #dddddd 200px
</p>
<p class="background_3">
550px 200px at 30% 50px, #ffffff 20%, #000000 70%, #dddddd
</p>
<p class="background_4">
300px 250px at 40% 100px, #ffffff, #000000, #dddddd
</p>
</body>
</html>
Пример №10. Использование функции radial-gradient()
Если вместо двух радиусов указать только один, то будет задан градиент круглой формы, а в случае отсутствия значений градиент заполнит всю отведенную под фон область элемента. Вместо радиусов a и b разрешается использовать ключевые слова circle и ellipse. Первое из них задает радиальный градиент круглой формы, а второй используется по умолчанию и задает радиальный градиент эллиптической формы. В случае использования данных ключевых слов размеры эллипса (круга) либо не указываются вообще, либо через пробел используются следующие ключевые слова:
- closest-side – для круга радиус будет равен расстоянию от центра круга до ближайшей стороны элемента; для эллипса радиус a будет равен расстоянию от центра до ближайшей левой или правой стороны, а для радиуса b – до ближайшей верхней или нижней стороны элемента;
- farthest-side – для круга радиус будет равен расстоянию от центра круга до самой удаленной стороны элемента; для эллипса радиус a будет равен расстоянию от центра до более удаленной левой или правой стороны, а для радиуса b – до более удаленной верхней или нижней стороны элемента;
- closest-corner – для круга радиус будет равен расстоянию от центра круга до вершины ближайшего угла элемента; для эллипса радиусы вычисляются на основании расстояния от его центра до вершины ближайшего угла элемента;
- farthest-corner – данное значение используется по умолчанию в случае, когда ключевое слово не указано; для круга радиус будет равен расстоянию от центра круга до вершины самого дальнего угла элемента; для эллипса радиусы вычисляются на основании расстояния от его центра до самого дальнего угла элемента.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ключевые слова в radial-gradient()</title>
<style>
p{
width: 500px;
height: 150px;
padding: 10px;
margin: 1.5em;
border: solid 3px black;
color: #DDD;
}
.background_1{
background: radial-gradient(circle closest-side at
30% 40%, #ffffff, #000000);
}
.background_2{
background: radial-gradient(ellipse closest-side at
30% 40%, #ffffff, #000000);
}
.background_3{
background: radial-gradient(circle closest-corner at
30% 40%, #ffffff, #000000);
}
.background_4{
background: radial-gradient(ellipse closest-corner at
30% 40%, #ffffff, #000000);
}
.background_5{
background: radial-gradient(circle farthest-corner at
30% 40%, #ffffff, #000000);
}
.background_6{
background: radial-gradient(ellipse farthest-corner at
30% 40%, #ffffff, #000000);
}
</style>
</head>
<body>
<p class="background_1">
radial-gradient(circle closest-side at
30% 40%, #ffffff, #000000)
</p>
<p class="background_2">
radial-gradient(ellipse closest-side at
30% 40%, #ffffff, #000000)
</p>
<p class="background_3">
radial-gradient(circle closest-corner at
30% 40%, #ffffff, #000000)
</p>
<p class="background_4">
radial-gradient(ellipse closest-corner at
30% 40%, #ffffff, #000000)
</p>
<p class="background_5">
radial-gradient(circle farthest-corner at
30% 40%, #ffffff, #000000)
</p>
<p class="background_6">
radial-gradient(ellipse farthest-corner at
30% 40%, #ffffff, #000000)
</p>
</body>
</html>
Пример №11. Использование ключевых слов в функции 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%).
Что касается позиций цветов относительно центра радиальной области, то их можно не указывать или указывать только некоторые из них. В таких случаях браузер будет равномерно распределять позиции всех цветов, попадающих в соответствующие промежутки (см. пример №10).
Опять же добавим, что для создания бесконечно повторяющегося радиального градиента можно использовать функцию repeating-radial-gradient(), которая принимает те же значения, что и функция radial-gradient().
Использование фильтров изображений
Помимо добавления красивых градиентов CSS предоставляет и возможность наложения различных фильтров на изображения. Для этого предусмотрено ненаследуемое css-свойство filter, которое устанавливает для элемента визуальный эффект (фильтр), например, размытие или изменение цвета. Фильтры обычно используются для регулировки рендеринга изображений, фонов и рамок (см. пример №12).
В качестве значений filter принимает ряд специальных функций фильтров, которые и позволяют добиться наложения различных фильтров на изображение. Перечислим их.
- blur() (от англ. blur – затуманивать) – задаёт размытие элементов по Гауссу. Однако следует помнить, что применять данный фильтр непосредственно к элементу «body» нельзя, только к его потомкам. В качестве значений функция принимает любые доступные в CSS единицы измерения (смотреть). При этом изображение будет размыто тем сильнее, чем больше указанное значение. Отрицательные значения не допускаются, а если значение не указывать вообще, браузер использует значение 0px.
- brightness() (от англ. brightness – яркость) – управляет яркостью элементов. В качестве значений могут использоваться проценты или положительные числа. При этом значения 100% или 1 не изменяют яркость элемента, меньшие 100% или 1 уменьшают яркость элемента, большие 100% или 1 увеличивают яркость элемента. Если значение не указывать вообще, браузер использует значение 1.
- contrast() (от англ. contrast – контрастность) – управляет контрастностью элементов. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 дают однотонную серую картинку, 100% или 1 не изменяют контрастность элемента, меньшие 100% или 1 уменьшают контрастность элемента, большие 100% или 1 увеличивают контрастность элемента. Если значение не указывать вообще, браузер использует значение 1.
-
drop-shadow()
(от англ. drop shadow – падающая тень) –
добавляет тень к элементу. При этом в отличие от свойства box-shadow тень
отбрасывается с учётом прозрачных участков изображения. Функция имеет следующий синтаксис:
filter: drop-shadow(<смещение x> <смещение y> <размытие> <цвет>).
Как видно, в качестве значений функция может принимать несколько параметров, которые должны перечисляться через пробел:
- смещение x – обязательный параметр, который в случае положительных значений смещает тень относительно элемента по горизонтали вправо, а в случае отрицательных значений – влево. Если значение параметра равно нулю, то смещение отсутствует.
- смещение y – обязательный параметр, который в случае положительных значений смещает тень относительно элемента вверх, а в случае отрицательных значений – вниз. Если значение параметра равно нулю, то смещение отсутствует.
- размытие – необязательный параметр, который устанавливает радиус размытия тени. Чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям. Если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром.
- цвет – необязательный параметр, который определяет цвет тени.
- grayscale() (от англ. grayscale – шкала серого) – превращает изображение в черно-белое. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 не изменяют цветность, 100% или 1 превращают элемент полностью в черно-белый, меньшие 100% или 1 линейно уменьшают цветность элемента. Если значение не указывать вообще, браузер использует значение 0.
- hue-rotate() (от англ. rotate – вращать) – изменяет цветность изображения в зависимости от значения угла на цветовом круге. При этом значения 0deg и 360deg не изменяют цветность элемента, а все остальные значения приводят к цветовому сдвигу. Если значение не указывать вообще, браузер использует значение 0deg.
- invert() (от англ. invert – инвертировать, переворачивать) – инвертирует цвета элемента (напоминает процесс превращения фотографии в негатив). В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 не изменяют элемент, 100% или 1 полностью инвертируют цвета элемента, меньшие 100% или 1 инвертируют цвета элемента частично. Если значение не указывать вообще, браузер использует значение 0.
- opacity() (от англ. opacity – непрозрачность) – задаёт степень прозрачности элемента. Фильтр напоминает свойство opacity, однако некоторые браузеры применяют для фильтров аппаратное ускорение, что позволяет повысить их производительность. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 делают элемент полностью прозрачным, 100% или 1 не изменяют прозрачность элемента, меньшие 100% или 1 делают элемент частично прозрачным. Если значение не указывать вообще, браузер использует значение 1.
- saturate() (от англ. saturate – насыщать) – изменяет насыщенность цветов в изображении. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 полностью убирают насыщенность цветов элемента, делая его черно-белым, 100% или 1 не изменяют насыщенность элемента, меньшие 100% или 1 делают элемент менее насыщенным, большие 100% или 1 делают элемент более насыщенным. Если значение не указывать вообще, браузер использует значение 1.
- sepia() (от англ. sepia – сепия) – позволяет превратить элемент в сепию, т.е. чёрно-белое изображение с коричневым оттенком, придающем фотографии старинный вид. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 не изменяют элемент, 100% или 1 полностью превращают элемент в сепию, меньшие 100% или 1 производят частичный эффект. Если значение не указывать вообще, браузер использует значение 0.
- url() – задает путь к XML файлу, который содержит необходимые фильтры.
- none – отменяет действие всех фильтров, используемых для элемента.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Использование свойства filter</title>
<style>
div{
display: inline-block;
width: 210px;
height: 160px;
padding: 20px;
margin: 0.7em;
border: 5px solid violet;
background: url(balls.jpg);
font-weight: bold;
color: #550000;
}
.blur_filter{filter: blur(0.1em);}
.brightness_filter{filter: brightness(120%);}
.contrast_filter{filter: contrast(50%);}
.shadow_filter{filter: drop-shadow(10px 5px 20px blue);}
.gray_filter{filter: grayscale(90%);}
.hue_filter{filter: hue-rotate(90deg);}
.invert_filter{filter: invert(0.7);}
.opacity_filter{filter: opacity(70%);}
.saturate_filter{filter: saturate(170%);}
.sepia_filter{filter: sepia(0.5);}
</style>
</head>
<body>
<div>Исходный элемент</div>
<div class="blur_filter">filter: blur(1em)</div>
<br><br>
<div>Исходный элемент</div>
<div class="brightness_filter">filter: brightness(120%)</div>
<br><br>
<div>Исходный элемент</div>
<div class="contrast_filter">filter: contrast(50%)</div>
<br><br>
<div>Исходный элемент<br><br></div>
<div class="shadow_filter">filter: drop-shadow(10px 5px 20px blue)</div>
<br><br>
<div>Исходный элемент</div>
<div class="gray_filter">filter: grayscale(90%)</div>
<br><br>
<div>Исходный элемент</div>
<div class="hue_filter">filter: hue-rotate(90deg)</div>
<br><br>
<div>Исходный элемент</div>
<div class="invert_filter">filter: invert(0.7)</div>
<br><br>
<div>Исходный элемент</div>
<div class="opacity_filter">filter: opacity(70%)</div>
<br><br>
<div>Исходный элемент</div>
<div class="saturate_filter">filter: saturate(170%)</div>
<br><br>
<div>Исходный элемент</div>
<div class="sepia_filter">filter: sepia(0.5)</div>
<br><br>
</body>
</html>
Пример №12. Использование свойства filter
Быстрый переход к другим страницам
- Установка цвета
- Установка фона
- Анимация в CSS
- Вернуться к оглавлению учебника