CSS3 градиенты позволяют отображать плавные переходы между двумя или более заданных цветов.
Ранее вы должны были использовать образы для этих эффектов. Однако, с помощью CSS3 градиентов вы можете уменьшить время загрузки и использования пропускной способности. Кроме того, элементы с градиенты выглядят лучше при увеличении, так как градиент генерируется браузером.
CSS3 определяет два типа градиентов:
- Линейные Градиенты (идет вниз / вверх / влево / вправо / по диагонали)
- Радиальными градиентами (определяется их центром)
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit-, -moz- или -o- указать первую версию , которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 Градиенты Линейные
Чтобы создать линейный градиент, необходимо определить по крайней мере два цвета остановки. Цвет остановки цвета, которые вы хотите сделать плавные переходы между. Вы также можете установить начальную точку и направление (или угол), наряду с градиентом эффект.
Синтаксис
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );Линейный градиент - Сверху вниз (это по умолчанию)
Следующий пример показывает, линейный градиент, который начинается в верхней части. Она начинается красный, желтый переходит к:
пример
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} Попробуй сам " Линейный градиент - слева направо
Следующий пример показывает, линейный градиент, который начинается с левой стороны. Она начинается красный, желтый переходит к:
пример
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} Попробуй сам " Линейный градиент - Диагональ
Вы можете сделать градиент по диагонали, указав как горизонтальные и вертикальные стартовые позиции.
Следующий пример показывает, линейный градиент, который начинается в левом верхнем углу (и идет в нижнем правом углу). Она начинается красный, желтый переходит к:
пример
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} Попробуй сам " Использование ракурсов
Если вы хотите получить больше контроля над направлением градиента, можно определить угол, вместо предварительно определенных направлений (вниз, вверх, направо, налево, направо вниз и т.д.).
Синтаксис
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
Угол задается как угол между горизонтальной линией и линией градиента.
В следующем примере показано, как использовать углы на линейных градиентов:
пример
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} Попробуй сам " Использование нескольких цветовых узлов
В следующем примере показан линейный градиент (сверху вниз) с несколькими остановками цвета:
пример
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} Попробуй сам " В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и текстом:
пример
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} Попробуй сам " Использование прозрачности
CSS3 градиенты также поддерживают прозрачность, которая может быть использована для создания замирания эффектов.
Чтобы добавить прозрачности, мы используем rgba() функцию , чтобы определить точки перехода цвета. Последний параметр в rgba() функция может иметь значение от 0 до 1, и она определяет прозрачность цвета: 0 означает полную прозрачность, 1 показывает полный цвет (без прозрачности).
Следующий пример показывает, линейный градиент, который начинается с левой стороны. Он начинает полностью прозрачный, переход к полной красный цвет:
пример
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} Попробуй сам " Повторяя линейного градиента
repeating-linear-gradient() функция используется для повторения линейных градиентов:
пример
Повторяющийся линейный градиент:
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Попробуй сам " CSS3 радиальными градиентами
Радиальный градиент определяется его центром.
Чтобы создать радиальный градиент необходимо также определить по крайней мере, два цветных стопы.
Синтаксис
background: radial-gradient( shape size at position, start-color, ..., last-color );По умолчанию, форма эллипса, размер дальняя угла, и положение центра.
Radial Gradient - Ритмично расставленные Цвет Остановки (это по умолчанию)
В следующем примере показан радиальный градиент с равномерно распределенными цветными остановками:
пример
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} Попробуй сам " Радиальный градиент - иначе разнесены Цвет Остановки
В следующем примере показан радиальный градиент с по-разному отстоящих друг от друга цвета остановок:
пример
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} Попробуй сам " Набор Форма
Параметр формы определяет форму. Он может принимать значения круг или эллипс. Значение по умолчанию эллипсом.
В следующем примере показан радиальный градиент с формой круга:
пример
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} Попробуй сам " Использование Размер различных ключевых слов
Параметр размер определяет размер градиента. Он может принимать четыре значения:
- ближе всего на стороне
- дальняя сторона
- ближе всего угла
- самый дальний угол,
пример
Радиальным градиентом с разными ключевыми словами Размер:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} Попробуй сам " Повторяя радиального градиента
repeating-radial-gradient() функция используется для повторения радиальных градиентов:
пример
Повторяющийся радиальный градиент:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6» Упражнение 7 »