Css градиенты для веб дизайна. подборка сервисов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Using radial gradients

Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.

As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it’s box:

Again like linear gradients, you can position each radial color stop with a percentage or absolute length.

You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.

Unlike linear gradients, you can specify the size of radial gradients. Possible values include , , , and , with being the default. Circles can also be sized with a length, and ellipses a length or percentage.

Example: closest-side for ellipses

This example uses the size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

Example: farthest-corner for ellipses

This example is similar to the previous one, except that its size is specified as , which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

Example: closest-side for circles

This example uses , which makes the circle’s size to be the distance between the starting point (the center) and the closest side. The circle’s radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.

Example: length or percentage for ellipses

For ellipses only, you can size the ellipse using a length or percentage. The first value represents the horizontal radius, the second the vertical radius, where you use a percentage this corresponds to the size of the box in that dimension. In the below example I have used a percentage for the horizontal radius.

Example: length for circles

For circles the size may be given as a <length>, which is the size of the circle.

Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.

Breaking the Code: The CSS Radial Gradient

We’ll present this to you the same way we did with the linear gradient to aim for a consistent, easy-to-understand explanation.

What You’ll Need to Know

Let’s talk about the basics of what you’ll need to know to create your own custom, radial gradient.

Color-Stops. In the most basic version of a CSS radial gradient code, all you’ll need is at least two colors for the gradient to transition between. These are typically referred to as color-stops since, generally, they tell the code at which points each color should stop along the gradient. More about that later, though.

Shape.This determines the shape of the gradient, and since we’re talking about radial gradients, they’re limited to being circular in nature. Your shapes will be between an ellipse or a circle. Any space you’re trying to fill that is square would likely fit the circle shape best, while a rectangular space is ripe for ellipse.

Size. The size influences the ending shape of the gradient by taking your shape value you determined and instructing the gradient where to end. You can use key-words like closest-side, farthest-side, closest-corner, and farthest-corner.

Syntax. The most important part of creating a beautiful CSS radial gradient is the CSS itself. The simplest form of the radial gradient is as follows:

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

Now that we’ve got those parts covered, let’s get into the breakdown of the code itself.

Направление градиента border gradient

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

При задании градиента с кроссбраузерными префиксами этот пример пишется немного иначе.

-moz-border-image: -moz-linear-gradient(left, #0B0E7F , #0B95DD);
-webkit-border-image: -webkit-linear-gradient(left, #0B0E7F , #0B95DD);

В первом случае мы писали в каком направлении должен распространяться градиент, а во втором – куда он должен идти.
Пример для border gradient слева направо:

CSS

.border-gradient1 {
border: 10px solid transparent;
border-image: linear-gradient(to right, #0B0E7F , #0B95DD);
-moz-border-image: -moz-linear-gradient(left, #0B0E7F , #0B95DD);
-webkit-border-image: -webkit-linear-gradient(left, #0B0E7F , #0B95DD);
border-image-slice: 1;
}

1
2
3
4
5
6
7

.border-gradient1 {

border10pxsolidtransparent;

border-imagelinear-gradient(toright,#0B0E7F,#0B95DD);

-moz-border-image-moz-linear-gradient(left,#0B0E7F,#0B95DD);

-webkit-border-image-webkit-linear-gradient(left,#0B0E7F,#0B95DD);

border-image-slice1;

}

Пример

Чтобы задать градиент для рамки по диагонали используем следующий код:

CSS

.border-gradient1 {
border: 10px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, #DC2903 , #F4F955, #0625F9);
-webkit-border-image: -webkit-linear-gradient(top left, #DC2903 , #F4F955, #0625F9);
border-image: linear-gradient(to bottom right, #DC2903 , #F4F955, #0625F9);
border-image-slice: 1;
}

1
2
3
4
5
6
7

.border-gradient1 {

border10pxsolidtransparent;

-moz-border-image-moz-linear-gradient(topleft,#DC2903,#F4F955,#0625F9);

-webkit-border-image-webkit-linear-gradient(topleft,#DC2903,#F4F955,#0625F9);

border-imagelinear-gradient(tobottomright,#DC2903,#F4F955,#0625F9);

border-image-slice1;

}

Пример

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

border-image: linear-gradient(30deg, #0E9ADF, #F4F955 , #0625F9 );

Делаем градиент с помощью онлайн сервисов

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

  1. Готовые образцы, используйте как начальные и редактируйте.
  2. На этой площадке, настраиваем количество цветов, минимум два, максимум до бесконечности.
  3. Нажимая на каждый бегунок из второго пункта, здесь можно настроить его цвет (color) и процент занимаемого места (location), по умолчанию место делится между всеми поровну.
  4. Внешний вид и orientation, то есть настройка направления, горизонталь, вертикаль и диагональ. На пункт size не обращайте внимания, регулирует область просмотра. Чекбокс IE включает адаптацию с internet explorer.
  5. Код в три столбика, каждый включает адаптацию к разным браузерам, вопрос кроссбраузерности решен.
  6. Color format, это формат цвета, предпочтительнее hex. Галочка Comments добавляет и отключает подсказки.

Прикрепляем стили фона

Прикрепляем к внешнему виду ресурса, например, делаем градиент у фона заголовка h2. Задаем стиль для текста h2, например, “grad” переходим в файл style.css в низ вставляем его и задаем параметры, которые скопировали с colorzilla. В моем случае все будет выглядеть так

.grad{
background: #298c1c; /* Old browsers */
background: -moz-linear-gradient(left,  #298c1c 0%, #a01e1e 21%, #23dd42 43%, #23dd42 47%, #23dd42 47%, #1a0d54 66%, #82a358 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #298c1c 0%,#a01e1e 21%,#23dd42 43%,#23dd42 47%,#23dd42 47%,#1a0d54 66%,#82a358 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #298c1c 0%,#a01e1e 21%,#23dd42 43%,#23dd42 47%,#23dd42 47%,#1a0d54 66%,#82a358 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#298c1c', endColorstr='#82a358',GradientType=1 ); /* IE6-9 */
}

Далее берем стиль и приписываем к тексту заголовка h2.


<h2 class="grad">тут ваш текст</h2>

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

Практическое использование CSS градиента

Давайте попробуем использовать градиент более оригинальным способом.

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

Ниже вы видите пример слоя с градиентом поверх изображения. Здесь мы использовали полупрозрачные rgba цвета.

Свойство background может принимать сразу несколько значений. При этом первое будет
верхним слоем, а последнее — нижним.

Мы получаем такой эффект:

Градиент в тексте

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

Возьмем элемент, в данном случае h1, и применим к нему градиент. Свойству background-clip присвоим значение text, это удалит фон из всего блока, за
исключением текста. И, конечно же, следует сделать свойство color прозрачным, иначе мы не увидим градиент.

gradient generator

Общие свойства градиентов

gradientUnits

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

Возможные значения:

— координаты рассчитываются относительно объекта, к которому применяется градиент. Значение по умолчанию.
— координаты рассчитываются относительно системы координат всего SVG-элемента.

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

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

У линейных градиентов в этом случае меняется угол расположения цветов градиента относительно его вектора:

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

gradientTransform

Атрибут позволяет задать трансформациии градиента:

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

Для градиентов, как и для всех прочих элементов, по умолчанию трансформации производятся относительно верхнего левого угла документа. Если требуется переопределить центр трансформации, нужно задать . Явно в атрибуте его можно задать только для (например, , два последних числа — это оно), для других трансформаций будет работать только если он вместе с трансформацией задан в CSS. Но нельзя задать через CSS, следовательно так тоже задать не получится. В этом случае можно использовать центрирование через (за подсказку спасибо @AmeliasBrain):

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

spreadMethod

Этот атритбут управляет поведением градиента, если градиент меньше, чем область отрисовки.

Возможные значения:

— свободное пространство заполняется крайними цветами. Значение по умолчанию.
— градиент отражается.
— градиент повторяется.

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

xlink:href

Вот пример использования:

Код в действии, радиальный градиент справа унаследовал цвета линейного градиента слева:

В этом демо к градиенту слева применяется трансформация, и она также наследуется градиентом справа.

Declaring colors & creating effects

All CSS gradient types are a range of position-dependent colors. The colors produced by CSS gradients can vary continuously with position, producing smooth color transitions. It is also possible to create bands of solid colors, and hard transitions between two colors. The following are valid for all gradient functions:

Using more than two colors

You don’t have to limit yourself to two colors—you may use as many as you like! By default, colors are evenly spaced along the gradient.

Positioning color stops

You don’t have to leave your color stops at their default positions. To fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. If you specify the location as a percentage, represents the starting point, while represents the ending point; however, you can use values outside that range if necessary to get the effect you want. If you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at and the last color stop being at , and any other color stops being half way between their adjacent color stops.

Creating hard lines

To create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location. In this example, the colors share a color stop at the mark, halfway through the gradient:

Gradient hints

By default, the gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient. In this example, we’ve moved the midpoint of the transition from the 50% mark to the 10% mark.

Creating color bands & stripes

To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. The color will reach full saturation at the first color stop, maintain that saturation through to the second color stop, and transition to the adjacent color stop’s color through the adjacent color stop’s first position.

In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.

In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.

In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.

Controlling the progression of a gradient

By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to highlight the difference the color hint can make:

Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.

You can even stack gradients with other gradients. As long as the top gradients aren’t entirely opaque, the gradients below will still be visible.

First things first. Why should you even care?

But first—before you can even think about covering the basics of the linear gradient, you should figure out why you care. Because knowing why you’re doing something is important to, you know, psychology and stuff.

As the designer you are (in some capacity, at least—since you’re here in the first place), it’s your job to keep up with trends. Gradients, in general, have been a trend for a while. Considering that various sources have been discussing the “comeback” of CSS gradients for years now, it’s pretty clear that this “trend” is here to stay.

Regardless of following trends, though, you’re a smart cookie. It’s your job to make things that are aesthetically appealing and attractive to the masses. And, well, gradients are the best way to do that. So say goodbye to flat colors and boring, 2-dimensional design!

Let’s get into it, shall we?

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

Кроме цвета фона элемента мы можем также добавить к нему фоновое изображение. Такие изображения работают аналогично цвету фона, однако предлагают несколько дополнительных свойств для уточнения. Как и прежде, мы можем использовать свойство 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

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

Используем все, что мы уже узнали ранее, чтобы создать радиальный градиент. На самом деле это довольно просто,
достаточно в начале указать значение radial-gradient.

background: radial-gradient(#edf1cf, #43acb4);

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

background: radial-gradient(circle, #5d1a78, #414b50);

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

background: radial-gradient(circle at top left, #e1d767, #d3f6da);

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Использование нескольких градиентов в одном объявлении</title>
<style> 
.test {
margin: 50px auto; /* устанавливаем внешние отступы: сверху и снизу по 50 пикселей, слева и справа автоматически (центрируем элемент) */ 
width: 200px; /* устанавливаем ширину элемента */
height: 200px; /* устанавливаем высоту элемента */
background-image: linear-gradient(red 30%, transparent 30%, transparent 70%, red 70%), /* указываем три функции через запятую */ 
linear-gradient(90deg, red 31%, transparent 31%, transparent 42%, white 42%, white 58%, transparent 58%, transparent 69%, red 69%),
linear-gradient(red 42%, white 42%, white 58%, red 58%);
}
</style>
</head>
	<body>
		<div class = "test"></div>
	</body>
</html>
  • Первый градиент задает сверху вниз три части градиенту: 30% красный цвет, с 30% до 70% прозрачный и оставшаяся часть красный цвет. Зеленым отображен прозрачный участок.
  • Второй градиент задает слева направо (под углом 90 градусов) симметричное сочетание красный – прозрачный – прозрачный – белый – белый – прозрачный – прозрачный – красный. Как вы можете догадаться, повтор цвета необходим, чтобы убрать плавный переход между цветами (отсутствие размытия).
  • Третий градиент придает окончательный вид, флагу окрашивая не нужные в нашей композиции места.

Рис. 129 Порядок наложения градиентов в примере.

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


Рис. 130 Пример создания флага Швейцарии с использованием нескольких градиентов.

Остальные генераторы градиентов на css

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

Sdelatlending лёгкий линейный генератор

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

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

Virtuosoft умеет делать радиальный background

Инструмент virtuosoft умеет делать радиальные градиенты, так же просто как и линейные. Интерфейс похож на первый сервис, но в разы проще.

Можно настраивать под разные устройства, если включить поддержку в настройках, но тогда код становиться громадным, а вероятность что на сайт зайдут со старого ie 7 или с андроида меньше версии 2.3 очень мала. Так же можно сделать картинкой, нажав на кнопку get png. Сервис имеет ряд дополнений, таких как генератор тени к элементам.

Сssmatic поддерживает sass

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

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

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

тут

Вопросы и задачи по теме

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

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

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

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

Работа с фоном элемента

CSS функции:
радиальные градиенты

×

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Intermediate Patterns

Feeling pretty confident in your simple pattern skills? Perfect. It’s time to move on to some more puzzling patterns. We’re talking about a few different patterns that will require a little brain-teasin’, so don’t be nervous. These types of patterns will start to integrate both radial and linear gradients into the same syntax, which is cool, trust us.

Checkerboard

If you add a little transparency on the gradient app, you’ll notice this nice little grid pattern in the background. Guess what? That’s a css gradient pattern! The syntax for this pattern looks like this:

background-color: white;
background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Cross

This is getting more complicated, but it’s definitely worth it. For this pattern, you’re going to have to implement both linear and radial gradients. Don’t worry, you’re well-versed in both by now, so you can do it! Check out the syntax for this type of style:

background:
  radial-gradient(circle, transparent 20%, slategray 20%,
    slategray 80%, transparent 80%, transparent),
  radial-gradient(circle, transparent 20%, slategray 20%,
    slategray 80%, transparent 80%, transparent) 50px 50px,
  linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
  linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
background-color: slategray;
background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий