Градиент css3. примеры использования

Summary

Adding backgrounds and gradients to our pages allows us to bring color to the forefront of our designs. These features also help to define how content is grouped and to improve the layout of our pages as a whole.

To review, this lesson covered the following:

• How to add background colors and images to elements
• CSS gradients, both linear and radial, and how to customize them
• How to apply multiple background images to a single element
• New CSS3 properties that allow us to change the size, surface area, and origin of background images

Adding background colors, gradients, and images brings forth quite a few possibilities to enhance the overall design of our websites. Soon we’ll discuss how to semantically add images (aside from background images) and other media to our pages. But before that, let’s take a look at how to semantically create lists.

Поддержка браузерами

Градиент и Mozzila Firefox

21 января года был выпущен Firefox 3.6. который поддерживает линейные —moz-linear-gradient() и радиальные -moz-radial-gradient() CSS градиенты.

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

.gradient{  
	background: -moz-linear-gradient(top, #0066FF, #83CA54);
}
.gradient{  
	background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}
.gradient{
	background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
} 

Версии FF ниже 3.6 CSS3 функции linear-gradient и radial-gradient не поддерживают!

Градиент в Chrome и Safari

Safari, начиная с версии 4.0 (Chrome с версии 2.0), поддерживает команду -webkit-gradient(), для создания линейных и радиальных градиентов.

.gradient{  
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(0,102,255)), to(rgb(131,202,84)))
}

Update. Последние версии Chrome используют для градиента такой же синтаксис, как и Firefox:

.gradient{  
	background: -webkit-linear-gradient(top, #0066FF, #83CA54);
}
.gradient{  
	background: -webkit-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}
.gradient{
	background-image: -webkit-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
} 

Кроме этого существует возможность задать радиальный повторяющийся градиент:

.gradient{
	background-image: -webkit-radial-gradient(center 45deg, circle closest-side, orange, red 10%, orange 30%);
}

Градиент и Internet Explorer

В IE для градиентов используются фильтры. Начиная с IE 5.5 можно сделать градиент с помощью такого фильтра:

.gradient{ 
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FF0066FF, endColorstr=#FF83CA54);
}

Для Internet Explorer 8.0 можно написать индивидуальный фильтр:

.gradient{
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FF0066FF, endColorstr=#FF83CA54)";
}

Но и старую запись IE8 поймет прекрасно.

update by Ksayri: для IE версий 6-8 можно использовать плагин PIE.

.gradientBox {
	background: -moz-linear-gradient(top, #0066FF, #83CA54);
	background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#83CA54)) #0066FF;
	-pie-background: linear-gradient(top, #0066FF, #83CA54);
	behavior: url(css/PIE.htc);
}

Градиент и Opera

На момент написания статьи Opera не поддерживает специальных свойств для создания градиента. Тем не менее, градиент можно сделать, если использовать JavaScript и работать с канвой элемента напрямую. Эта возможность HTML 5 уже поддерживается в Opera.

Update by SelenIT. Для Оперы с версии 9.5 есть возможность создания градиентов, используя SVG в качестве фона. Подробнее можно посмотреть на Dev.opera :: New development techniques using Opera Kestrel (9.5).

Update. Начиная с версии 11.1 Opera поддерживает вендорное значение свойства для background -o-linear-gradient и -o-repeating-linear-gradient:

.gradient{  
	background: -o-linear-gradient(top, #0066FF, #83CA54);
}
.gradient{  
	background: -o-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}

Достоинства реализации градиента с применением CCS3 свойств:

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

Недостаток:

Поддержка браузерами. Вернее ее отсутствие. Вместо одной строки в CSS (как нам это обещает спецификация, например linear-gradient(right top, yellow, blue);), в настоящее врямя приходиться писать отдельные определения для FF и webkit-браузеров, а также фильтр для IE. Кроме того, все равно остается ряд браузеров, например, довольно популярная у нас Opera, которые не поймут этих свойств. Для них придется применять JavaScript, что, конечно, скажется на быстродействии.

Свойство CSS background-image

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

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

Удобно при работе с маленькими картинками. Чтобы получить такой код, воспользуйтесь сервисами вроде https://snipp.ru/tools/base64-img. Там все очень просто: загружаете картинку и получаете готовый код для сайта. При таком использовании не производится дополнительное обращение к серверу за картинкой, что хорошо для скорости загрузки.

Вместо можно использовать более общее свойство с аргументом в виде изображения.

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

Для фона можно использовать большинство известных форматов: JPG, PNG, SVG, GIF-анимацию и другие.

Параметры фона сайта

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

Параметры фона сайта

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

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

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

Есть два варианта, как сделать задний фон в HTML. Это может быть монотонная цветная подложка или изображение. Каждый вариант имеет свои недостатки и преимущества. Монотонный оттенок не будет «утяжелять» ресурс загрузкой лишних картинок, но фон в виде эффектного изображения добавит бонусов дизайну сайта.

Бесплатный онлайн-интенсив

Ваш Путь в IT начинается здесь

Подробнее

Какими параметрами определяется HTML фон страницы.

• Цветовой оттенок HTML фона сайта определяет CSS атрибут background-color, расположенный в теге <body>.
• HTML фонового цвета фона определенных элементов (блок, параграф или табличная ячейка) определяется таким же атрибутом, который размещен внутри соответствующих тегов.
• HTML фон сайта можно определить во внешнем файле .css.
• HTML картинка. Простой способ, как сделать картинку фоном в HTML- использование атрибута background-image и картинки.

Подробнее рассмотрим каждый способ установки фона на страницах сайта.

Создание градиентов

Технически создание простого градиента не составляет труда, достаточно выбрать цвета для перехода, направление и тип градиента: Linear (линейный), Radial (круговой, радиальный), Angular (угловой, конусный), Diamond (ромбовидный, алмазный).

Изображение: Skillbox Media

В Figma для создания градиента нужно выделить фигуру, затем в свойстве Fill выбрать тип градиента.

Изображение: Skillbox Media

Для настройки цветов выделите точку градиента и укажите её цвет и непрозрачность.

Изображение: Skillbox Media

Чтобы задать направление градиента, надо выделить точку на конце отрезка градиента и передвинуть её. Если в этот момент удерживать клавишу Shift, направление градиента будет кратно 45°.

Если надо добавить ещё один цвет в градиент, то надо кликнуть по линии между двумя цветами в нужном месте. Для удаления цвета кликните по точке и нажмите Delete на клавиатуре.

Точки градиента можно передвигать до достижения нужного результата.

Свойство CSS background-repeat

Это свойство определяет нужно ли повторять фоновое изображение (если, конечно, оно задано) и как это делать.

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

• — наследуется значение родительского элемента
• — картинка повторяется как по вертикали, так и по горизонтали
• — картинка повторяется по горизонтали
• — картинка повторяется по вертикали
• — картинка выводится один раз и не повторяется
• — картинка повторяется по горизонтали и вертикали, не обрезается, при этом если между картинками есть свободное место, недостаточное, чтобы вместить целую, они равномерно распределяются
• — картинка повторяется по вертикали и горизонтали, не обрезается, при этом если между картинками есть свободное место, недостаточное, чтобы вместить целую, они растягиваются или сжимаются
  

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

Решение 2: редактирование фонового фото

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

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

Пример редактирования изображения в Фотошопе с помощью настройки прозрачности

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

Пример редактирования изображения в Фотошопе с помощью наложения цвета и уменьшения насыщенности фото

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

Linear Gradients

Transitions in linear gradients occur along a straight line determined by an angle or direction. A CSS linear gradient can be coded by using the linear-gradient() function and can be as simple or complex as you would like. At the very least, you’ll only need two colors to get started. From there, you could add more colors, angles, directions, and more to customize your gradient even further.

Result

If you leave the code at its most basic styling, the other elements will be determined automatically by the browser. This includes the direction or angle and color-stop positions. For more customized styling, you can specify these values to create fun gradients with multiple colors or angled directions. Playing with color-stop positions could also leave you with a solid pattern instead of a traditional gradient. The possibilities are endless!

Compared to radial gradients, linear gradients are certainly more popular in design and branding techniques. For example, you may have noticed the popular music-streaming company, Spotify, and their gradient branding recently. Linear gradients are, perhaps, the easiest way to incorporate this trend into your creations, as they seem to blend smoothly with other design elements.

Radial Gradients

A CSS radial gradient—although far less often seen—is just as beautiful and fun as a linear gradient and can be implemented just as easily. With that said, the code may seem more difficult to figure out at first. It is for this reason that, for some designers, it may be easier to start out with a linear gradient.

Result

Of course, the code isn’t actually all that complicated at all. In fact, most of the code is exactly the same as that of the linear gradient—with just a few tweaks for extra radial customization. For example, unlike with linear gradients, you can actually adjust the size of radial gradients in place of where the direction would normally go. Playing with the different values that determine these sizes can give you a lot of different results.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS 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

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Свойство CSS background

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

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

Почему?

Такое написание, конечно, экономит много времени, но я так не делаю. Почему?

1. Код хуже читается. Особенно если свойства указаны в случайном порядке

2. Если какое-то свойство не задано — используется дефолтное, соответственно иногда возникают непредвиденные последствия. Поэтому для новичков или не очень внимательных людей не подходит.

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

Итак, помимо универсального свойства , в CSS есть 8 свойств для работы с фоном элемента:

background-position – положение фонового изображения

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

Первое значение определяет смещение по горизонтали, а второе — по вертикали.

Указывать значения можно посредством:

• пикселей (например, );
• процентов ();
• с помощью ключевых слов: , , , и ().

В современных браузерах в можно указывать до 4 значений.

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

Задавать можно с помощью трёх или четырёх значений. В трех- или четырехзначном синтаксисе чередуются ключевые слова (кроме ) и величина смещения ( или ). При этом ключевое слово должно предшествовать величине смещения, указанной с помощью или .

При указании трёх значений, браузер выставляет «отсутствующее» четвертое значение как 0.

Это свойство расположит фоновое изображение слева на 45px и снизу на 0px.

Пример использования в 4 значений:

Это свойство поместит изображение слева на 45px и снизу на 10px.

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

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

Код CSS

Рассмотрим упрощенный синтаксис функции :

Код CSS

Первым значением функции задается форма градиента:

1. – круг;
2. – эллипс.

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

1. = – левый верхний угол;
2. = = – вверху по центру;
3. = – правый верхний угол;
4. = = – слева по центру;
5. – по центру (по умолчанию);
6. = = – справа по центру;
7. = – слева внизу;
8. = = – внизу по центру;
9. = – правый нижний угол.

Например:

Код CSS

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

Код CSS

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

Код CSS

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

1. – для эллипса, градиент совпадает одновременно с ближайшими вертикальной и горизонтальной сторонами, а для круга, с ближайшей к нему стороной;
2. – вычисление основывается на информации о ближайшем угле блока;
3. – то же самое, что и , только градиент растягивается до противоположной стороны блока;
4. – вычисление основывается на информации о дальнем угле блока.

Приведем пример:

Код CSS

Мы рассмотрели два вида градиента, которые есть в CSS. Для фронтенд-разработчика уверенное использование градиентов просто необходимо. Самый распространенный пример применения линейного и радиального градиента, это оформление кнопок.

Предыдущий урок «2.1. Свойство color для работы с цветом» Следующий урок «1.1. Позиционирование элементов свойством position»

Указание цветов и создание эффектов

Все типы CSS-градиентов – это диапазон позиционно-зависимых цветов. Цвета, создаваемые CSS-градиентами, могут варьироваться непрерывно с изменением позиции, создавая плавные цветовые переходы. Возможно также создавать полосы сплошных цветов, и резкие переходы между двумя цветами. Следующее примеры работают во всех градиентных функциях:

Использование более двух цветов

Вам не нужно ограничиваться двумя цветами – вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены по градиенту.

Расположение точек остановок цветов

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

Создание резких переходов

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

Подсказки градиента

По умолчанию градиент идёт плавно от одного цвета до другого. Вы можете добавить цветовую подсказку, чтобы переместить значение средней точки перехода в определённую точку градиента. В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.

Создание цветных линий и полосок

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

В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градиента, и так далее.

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

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

Управление переходом градиента

По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на расстоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:

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

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

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

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

Современный стандарт CSS 3 позволяет создать шаблон градиента с определенными точками остановки и повторить его по всему фону элемента. За повтор линейного градиента отвечает одноименная функция repeating-linear-gradient(), которая имеет следующий синтаксис:

background-image / background: repeating-linear-gradient(направление, цвет1 – остановка1, . . . , цветn – остановкаn);

По аналогии с функцией linear-gradient, допускается указывать направление, как с использованием ключевых слов, так и в градусах, а значения точек остановки (color stops) задаются в единицах измерения длины (например – px или em) и в процентных значениях. Как правило, значения, указанные в единицах измерения длины дают более предсказуемый результат и как следствие чаще применяются.

Функция repeating-linear-gradient() имеет следующую поддержку браузерами:

Функция	Chrome	Firefox	Opera	Safari	IExplorer	Edge
repeating-linear-gradient()	26.010.0 -webkit-	16.03.6 -moz-	12.111.1 -o-	6.15.1 -webkit-	10.0	12.0

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

Рассмотрим применение функции:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования повторяющихся линейных градиентов</title>
<style> 
.test {
height: 135px; /* устанавливаем высоту элемента */
background-image: repeating-linear-gradient(-45deg, #777 20px, #888 40px, hsla(300,50%,50%,.9) 50px); /* градиент размещается с отрицательным углом 45 градусов */
}
.test2 {
height: 135px; /* устанавливаем высоту элемента */
background-image: repeating-linear-gradient(to top right, rgba(255,165,0,.8) 5%, khaki 10%, plum 15%); /* градиент размещается от левого нижнего угла к правому верхнему */
}
</style>
</head>
	<body>
		<div class = "test"></div><br>
		<div class = "test2"></div>
	</body>
</html>

Для первого элемента мы указали трехцветный градиент с отрицательным углом направления и установили для него три точки остановки на 20px, 40px и 50px, после этого значения ввиду особенности функции repeating-linear-gradient, градиент будет повторен до того момента пока в элементе остается свободное пространство.

Для второго элемента мы указали трехцветный градиент, для которого задали направление размещения ключевыми словами — to top right (градиент размещается от левого нижнего угла к правому верхнему). Кроме того установили для него три точки остановки на 5%, 10% и 15% элемента. По аналогии с предыдущим элементом градиент будет повторен до того момента пока в элементе остается свободное пространство.

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

Рис. 131 Пример использования повторяющихся линейных градиентов.

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

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

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

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

Рис. 132 Повторяющиеся линейные градиенты (четкие переходы между цветами).

Выводы

CSS функции linear-gradient и radial-gradient, описанные в проектах спецификации CSS3 дают нам мощный механизм создания градиентов. Но, так как фактически данная спецификация еще не окончена, пройдет, наверно, немало времени, пока мы сможем использовать эту мощь в своей работе. Тем не менее, все большее число браузеров в том или ином виде поддерживает CSS-градиенты. На момент написания статьи в этот список входят IE6-8, Firefox 3.6, Safari 4.0, Chrome 2.0.

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

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