Linear gradient css

Определение и применение

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

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

Более подробно о работе с градиентами вы можете ознакомиться в статьях «CSS функции: линейные градиенты» и «CSS функции: радиальные градиенты»

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

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

Современный стандарт 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 Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font CombinationsCSS 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 Радиальные градиенты

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

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

Синтаксис

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

По умолчанию форма имеет форму эллипса, размер — самый дальний угол, а позиция — по центру.

Радиальный градиент — это равномерное распределение цвета (по умолчанию)

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

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

Радиальный градиент — различные цветовые точки

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

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

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:

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Градиент CSS

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

Для того, чтобы задать градиент используется свойство background-image или сокращенный
вариант background-image. И мы можем создать как линейный так и радиальный градиент,
прописав значения либо linear-gradient, либо radial-gradient и указав начальный и конечный цвета. Вот
пример синтаксиса:

background: linear-gradient(#58b6b9, #edf1cf);

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

background: linear-gradient(to right, #94525c, #14aad7);

Если заменить этот параметр на to top right вы получите диагональный градиент. Такой
же эффект можно создать, указав параметр в градусах, например, 45deg.

Вы можете использовать больше чем 2 цвета, и цвета можно записать в том числе и по названию.

background: linear-gradient(to right, #94525c, #14aad7, cyan);

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

Если мы хотим, чтобы один цвет занимал больше места, чем другой, можно добавить значение в процентах непосредственно
после цвета. Потренируйтесь на градиент css генераторе выше.

background: linear-gradient(to right, #a3795f 50%, #012754);

Управление положением цветов

Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в , в и значения, выходящие за границы элемента:

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

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

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

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

При отсутствии ограничений код может быть гораздо короче:

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

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

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


Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

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

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.

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 Специфичности

Продвинутые конические градиенты

Конических градиентов гораздо больше, чем в простых примерах выше.

Цветовой круг

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

Круговые диаграммы

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

Наш первый цвет — это # 444 0 25%. Он начинает градиент с 0 (так же, как 0deg или 0%) и рисует цвет #444 для 25% круга (так же, как 90deg).

Далее у нас цвет gold от 0 до 70%. Когда начальная точка цвета меньше, чем конечная точка предыдущего цвета, тогда градиент начнётся с конечной точки предыдущего цвета. Таким образом, в нашем случае браузер будет интерпретировать второй цвет как gold с 25% до 70%

Также важно отметить, что 70% здесь означает 70% от начала круга, а не от начала этого цвета. Итак, наш золотой цвет займёт 45% круга, а не 70%

Окончательно мы завершаем наш круг с цветом #0af, пройдя весь путь до 100%. Значение 100% не является обязательным, поскольку браузер понимает, что последний цвет должен идти до конца. Но так более читабельно.

Поскольку можно использовать deg или %, то существует много разных способов написать один и тот же градиент. Все градиенты ниже приведут к одной и той же круговой диаграмме, показанной выше.

Смещения с помощью at

Конические градиенты не обязаны начинаться с центра их контейнера. Как и radial-gradient, они поддерживают параметр at, который указывает, где должен располагаться центр градиента. Вы должны указать координаты x и y в процентах. В настоящее время полифилл не поддерживает at, поэтому в браузерах, ещё не поддерживающих конические градиенты, пример будет выглядеть некорректно.

Учтите, что если вы также используете параметр from, то не должны добавлять запятую между from и at.

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

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

Ограничения

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

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

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

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

Шахматный узор

Шахматный узор

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

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

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

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

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

Такое повторение на второй половине участка от 0 до 100% означает, что можно использовать . С помощью последнего мы получим 76 байтов скомпилированного CSS вместо 263, сократив таким образом код более чем на 70%:

Демо можно посмотреть на CodePen:

Simple Patterns

For those of you just starting out on CSS patterns, this might be good practice. These will require the least amount of manipulating and will typically be the easiest to understand. A good example of this type of patter is a parallel pattern, or rather, stripes!

Parallel

Ah, the parallel pattern, or, even more simply put, stripes. The parallel pattern can be developed in two ways. First, you can choose to create a parallel CSS gradient pattern with the skills we learned in the article about repeating linear gradients. Or, you can try something a little different using a linear-gradient. The syntax for this parallel gradient pattern looks like this:

background-color: #00ccd6;
background-image: linear-gradient(90deg, transparent 50%,
  rgba(255,255,255,.5) 50%);
background-size: 50px 50px;

Точки остановки радиального градиента

Синтаксис функции создания радиального градиента (по аналогии с линейными градиентами) предусматривает возможность использования точек остановки (color stops) в единицах измерения длины (например: px или em), так и в процентных значениях.

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

Лучше примеров могут быть только хорошие примеры, перейдем к практике:

<!DOCTYPE html>
<html>
<head>
	<title>Точки остановки в радиальных градиентах</title>
<style> 
div {
height: 125px; /* устанавливаем высоту элемента */
width: 200px; /* устанавливаем ширину элемента */
display: inline-block; /* устанавливаем, что элементы <div> становятся блочно-строчными (чтобы выстроились в линейку) */
}
.test {
background-image: radial-gradient(circle, red 10%, green); /* градиент круглой формы, у которого 10% от центра занимает красный цвет, который плавно переходит в зеленый, занимающий оставшую часть элемента */
}
.test2 {
background-image: radial-gradient(circle, red 10%, green 50%, blue); /* градиент круглой формы, у которого 50% от центра занимает красный цвет, который плавно переходит в зеленый, с точкой остановки 85%, он в свою очередь плавно переходит в синий */
}
.test3 {
background-image: radial-gradient(circle, red 50%, green 85%, blue); /* градиент круглой формы, у которого 10% от центра занимает красный цвет, который плавно переходит в зеленый, с точкой остановки 50%, он в свою очередь плавно переходит в синий */
}
.test4 {
background-image: radial-gradient(red 10%, green); /* градиент в форме эллипса, у которого 10% от центра занимает красный цвет, который плавно переходит в зеленый, занимающий оставшую часть элемента */
}
.test5 {
background-image: radial-gradient(red 10%, green 50%, blue); /* градиент в форме эллипса, у которого 10% от центра занимает красный цвет, который плавно переходит в зеленый, с точкой остановки 50%, он в свою очередь плавно переходит в синий */
}
.test6 {
background-image: radial-gradient(red 50%, green 85%, blue); /* градиент в форме эллипса, у которого 50% от центра занимает красный цвет, который плавно переходит в зеленый, с точкой остановки 85%, он в свою очередь плавно переходит в синий */
}
</style>
</head>
	<body>
		<div class = "test"></div>
		<div class = "test2"></div>
		<div class = "test3"></div><br>
		<div class = "test4"></div>
		<div class = "test5"></div>
		<div class = "test6"></div>
	</body>
</html>

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

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

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


Рис. 136 Точки остановки в радиальных градиентах.

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!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector