Установка фона и градиента

Изучаем новые свойства фона

Наряду с градиентами и несколькими фоновыми изображениями, CSS3 представил три новых свойства: background-size, background-clip и background-origin.

Свойство background-size позволяет изменить размер фонового изображения, в то время как свойства background-clip и background-origin позволяют контролировать, как фоновое изображение обрезается и где фоновое изображение располагается в элементе (внутри border или внутри padding, например).

background-size

Свойство background-size позволяет указать размер фонового изображения. Это свойство принимает несколько значений, в том числе размер и ключевые слова.

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

Важно отметить, что процентная запись связана с размером элемента, а не с исходным размером фоновой картинки

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

Ключевое слово auto может быть задействовано в качестве значения ширины или высоты, чтобы сохранить пропорции фонового изображения. Так, если мы хотим установить высоту фоновой картинки на 75% от высоты элемента при сохранении её пропорций, то можем задать значение background-size как auto 75%.

Ключевые слова cover и contain

В дополнение к размерам свойство background-size также допускает ключевые слова cover и contain.

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

Ключевое слово contain, с другой стороны, указывает, что фоновое изображение будет изменено, чтобы целиком вписаться в ширину и высоту элемента. При этом исходное соотношение сторон фоновое изображение будет сохранено, но картинка будет растягиваться или сжиматься по мере необходимости, чтобы остаться в пределах ширины и высоты элемента. В отличие от cover, ключевое слово contain всегда показывает полное фоновое изображение, при этом зачастую оно не будет занимать всю доступную площадь элемента.

Значения cover и contain могут привести к небольшим искажениям фоновых изображений, особенно, когда картинка растягивается за пределами своих исходных размеров. Мы должны следить за этим при использовании данных значений и убедиться, что стили в результате являются подходящими.

background-clip и background-origin

Свойство background-clip определяет площадь поверхности, которую охватывает фоновое изображение, а свойство background-origin определяет, откуда должно начинаться background-position. Внедрение этих двух новых свойств связано с внедрением трёх новых значений: border-box, padding-box и content-box. Каждое из этих трёх значений может быть использовано для свойств background-clip и background-origin.

Значение свойства background-clip по умолчанию устанавливается как border-box, что позволяет фоновому изображению расширяться в область границ. Между тем, свойство background-origin по умолчанию устанавливается как padding-box, что позволяет фоновому изображению начинаться там же, где и padding у элемента.

Рис. 7.04. Значение border-box расширяет фон до границ элемента

Рис. 7.05. Значение padding-box расширяет фон до padding у элемента, но фон при этом находится внутри границ

Рис. 7.06. Значение content-box содержит фон внутри padding и border у элемента

Мы уже обсуждали значения этих ключевых слов, когда рассматривали свойство box-sizing в уроке 4, «Открываем блочную модель». Смысл самих значений не изменился, но их функции меняются при использовании разных свойств фона.

Подготовка градиентов к печати

Как добавить и изменить цвет фона в html

Во-первых, лучше сразу перевести макет в цветовое пространство CMYK, потому что некоторых цветов из модели RGB в модели CMYK нет.

О том, почему не все цвета RGB воспроизводятся в CMYK и почему не все цвета CMYK можно получить в RGB, читайте .

Переключение в режим CMYK в разных редакторах отличается, но мы остановим свой выбор на Adobe Illustrator как одной из самых популярных программ для графического дизайна и допечатной подготовки. Поэтому, открыв файл, выберите меню «Файл», перейдите в пункт «Цветовой режим документа» и кликните по CMYK.

Скриншот программы Adobe Illustrator. Изображение: Александр Кароза

Далее надо позаботится о том, чтобы градиент при печати не стал «ступенчатым». Иногда возникает неприятная ситуация, когда градиент на экране отображается нормально, но при печати вместо плавных переходы получаются резкими.

Некоторые специалисты по допечатной подготовке советуют растрировать градиент. По умолчанию градиент — элемент векторной графики, то есть код, который финальное устройство интерпретирует в графику. Некоторые принтеры плохо справляются с печатью таких градиентов. В случае растрирования градиент превратится в картинку ещё в графическом редакторе — каждый его пиксель будет иметь свой цвет.

В Adobe Illustrator для растрирования нужно выделить объект с градиентом, затем перейти в меню «Объект» и выбрать «Растрировать…», после чего нажать на ОК.

Скриншот программы Adobe Illustrator. Изображение: Александр Кароза

В дополнение к растрированию также рекомендуют добавить шум — он смажет градиент и сделает его более равномерным.

В Adobe Illustrator для добавления шума нужно выделить объект, затем перейти в меню «Эффект», выбрать в нем «Текстура» и затем «Зерно». В появившемся окне выставите степень зернистости и нажмите ОК.

Скриншот программы Adobe Illustrator. Изображение: Александр Кароза

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

Линейный градиент

Основы работы с фоном

Линейный градиент распространяется по прямой линии, демонстрируя плавный переход от одного оттенка цвета к другому. Линейный градиент создаётся с помощью функции linear-gradient(). Функция создаёт изображение, которое представляет собой линейный градиент между указанными оттенками цветов. Размер градиента соответствует размеру элемента, к которому он применён.

Функция linear-gradient() принимает следующие, разделяемые запятой, аргументы:

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

Простейший линейный градиент требует только два аргумента, определяющие начальный и конечный цвет:

div {
  background-image: linear-gradient(black, white);
  width: 200px;
  height: 200px;
}

Попробовать »

При передаче функции двух аргументов устанавливается вертикальный градиент с начальной точкой сверху.

Направление линии градиента может быть определено двумя способами:

Использование градусов: В качестве первого аргумента можно передать градус угла линии градиента, определяющий направление градиента, так например, угол 0deg (deg сокращение от англ degree — градус) определяет линию градиента от нижней границы элемента к верхней, угол 90deg определяет линию градиента слева на право и т.д. Проще говоря, положительные углы представляют собой вращение по часовой стрелке, отрицательные соответственно против часов.
Использование ключевых слов: В качестве первого аргумента могут также передаваться ключевые слова «to top», «to right», «to bottom» или «to left», они представляют собой углы линий градиентов «0deg» «90deg» «180deg» «270deg» соответственно.
Угол можно так же задать с помощью двух ключевых слов, например, to top right — линия градиента направлена в верхний правый угол.

Пример градиента заданного в разных направлениях:

div { 
  margin: 10px;
  width: 200px;
  height: 200px;
  float: left;
}
#one { background-image: linear-gradient(to left, black, red); }
#two { background-image: linear-gradient(to top left, black, red); }
#three { background-image: linear-gradient(65deg, black, yellow); }

Попробовать »

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

div { 
  margin: 10px;
  width: 200px;
  height: 200px;
  float: left;
}
#one { background-image: linear-gradient(to right, red, blue, yellow); }
#two { background-image: linear-gradient(to top left, blue, white, blue); }

Попробовать »

После цвета допускается указывать стоп позицию для него, которая определяет место расположение цвета (где один цвет начинает переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента. Значение 0% является начальной точкой градиента, 100% — конечной.

div { 
  margin: 10px;
  width: 200px;
  height: 200px;
  float: left;
}
#one { background-image: linear-gradient(to top right, blue, white 70%, blue); }
#two { background-image: linear-gradient(to right bottom, yellow 10%, white, red, black 90%);}
#three { background-image: linear-gradient(to right, black 10%, yellow, black 90%); }

Попробовать »

Значение цвета можно указывать различными способами, например: указать имя цвета, использовать (HEX), с помощью синтаксиса (RGBA) или (HSLA). Например, использование градиента с прозрачностью может быть использовано в сочетании с фоновым цветом или изображением, расположенным под градиентом для создания интересных визуальных эффектов:

div { 
  margin: 10px;
  width: 300px;
  height: 100px;
  background-color: green;
}
#one { background: linear-gradient(to left, rgb(255,255,0), rgba(255,255,0,0)); }
#two { background: linear-gradient(rgb(255,255,255), rgba(255,255,255,0)); }

Попробовать »

CSS Linear Gradients

5 сервисов для замены фона фотографии в режиме онлайн

To create a linear gradient you must define
at least two color stops. Color stops are the colors you want to render smooth transitions
among. You can also set a starting point and a direction (or an angle) along
with the gradient effect.

Syntax

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

Direction — Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:

top to bottom (default)

#grad { background-image: linear-gradient(red, yellow);}

Direction — Left to Right

The following example shows a linear gradient that starts from the left. It starts red, transitioning to
yellow:

left to right

#grad { background-image: linear-gradient(to right, red , yellow);}

Direction — Diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

The following example shows a linear gradient that starts at top left (and
goes to bottom right). It starts red, transitioning to yellow:

top left to bottom right

CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, …, last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Radial Gradient — Evenly Spaced Color Stops (this is default)

The following example shows a radial gradient with evenly spaced color stops:

#grad { background-image: radial-gradient(red, yellow, green);}

Radial Gradient — Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color stops:

Линейный градиент (Linear Gradient)

Линейные градиенты изменяются вдоль прямой линии. Чтобы вставить градиент, нужно создать ноду внутри секции SVG файла.

Screenshot	Live sample

Выше находится пример линейного градиента, который применён к элементу Внутри линейного градиента есть несколько <stop> (en-US) нод.. Эти ноды сообщают градиенту, какой цвет он должен использовать в позициях, определённых атрибутом для позиции и атрибутом Это может быть задано прямо в SVG или через CSS. В целях этого примера оба метода были смешаны. Например, Gradient1 начинается с красного цвета, изменяется до прозрачно-чёрного в середине и заканчивается синим цветом. Вы можете вставить столько стоп-цветов, сколько нужно, чтобы создать смесь, которая будет красивой или ужасной, как вам нужно. Границы всегда должны изменяться от 0% (или от 0, если вы хотите опустить знак %) до 100% (или 1). Повторяющиеся значения будут использовать стоп, который будет находится дальше всех по XML-дереву. Также, подобно заливке и обводке, вы можете определить атрибут чтобы задать прозрачность в этой позиции (опять же, в FF3+ можно также использовать rgba-значения для этого).

 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>

Чтобы использовать градиент, мы должны сослаться на него из атрибутов объекта . Это делается таким же образом, как вы ссылаетесь на элементы в CSS, используя . В этом случае, url — это просто ссылка на наш градиент, которому задан уникальный ID, «Gradient». Чтобы добавить его, установим . Наш объект теперь многоцветный. То же самое можно сделать с атрибутом .

Элемент также принимает некоторые другие атрибуты, который определяют размер и внешний вид градиента. Направление градиента контролируется двумя точками, обозначенными атрибутами . Эти атрибуты определяют линию, вдоль которой двигается градиент. По умолчанию градиент имеет горизонтальную ориентацию, но это может быть изменено с помощью этих атрибутов. Gradient2 в примере выше предназначен для создания вертикального градиента.

 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">

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

 <linearGradient id="Gradient1">
   <stop id="stop1" offset="0%"/>
   <stop id="stop2" offset="50%"/>
   <stop id="stop3" offset="100%"/>
 </linearGradient>
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>

Я включил пространство имён xlink прямо в ноду, хотя обычно вы хотели бы определить его в верхней части вашего документа. Подробнее об этом мы поговорим в разделе изображений.

Линейный градиент

Последнее обновление: 21.04.2016

Градиенты представляют плавный переход от одного цвета к другому. В CSS3 имеется ряд встроенных градиентов, которые можно использовать для создания фона элемента.

Градиенты в CSS не представляют какого-то специального свойства. Они лишь создают значение, которое присваивается свойству background-image.

Линейный градиент распространяется по прямой от одного конца элемента к другому, осуществляя плавный переход от одного цвета к другому.

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

background-image: linear-gradient(left,black,white);

В данном случае началом градиента будет левый край элемента, который обозначается значением . Цвета градиента: черный (black)
и белый (white). То есть начиная с левого края элемента до правого будет плавно идти переход из черного цвета в белый.

В использовании градиентов есть один недостаток — многообразие браузеров вынуждает использовать префикс вендора:

-webkit- /* Для Google Chrome, Safari, Microsoft Edge, Opera выше 15 версии  */
-moz- /* Для Mozilla Firefox  */
-o- /* Для Opera старше 15 версии (Opera 12)  */

Так, полноценное использование градиента будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизация таблиц в CSS3</title>
        <style>
		div {
			width: 200px;
			height: 100px;
			background-color: #eee;
			background-image: linear-gradient(left,black,white);
			background-image: -o-linear-gradient(left,black,white);
			background-image: -moz-linear-gradient(left,black,white);
			background-image: -webkit-linear-gradient(left,black,white);
		}
		p{
			margin: 0;
			padding-top: 30px;
			text-align: center;
			color:white;
		}
        </style>
    </head>
    <body>
		<div><p>Линейный черно-белый градиент</p></div>
	</body>
</html>

Для установки начала градиента можно использовать следующие значения: (слева направо), (справа налево),
(сверху вниз) или (снизу вверх). Например, вертикальный градиент будет выглядеть следующим образом:

background-image: linear-gradient(bottom,black,white);

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

background-image: linear-gradient(top left,black,white);

Кроме конкретных значений типа top или left также можно указать угол от 0 до 360, который определит направление градиента:

background-image: linear-gradient(30deg,black,white);

После величины углы указывается слово deg.

К примеру, 0deg означает, что градиент начинается в левой части и перемещается в правую часть, а при указании 45deg он начинается в нижнем
левом углу и перемещается под углом 45° в верхний правый угол.

После определения начала градиента, можно указать применяемых цветов или опрные точки. Цветов не обязательно должно быть два, их может быть и больше:

background-image: linear-gradient(top, red, #ccc, blue);

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

background-image: linear-gradient(left, #ccc, red 20%, red 80%, #ccc);

Повторяющийся градиент

С помощью можно создавать повторяющиеся линейные градиенты. Например:

background-image: repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);
background-image: -moz-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);
background-image: -webkit-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);

В данном случае градиент начинается с левого края элемента с полоски серого цвета (#ccc) шириной 20 пикселей, далее до 30 пикселей
идет переход к красному цвету, а затем до 40 пикселей выполняется обратный переход к светло-синему цвету (rgba(0, 0, 126, .5)).
После этого браузер повторяет градиент, пока не заполнит всю поверхность элемента.

НазадВперед

More Examples

Example

A linear gradient that starts from the left. It starts red, transitioning to blue:

#grad { background-image: linear-gradient(to right, red , blue);}

Example

A linear gradient that starts at top left (and goes to bottom right):

#grad { background-image: linear-gradient(to bottom right, red , blue);}

Example

A linear gradient with a specified angle:

#grad { background-image: linear-gradient(180deg, red, blue);
}

Example

A linear gradient with multiple color stops:

#grad { background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }

Example

A linear gradient with transparency:

#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}

Треугольники (половины ромбов)

Орнамент из треугольников

Рассматриваемый рисунок образован сочетанием четырех линейных градиентов:

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

Выделяем элементы узора

В данном случае мы имеем дело с рисунком, состоящим из конгруэнтных равнобедренных треугольников: их соответствующие углы и стороны равны, и синие треугольники являются зеркальным отражением голубых. Треугольники образованы пересечением параллельных линий, расположенных на одинаковом расстоянии друг от друга горизонтально, либо имеющих наклон по часовой стрелке или против нее. На рисунке показаны все три типа параллельных линий:

Параллельные линии

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

Фрагмент рисунка, полученного с помощью конического градиента с резкими переходами цвета. Линии перехода цвета либо горизонтальны, либо проходят через вершины прямоугольника. Начало градиента сдвинуто относительно вертикальной оси на угол β. См. демо.

На рисунке представлен конический градиент, начало которого смещено относительно начала по умолчанию на угол β. Первый участок градиента (верхний правый маленький треугольник) доходит до угла α, второй участок (нижний правый темный треугольник) — до угла 2·α. Третий участок (нижний светлый треугольник) завершается в точке, соответствующей 180° (50%) относительно начала градиента. Четвертый участок (нижний левый темный треугольник) доходит до угла 180° + α, а пятый (верхний левый светлый треугольник) — до угла 180° + 2·α, тогда как шестой занимает оставшуюся часть круга.

Получаем углы α и β (демо)

Для треугольника, выделенного справа на рисунке, получаем следующее:

Зная ширину (w) и высоту (h) фрагмента рисунка, можно вычислить величины углов α и β:

В результате получаем следующий код, необходимый для отрисовки узора:

Таким образом, получается всего 157 байтов скомпилированного CSS вместо 343. Ниже можно посмотреть результат:

Чтобы увидеть, как рисунок сплющивается и растягивается при различных соотношениях ширины и высоты, вы можете поэкспериментировать с их значениями в Sass-коде.

Существует особый случай, когда величина угла между и 50% () равна , откуда следует, что величина равна , то есть равнобедренные треугольники являются равносторонними. В этом случае объем скомпилированного CSS можно сократить до менее чем 100 байтов за счет применения повторяющегося градиента:

Ниже можно посмотреть демо:

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index