Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!
А также:
Градиент в css
Градиенты в CSS
Когда мы говорим о градиентах в CSS, мы говорим о цветных градиентах.
В CSS существует два типа градиентов:
- линейные: цвета идут от одной точки к другой, по прямой линии;
- радиальные: цвета идут от центра круга к его краям, во всех направлениях.
Градиент считается фоновым изображением и должен использоваться с соответствующим свойством.
linear-gradient
Синтаксис для линейных градиентов является довольно сложным, но основная идея заключается в следующем:
- определить желаемые цвета;
- где эти цвета должны появиться вдоль оси (в начале, середине, конце и т. д.);
- в каком направлении должен идти градиент.
Давайте начнём с простого градиента из двух цветов:
CSS
div { background-image: linear-gradient(red, blue); }HTML
Простой вертикальный фоновый градиент.По умолчанию:
- направление вертикальное, сверху вниз;
- первый цвет в начале (вверху);
- второй цвет в конце (внизу).
Изменение направления
Если направление сверху вниз вам не подходит, вы можете поменять его на один из вариантов:
- определить назначение градиента, с помощью таких ключевых слов, как to left top;
- определить конкретный угол в градусах, вроде 45deg.
Это направление должно быть установлено перед цветом:
CSS
div { background-image: linear-gradient(to bottom right, yellow, purple); width: 200px; }HTML
Диагональный градиент от левого верхнего угла в правый нижний угол.Если вы хотите задать конкретный угол, то можете использовать значение в градусах:
- 0deg — снизу вверх;
- 20deg — немного по диагонали, идущей по часовой стрелке;
- 90deg — подобно 15 часам, слева направо;
- 180deg — это значение по умолчанию, сверху вниз.
CSS
div { background-image: linear-gradient(20deg, green, blue); width: 150px; }HTML
Диагональный градиент с углом 20 градусов.Добавление большего количества цветов
Вы можете вставить столько цветов, сколько захотите. Они будут равномерно распределены вдоль оси:
- два цвета: 0% и 100%
- три цвета: 0%, 50% и 100%
- четыре цвета: 0%, 33%, 67% и 100%
CSS
div { background-image: linear-gradient(orange, grey, yellow); width: 150px; }HTML
Довольно некрасивый градиент, но тут важна идея.Определение конкретных точек цвета
Если вы не хотите, чтобы цвет распределялся равномерно, то можете установить определённые позиции цвета, используя либо проценты (%), либо пиксели (px):
CSS
div { background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px; }HTML
Тоже уродливый градиент, но тут важна идея.В данных параметрах:
- у цвета orange не задана позиция цвета, так что значение по умолчанию равно 0%;
- цвет grey ближе к верху, на 10% вместо 50%;
- цвет yellow занимает половину градиента, от 50% и до конца 100%.
radial-gradient
В то время как линейные градиенты идут вдоль одиночной оси, радиальные градиенты распространяются во всех направлениях. Их синтаксис очень похож на линейные градиенты, поскольку у тех и других есть точки цвета. Но вместо указания направления вам необходимо задать:
- форму: круг или эллипс;
- начальную точку: которая будет центром круга или эллипса;
- конечную точку: где будет край круга или эллипса.
CSS
div { background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px; }HTML
Это очень похоже на солнце, не так ли?По умолчанию:
- градиент является эллипсом;
- первый цвет начинается в центре;
- последний цвет заканчивается в самом дальнем углу.
Начальная позиция
Начальная позиция работает как background-position. Вы можете установить её через ключевое слово at.
CSS
div { background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px; }HTML
Мрачный день.Конечная позиция
По умолчанию форма завершается в самом дальнем углу. Вы можете выбрать:
- closest-side
- closest-corner
- farthest-side
- farthest-corner
Разница одновременно трудна для понимания и представления, поэтому я не буду вдаваться в подробности. У Mozilla есть хорошее описание различных значений.
CSS
div { background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px; } div:hover { background-image: radial-gradient(farthest-side at 20px 20px, green, blue); }HTML
Наведите указатель мыши на эту зелёную звезду в небе, чтобы увидеть как она расширяется.Фиксированный размер
Вместо установки начальной и конечной позиций, вы можете просто задать конкретные размеры:
CSS
div { background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px; }HTML
Небольшой фиолетовый диск в море розового цвета.Градиенты в CSS являются мощным средством, учитывая бесконечное число вариантов.
Примеры на этой странице умышленно сделаны «некрасивыми», с ярко выраженными различиями цветов, чтобы лучше объяснить, как работает каждое свойство.
Но довольно легко писать едва уловимые градиенты, особенно для кнопок:
CSS
.button-grey { background-image: linear-gradient(#f2f2f2, #f2f2f2); } .button-yellow { background-image: linear-gradient(#fce374, #fcdf5b); } .button-orange { background-image: linear-gradient(#f58a38, #f57c20); } .button-red { background-image: linear-gradient(#ed6d64, #ed574c); } .button-purple { background-image: linear-gradient(#847bba, #7568ba); } .button-blue { background-image: linear-gradient(#42b0e3, #2ba9e3); } .button-green { background-image: linear-gradient(#97cc76, #8bcc62); }Перейти к заданиям
CSS-градиенты: линейные градиенты
CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.
Спецификация: w3.org/TR/css3-images/#gradients.
Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.
Linear-gradient
Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:
background: linear-gradient(orangered, gold);Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.
Направление можно задавать градусами или ключевыми словами.
В градусах: от 0 до 360, например 270deg.
Ключевыми словами: to top = 0deg; to right = 90deg; to bottom = 180deg — значение по умолчанию; to left = 270deg.
Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left.
Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:
Вот код самого первого квадрата, для примера:
.top-left { background: linear-gradient(to top left, purple, crimson, orangered, gold); }Следует помнить, что to top right не то же самое, что 45deg. Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.
Разница хорошо видна на прямоугольных фигурах:
Также можно задавать точки остановки для цветов градиента, значения задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.
Примеры задания значений в %, в em и значения, выходящие за границы элемента:
Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:
Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:
Полоски на фоне сайдбара — ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.
Градиент в примере задан сложным длинным кодом, потому что полоски должны располагаться только над фоном для сайдбара. Если не пытаться сделать всё фоном для одного блока, можно было бы решить задачу с помощью псевдоэлемента.
При отсутствии ограничений код может быть гораздо короче:
.light { background: peachpuff linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50% ) center center / 2em; } .dark { background: steelblue linear-gradient( rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50% ) center center / 100% 1em; }В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй — определяем цвета градиента и границу между ними, в третьей — задаем положение и размер получившегося изображения. Самая важная часть — размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно : )
Вся запись может быть сделана в одну строчку, но для читабельности удобнее писать в несколько, особенно для сложных градиентов.
Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:
Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.
Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0). Про разные способы задавать цвета можно почитать здесь.
Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться CSS.coloratum, инструментом от Lea Verou.
Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент
Примерный код:
background: repeating-linear-gradient( green, green .5em, transparent .5em, transparent 1em );К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat.
Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.
Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.
Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.
В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.
CSS Gradients
Gradient Background
CSS gradients let you display smooth transitions between two or more specified colors.
CSS defines two types of gradients:
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
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, ...);
Linear Gradient - Top to Bottom (this is default)
The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:
#grad { background-image: linear-gradient(red, yellow);}
Try it Yourself »Linear Gradient - Left to Right
The following example shows a linear gradient that starts from the left. It starts red, transitioning to yellow:
#grad { background-image: linear-gradient(to right, red , yellow);}
Try it Yourself »Linear Gradient - 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:
#grad { background-image: linear-gradient(to bottom right, red, yellow);}
Try it Yourself »If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).
Syntax
background-image: linear-gradient(angle, color-stop1, color-stop2);
The angle is specified as an angle between a horizontal line and the gradient line.
The following example shows how to use angles on linear gradients:
The following example shows a linear gradient (from top to bottom) with multiple color stops:
The following example shows how to create a linear gradient (from left to right) with the color of the rainbow and some text:
Gradient Background
#grad { background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}
Try it Yourself »CSS gradients also support transparency, which can be used to create fading effects.
To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color red:
#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}
Try it Yourself »The repeating-linear-gradient() function is used to repeat linear gradients:
A repeating linear gradient:
#grad { background-image: repeating-linear-gradient(red, yellow 10%, green 20%);}
Try it Yourself »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:
Radial Gradient - Differently Spaced Color Stops
The following example shows a radial gradient with differently spaced color stops:
#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%);}
Try it Yourself »The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
#grad { background-image: radial-gradient(circle, red, yellow, green);}
Try it Yourself »The size parameter defines the size of the gradient. It can take four values:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
A radial gradient with different size keywords:
#grad1 { background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);} #grad2 { background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);}
Try it Yourself »Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:
A repeating radial gradient:
#grad { background-image: repeating-radial-gradient(red, yellow 10%, green 15%);}
Try it Yourself »The following table lists the CSS gradient properties:
| background-image | Sets one or more background images for an element |
Взгляд на CSS3 градиент (линейный и радиальный градиенты)
Здравствуйте, уважаемые читатели XoZbloga! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.
Линейный градиент
Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.
В общем случае синтаксис градиента (линейного) выглядит так:
| div { background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%); } |
Итак, давайте обо всем по порядку.
Прежде всего, линейный градиент объявлен функцией linear-gradient(). Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom, left и right;
| div { background-image: linear-gradient(top, #FF5A00, #FFAE00); } |
Чтобы добиться перехода цвета из одного угла в другой мы можем использовать градус угла, вот пример:
| div { background-image: linear-gradient(45deg, #FF5A00, #FFAE00); } |
Если угол будет отрицательным то позиция смениться с нижнего левого угла на верхний левый.
Второе значение функции это начальный цвет и его стоп позиция, которая указана в процентах. Объявление данной позиции не обязательно, браузер по умолчанию присвоит первому цвету значение 0%.
Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100%. Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50%, то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:
| div { background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%); } |
Теперь давайте изменим значение стоп позиций, и на этот раз мы установим 50% для первого и второго цвета:
| div { background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 50%); } |
Получаем одинаковые по высоте полоски. C четкой границей, перехода цвета не будет. Чтобы лучше понять как это работает поэкспериментируйте со значениями.
Радиальный градиент
Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient(). Также есть и основные значения: это форма радиального градиента (circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:
| div { background: radial-gradient(circle, #F9E497, #FFAE00); } |
Если не указывать форму, то по-умолчанию будет установлен эллипс.
Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами (top, bottom, left, right и center), а также их комбинациями, либо указать в процентах или пикселях.
Комбинации команд:
- По центру вверху — top — 50% 0%;
- В левом верхнем углу — left top — 0% 0%;
- В правом верхнем углу — right top — 100% 0%;
- По центру — center — 50% 50%;
- Слева по центру — left center — 0% 50%;
- Справа по центру — right center — 100% 50%;
- По центру снизу — bottom — 50% 100%;
- В левом нижнем углу — left bottom — 0% 100%;
- В правом нижнем углу — right bottom — 100% 100%.
Вот пример с процентами:
| div { background-image: radial-gradient(70% 20%, circle, #F9E497, #FFAE00); } |
Первое значение по оси Х второе по У.
Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:
| Значение | Описание |
| closest-side | Размер градиента рассчитывается из расстояния до любой ближней стороны блока (для circle) или до ближних сторон по X и по У (для ellipse). Примеры чуть ниже. |
| farthest-side | Размер также рассчитывается из расстояния, но уже до дальних сторон. |
| closest-corner | Теперь в качестве ориентира используются ближние углы. |
| farthest-corner | Рассчитывается из расстояния до дальних углов. |
Чтобы, это лучше понять рассмотрим на примере. Градиент эллиптической формы с белым начальным и конечным синим цветом:
| div { background-image: radial-gradient(230px 50px, ellipse closest-side, white, blue); } |
Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X.
А теперь до дальних сторон:
| div { background-image: radial-gradient(230px 50px, ellipse farthest-side, white, blue); } |
Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.
В радиальном как и в линейном градиенте для цвета могут быть применены стоп позиции. Хочется также заметить, если необходимо достигнуть прозрачности цветов то использовать следует rgba.
| div { background-image: linear-gradient(top, rgba(255,90,0,0.2), rgba(255,174,0,0.2)); } |
Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.
В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.
| div { background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); } |
Повторяющийся градиент
Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.
| div { background-image: repeating-radial-gradient(red, blue 20px, red 40px); } |
Кроссбраузерность
К сожалению, на момент написания этой статьи, современные браузеры еще не поддерживают стандартный синтаксис. Они по прежнему нуждаются в префиксах, каждый в своих (-webkit-, -moz-, -ms- и -o-). Поэтому синтаксически правильным является вот такое описание градиента:
| div { background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для Chrome и Safari */ background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для Firefox */ background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для IE 10+ */ background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* для Opera */ background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%); /* стандартный синтаксис */ } |
Чтобы упростить задачу с префиксами, можно использовать бесплатную библиотеку Prefix-Free.
Для того чтобы градиент заработал на «9 осле» (Internet Explorer 9), пишем так:
| div { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00); } |
Но даже здесь есть ограничения, нельзя добавить более 3 цветов и для использования прозрачности нужно немного изменить HEX код цвета:
| div { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00); } |
Где 33 сразу после решетки это процент насыщенности цвета.
Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии. Спасибо!
