Градиент поверх фоновой картинки в css

Пирамиды

Орнамент из пирамид

В данном примере используются четыре линейных градиента:

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

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

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

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

По умолчанию конические градиенты начинаются в точке, соответствующей положению стрелки часов, указывающей на 12, и далее распределяются по часовой стрелке. Но в нашем случае нужно сдвинуть начальную точку на угол 45° по часовой стрелке, а затем поочередно отрисовать треугольники, каждый из которых занимает четверть (25%) площади квадрата.

Это означает, что узор из пирамид можно сократить следующим образом:

Теперь CSS не только выглядит проще, но и занимает 103 байта вместо 260. Так что количество кода, необходимое для создания фонового орнамента, сократилось более чем вдвое.

Пример можно посмотреть в действии на CodePen:

Let’s Talk About the Why

You know all the good reasons for using gradients in your design – they’re visually appealing, pretty trendy, and all-in-all, make for a great website look. Using a gradient pattern does a lot of the same things, but they can offer you a few exceptional advantages, too.
First off, CSS gradient patterns are super, super lightweight, meaning they aren’t a huge file size and won’t bog down your site with slow loading speeds. It’s also incredibly easy to control with code. This can mean a lot of different things, but mostly, we mean that it’s easy to manipulate and customize. Want to animate it? No problem! How about scale the size and change the colors? Easy. You can also do things like dynamically change patterns on the scroll (a trick we think is pretty cool).

More than that, using CSS gradient patterns on your site will keep everything in the family – by that, we mean you won’t have to manage multiple files. Everything is there in CSS! It’s also easy to overlap and create multiple layers of CSS gradients. Stack them on top of each other for a unique, cool look!

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

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

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

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

Увеличение срока службы парника

Радиальный градиент CSS3

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

Для задания радиального градиента используется следующее CSS свойство:

CSS

background: radial-gradient(цвет1,цвет2);

1	backgroundradial-gradient(цвет1,цвет2);

На первом месте будет стоять цвет, который находится ближе к центру.

Код CSS3 для данного градиента будет выглядеть так:

CSS

.gradient6{
background: radial-gradient(#ffffff,#2F73B6);
background: -ms-radial-gradient(#ffffff, #2F73B6);
background: -moz-radial-gradient(#ffffff, #2F73B6);
background: -webkit-radial-gradient(#ffffff, #2F73B6);
}

1 2 3 4 5 6

.gradient6{ backgroundradial-gradient(#ffffff,#2F73B6); background-ms-radial-gradient(#ffffff,#2F73B6); background-moz-radial-gradient(#ffffff,#2F73B6); background-webkit-radial-gradient(#ffffff,#2F73B6); }

Как видите даный CSS градиент растянуло в форме эллипса. Для того чтобы он был круглым нужно дописать ему параметр circle.
Тогда он примет следующий вид

CSS код градиента будет выглядеть так:

CSS

.gradient7{
background: radial-gradient(circle, #ffffff,#2F73B6);
}

1 2 3

.gradient7{ backgroundradial-gradient(circle,#ffffff,#2F73B6); }

Также для задания радиального градиента в CSS3 есть ещё ряд параметров:

• farthest-corner — при указании данного параметра градиент будет формироваться так что в боке будет отображаться его самый дальний угол.

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

  В CSS коде это выглядит так:

  CSS

  background: radial-gradient(left, circle farthest-corner, #ffffff,#2F73B6);

  1	backgroundradial-gradient(left,circlefarthest-corner,#ffffff,#2F73B6);

• closest-corner – отображает близжайший угол градиента

  CSS код:

  CSS

  background: radial-gradient(left, circle closest-corner , #ffffff,#2F73B6);

  1	backgroundradial-gradient(left,circleclosest-corner,#ffffff,#2F73B6);

• farthest-corner — отображает самый дальний угол градиента

  PHP

  background: radial-gradient(left, circle farthest-corner, #ffffff,#2F73B6);

  1	backgroundradial-gradient(left,circle farthest-corner,#ffffff,#2F73B6);

Поэкспериментировав с разными свойствами и цветами можно получить очень интересные градиенты. Здесь всё зависит от вашей фантазии 🙂

Ограничения

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

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

Позиционирование радиального градиента

Как вы могли заметить из вышерассмотренного примера — все радиальные градиенты (по умолчанию) размещаются от центра элемента.

Начальная позиция радиального градиента – определяется ключевым словом – center, но может быть изменена с использованием единиц измерения длины (например: px или em), процентными значениями и ключевыми словами, которые используются в CSS свойстве background-position, оно отвечает за положение (позицию) фонового изображения:

Значение	Описание
left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Свойство background-position мы с Вами рассматривали при изучении работы с задний фоном элемента (Статья «Работа с фоном элемента в CSS»).

Важным моментом при позиционировании радиальных градиентов является необходимость указывать предлог at перед указанием позиции градиента. Этот предлог является необходимым в современном синтаксисе, а для объявлений, в которых используются вендорные индексы производителей его необходимо опустить (не использовать):

Рис. 134 Синтаксис при позиционировании радиальных градиентов (современный синтаксис).

Рассмотрим пример позиционирования радиального градиента.

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования радиальных градиентов</title>
<style> 
div {
height: 125px; /* устанавливаем высоту элемента */
width: 125px; /* устанавливаем ширину элемента */
display: inline-block; /* устанавливаем, что элементы <div> становятся блочно-строчными (чтобы выстроились в линейку) */
line-height: 125px; /* устанавливаем высоту строки */
text-align: center; /* выравниваем текст по центру */
margin-bottom: .3em; /* устанавливаем внешний отступ снизу 0.3em */
color: white; /* устанавливаем цвет текста */
}
.test {
background-image: radial-gradient(at 5px 45px, green, black); /* позиция по оси x - 5px, по оси y - 45px */
}
.test2 {
background-image: radial-gradient(at 50% top, green, black); /* позиция по оси x - 50, по оси y - ключевое слово top */
}
.test3 {
background-image: radial-gradient(circle at top left, green, black); /* позиция по оси x - ключевое слово top, по оси y - ключевое слово left */
}
.test4 {
background-image: radial-gradient(ellipse at 0% bottom, green, black); /* позиция по оси x - 0%, по оси y - ключевое слово bottom */
}
.test5 {
background-image: radial-gradient(circle at center bottom, green, black); /* позиция по оси x - ключевое слово center, по оси y - ключевое слово bottom*/
}
.test6 {
background-image: radial-gradient(at 100% 100%, green, black); /* позиция по оси x - 100%, по оси y - 100% */
}
</style>
</head>
	<body>
		<div class = "test">at 5px 45px</div>
		<div class = "test2">at 50% top</div>
		<div class = "test3">at top left</div><br>
		<div class = "test4">at 0% bottom</div>
		<div class = "test5">at center bottom</div>
		<div class = "test6">at 100% 100%</div>
	</body>
</html>

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

Результат нашего примера:

Рис. 135 Синтаксис при позиционировании радиальных градиентов.

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

Регистрация в Инстаграме

Зарегистрироваться в сервисе можно напрямую или через Facebook. В первом случае вам нужно указать свою почту или номер телефона, а потом подтвердить регистрацию. Во втором существующие аккаунты автоматически объединяются: достаточно один раз зайти в Инстаграм через вторую соцсеть.

Обратите внимание на то, что в Инстаграме существует 2 типа аккаунтов

1. Личный даёт возможность загружать контент, обрабатывать, общаться с подписчиками, обмениваться сообщениями в Директе.
2. Бизнес-аккаунт привлекает большим количеством функций: можно звонить, переписываться по почте, банить посетителей и модерировать комментарии. Кроме того, здесь доступна аналитика.

Как получить все перечисленные возможности? Вам нужно сначала завести страницу компании на Facebook. А потом уже зарегистрировать бизнес-аккаунт (или придать новый статус личному).

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

Как узнать ИНН онлайн: какие имеются варианты?

Сегодня существует несколько сервисов, позволяющих узнать ИНН через интернет. Рассмотрим основные варианты:

Государственный онлайн-сервис gosuslugi.ru/pgu/fns/findInn. Для получения идентификационного кода хватит минимального объема информации — ФИО лица, точной даты и места рождения. Преимущество сервиса в том, что узнать ИНН онлайн можно не только по паспорту, но и по ряду других документов — виду на жительство, свидетельству о регистрации или свидетельству о рождении. Также могут использоваться и старые документы. При заполнении полей необходимо выбрать из выпадающего перечня подходящий вариант.

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

CSS синтаксис:

background-image / background: repeating-linear-gradient(направление, цвет1 – остановка1, . . . , цветn – остановкаn);
/* допускается использование нескольких повторяющихся линейных градиентов в одном объявлении через запятую */

Цвет

Создавая градиент, допускается использовать не только «Предопределенные цвета», но и любые «значения цвета, используемые в CSS» — шестнадцатеричные (HEX), значения цвета RGB / -A и HSL /-A.

Направление

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

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

Ключевое слово	Позиция градиента
to left	Градиент размещается справа налево.
to right	Градиент размещается слева направо.
to top	Градиент размещается снизу вверх.
to bottom	Градиент размещается сверху вниз. Это значение по умолчанию.
to left top	Градиент размещается от правого нижнего угла к левому верхнему.
to right top	Градиент размещается от левого нижнего угла к правому верхнему.
to left bottom	Градиент размещается от правого верхнего угла к левому нижнему.
to right bottom	Градиент размещается от левого верхнего угла к правому нижнему.

Для того, чтобы задать угол градиента в градусах необходимо указать значение в диапазоне от до 360 совместно с ключевым словом deg. Современный стандарт допускает использование отрицательных значений.

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

Расположение градиента, заданного в градусах в квадратном элементе.

Значения 0deg, 90deg, 180deg и 270deg соответствуют значениям ранее рассмотренных ключевых слов независимо от того является элемент квадратным или имеет прямоугольную форму. В случае если элемент полностью квадратный, то следующие значения в градусах будут полностью соответствовать ключевым словам:

Значение в градусах	Соответствует ключевому слову	Размещение градиента
0 deg	to top	Снизу вверх.
45deg	to right top *	Градиент размещается под углом 45 градусов к точке пересечения линии координат.
90deg	to right	Слева направо.
135 deg	to right bottom *	Градиент размещается от левого верхнего угла к правому нижнему.
180deg	to bottom	Сверху вниз. Это значение по умолчанию.
225deg	to left bottom *	Градиент размещается от правого верхнего угла к левому нижнему.
270deg	to left	Справа налево.
315deg	to left top *	Градиент размещается от правого нижнего угла к левому верхнему.

* — верно, только для квадратного элемента. На изображении ниже отображена разница между значениями в 45 градусов и значениями to right top для прямоугольного элемента. Главное, что необходимо понять, что для квадратных элементов значения 45deg и to right top, 135 deg и to right bottom, 225deg и to left bottom, 315deg и to left top будут одинаковы, а для прямоугольных градиентов эти значения будут отличаться:

Расположение градиента в прямоугольном элементе (сравнение 45deg и to right top).

Точки остановки

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

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

Допускается указывать значения точек остановки (color stops) в единицах измерения длины (например – px или em), так и в процентных значениях. Как правило, процентные значения являются более удобными и адаптивными в использовании.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Добавление фонового изображения

Кроме цвета фона элемента мы можем также добавить к нему фоновое изображение. Такие изображения работают аналогично цвету фона, однако предлагают несколько дополнительных свойств для уточнения. Как и прежде, мы можем использовать свойство background с сокращённым значением или свойство background-image напрямую. Независимо от применяемого свойства они требуют указать источник изображения с помощью функции url().

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

Добавление фонового изображения с одним лишь значением url может выдать нежелательные результаты, так как по умолчанию фоновое изображение будет повторяться по горизонтали и вертикали от левого верхнего угла данного элемента, чтобы заполнить фон элемента целиком. К счастью, мы можем использовать свойства background-repeat и background-position для управления, как именно повторять картинки.

background-repeat

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

Свойство background-repeat принимает четыре разных значения: repeat, repeat-x, repeat-y и no-repeat. repeat является значением по умолчанию и повторяет фоновое изображение по вертикали и по горизонтали.

Значение repeat-x повторяет фоновое изображение по горизонтали, в то время как значение repeat-y повторяет его по вертикали. Наконец, значение no-repeat говорит браузеру отобразить картинку один раз, то есть не повторять её вообще.

background-position

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

Свойство background-position требует два значения: горизонтальное смещение (первое значение) и вертикальное смещение (второе значение). Если указано только одно значение, то оно применяется для горизонтального смещения, а вертикальное по умолчанию задаётся как 50%.

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

Чтобы установить значение background-position мы можем использовать ключевые слова top, right, bottom и left, пиксели, проценты или любую единицу размера. Ключевые слова и проценты работают очень похоже. Значение left top идентично процентному значению 0 0, которое располагает изображение в левом верхнем углу элемента. Значение right bottom идентично процентной записи 100% 100% и будет позиционировать изображение в правом нижнем углу элемента.

Рис. 7.01. Фоновые изображения позиционируются от левого верхнего угла элемента

Одним из преимуществ процентов по сравнению с ключевыми словами является возможность центрирования фонового изображения с помощью значения 50%. Для размещения фонового изображения в верхней части элемента, мы можем использовать значение 50% 0. Применение пикселей в качестве значения background-position также распространено, так как пиксели дают нам точный контроль над положением фона.

Значения background

Свойства background-color, background-image, background-position и background-repeat могут выступать значением для единичного свойства background. Порядок этих свойств в background может варьироваться, но обычно он такой: background-color, background-image, background-position, а затем background-repeat.

Пример фонового изображения

В следующем примере мы будем использовать свойство background, которое включает значения background-color, background-image, background-position и background-repeat.

Пожалуйста, обратите внимание, что в background-position содержится относительное и абсолютное значение. Первое значение, 20 пикселей — это горизонтальная величина, позиционирование background-image на 20 пикселей от левого края элемента

Второе значение, 50% — это вертикальная величина, которая центрирует фоновое изображение по вертикали.

Несколько других свойств и значений также включены в правила класса notice-success, чтобы установить дальнейший стиль сообщения.

HTML

CSS

Gradients as Backgrounds: What’s the Deal?

Backgrounds have a massive impact on a website’s design. So big, in fact, it’s probably the most important aspect of the website – aside from functionality, of course. They are the strings that tie a website look and theme together. They often establish groupings, differentiate between pages, and have hand in pointing out significant elements of the site.
That being said, wouldn’t you want your background to be engaging, unique, and distinct?

Gradient backgrounds can do just that. Take a look at some of your favorite websites. Do you notice that they have compelling gradient backgrounds? Odds are, at least a handful of the best designed websites out there implement some kind of gradient as a background. They contribute to the uniqueness and design of your website, all while drawing in your consumers to stick around on your page for a while.

Ограничения

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

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

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

Последнее обновление: 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)).
После этого браузер повторяет градиент, пока не заполнит всю поверхность элемента.

НазадВперед

Бонус: фон из пересекающихся линий

Примеры фонов из пересекающихся линий

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

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

Структура бонусного фонового рисунка

Градиент распределен вокруг точки пересечения прямых с координатами (x,y). Он начинается от угла β, образованного вертикальной осью и отрезком прямой, расположенным в верхнем правом углу. Градиент имеет резкие переходы цветов на участках, соответствующих углам α, 50% (180°) и 180° + α.

Если необходимо создать несколько элементов с подобными фонами, образуемыми пересекающимися линиями разных цветов, для этого идеально подойдут CSS-переменные:

Нужно всего лишь задать значения положения центра градиента (—xy), угла начала градиента (—b), первого угла перехода цвета (—a) и цветов палитры с —c0 до —c3.

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

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

Как исправить ошибку 400

Использование нескольких повторяющихся градиентов

Современный стандарт CSS позволяет указать для одного элемента несколько повторяющихся линейных градиентов (функций). Для этого необходимо перечислить их через запятую.

background-image / background: repeating-linear-gradient(направление, цвет1 – остановка1, . . . , цветn – остановкаn),
/* запятые после каждой функции обязательны */
repeating-linear-gradient(направление, цвет1 – остановка1, . . . , цветn – остановкаn), 
...
repeating-linear-gradient(направление, цвет1 – остановка1, . . . , цветn – остановкаn);

Рассмотрим применение нескольктх функции repeating-linear-gradient() в одном объявлении:

<!DOCTYPE html>
<html>
<head>
	<title>Повторяющиеся линейные градиенты (несколько функций).</title>
<style> 
.test {
height: 135px; /* устанавливаем высоту элемента */
background-image: repeating-linear-gradient(-45deg, rgba(255,0,0,.3) 0, rgba(255,0,0,.3) 10px, green 10px, green 20px), /* первый градиент размещается с отрицательным углом 45 градусов */
repeating-linear-gradient(45deg, yellow 0, yellow 10px, #000 10px, #000 20px);  /* второй градиент размещается с положительным углом 45 градусов */
}
</style>
</head>
	<body>
		<div class = "test"></div>
	</body>
</html>

Для функций в этом примере были заданы противоположные направления размещения двухцветных градиентов, но при этом были использованы одинаковые точки остановки. Для создания четких переходов один цвет мы использовали два раза через равный промежуток, а для того чтобы отображался второй повторяющийся линейный градиент мы использовали прозрачный красный цвет с альфа-каналом 0.3 — rgba(255,0,0,.3).

Результат нашего примера:

Рис. 132a Повторяющиеся линейные градиенты (несколько функций).

CSS Linear Gradients

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