CSS3 Градиент
CSS3 градиенты (градиентов) позволяет отображать плавный переход между двумя или более заданных цветов.
Раньше вы должны использовать изображения для достижения этих эффектов. Однако при использовании CSS3 градиентов (градиентов), вы можете уменьшить загрузку событий и использование широкополосной связи. Кроме того, элементы эффектов перехода выглядят лучше при увеличении масштаба, так как градиент (градиент) генерируется браузером.
CSS3 определяет два типа градиентов (градиентов):
- Линейный градиент (линейный Градиент) - вверх / вниз / влево / вправо / диагональном направлении
- Радиальный градиент (Radial Градиенты) - определяется их центром
Поддержка браузеров
Числа в таблице атрибутов определяет полную поддержку первой версии браузера.
Позади с -webkit -, - moz- или -о- определяет необходимое число с атрибутом префикса для поддержки первой версии.
| 属性 | |||||
|---|---|---|---|---|---|
| linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 линейный градиент
Чтобы создать линейный градиент, необходимо определить, по крайней мере, два цвета узлов. Цвет узел, который цвет вы хотите, чтобы показать плавный переход. В то же время, вы можете также установить начальную точку и направление (или угол).
Линейные примеры градиента:
грамматика
Линейный градиент - сверху вниз (по умолчанию)
Следующий пример демонстрирует, линейный градиент от вершины. Отправной точкой является красный, и медленно переход к синий:
примеров
Линейный градиент сверху вниз:
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
Попробуйте »
Линейный градиент - слева направо
Следующий пример демонстрирует, линейный градиент слева. Отправной точкой является красный, и медленно переход к синий:
примеров
Линейный градиент слева направо:
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
Попробуйте »
Линейный градиент - диагональная
Вы можете сделать градиент по диагонали, определяя горизонтальную и вертикальную стартовую позицию.
Следующий пример демонстрирует, с верхнего левого угла (внизу справа) линейный градиент. Отправной точкой является красный, и медленно переход к синий:
примеров
Из верхнего левого в нижний правый угол линейного градиента:
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
Попробуйте »
угол использования
Если вы хотите получить больше контроля над направлением градиента, можно определить точку зрения, а не заранее определенном направлении (вниз, вверх, направо, налево, направо вниз, и так далее).
грамматика
Угол относится к углу между горизонтальным и градиентной линии, вычисленный против часовой стрелки. Другими словами, 0deg создаст градиент снизу вверх, 90deg создает градиент слева направо.
Тем не менее, обратите внимание, что многие браузеры (Chrome, Safari, fiefox и т.д.) с использованием старого стандарта, а именно 0deg создаст градиент слева направо, 90deg создаст градиент снизу вверх. Формула преобразования 90 - х = у , где х является стандартным угол, у является нестандартным углом.
В следующем примере показано, как использовать линейный угол градиента:
примеров
Линейный градиент с определенным углом:
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}
Попробуйте »
Использование нескольких цветовых узлов
В следующем примере показано, как задать множество цветовых узлов:
примеров
Линейный градиент сверху вниз с множеством цветовых узлов:
background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green, blue); /* 标准的语法 */
}
Попробуйте »
В следующем примере показано, как создать радугу цветов и текста с линейным градиентом:
примеров
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 标准的语法 */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Попробуйте »
Прозрачность (Transparency)
CSS3 градиенты также поддерживает прозрачность (прозрачность), она может быть использована для создания эффекта ослабления замираний.
Чтобы добавить прозрачности, мы используем функцию RGBA (), чтобы определить цвет узла. RGBA () Функция последним параметром является значение от 0 до 1, которое определяет прозрачность цвета: 0 полностью прозрачный, 1 полностью прозрачна.
Следующий пример демонстрирует, линейный градиент слева. Отправной точкой является полностью прозрачным, и медленно переход к полностью непрозрачным красным:
примеров
Линейный градиент слева направо, с прозрачностью:
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)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
Попробуйте »
Дубликат линейный градиент
функция повторения-линейного градиента () используется, чтобы повторить линейный градиент:
примеров
Дубликат линейный градиент:
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Попробуйте »
CSS3 радиальный градиент
Радиальный градиент определяется его центром.
Чтобы создать радиальный градиент, необходимо также определить, по крайней мере, два цвета узлов. Цвет узел, который цвет вы хотите, чтобы показать плавный переход. В то же время, вы можете также указать центр градацией, формы (прототип или овальной формы), размер. По умолчанию, те, в центре находится центр (показанный в центре), форма градация Эллипс (представлены эллипсом), размер градиента является дальняя-угол (представлен в дальний угол).
Радиальные примеры градиента:
грамматика
Radial Gradient - Цвет узлы равномерно распределены (по умолчанию)
примеров
Радиальная градиент цвета узла равномерно распределены:
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
Попробуйте »
Радиальный градиент - цвет неравномерно распределены узлы
примеров
Радиальная градиент цвета узел распределены неравномерно:
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
Попробуйте »
Настройка формы
Параметр формы определяет форму. Это может быть значение, круг или эллипс. Отличающийся тем, что круг, представляющий круг, эллипс показывает овальные. Значение по умолчанию эллипсом.
примеров
Форма кругового радиального градиента:
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
Попробуйте »
Используйте ключевые слова в различных размерах
Параметр размера определяет размер градиента. Это могут быть следующие четыре значения:
- ближе всего на стороне
- дальняя сторона
- ближе всего угла
- самый дальний угол,
примеров
Радиальный градиент с различными размерами ключевых слов:
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
#grad2 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}
Попробуйте »
Повторите радиальный градиент
Функция повторения-радиального градиента () используется, чтобы повторить радиальный градиент:
примеров
Повторите радиальный градиент:
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Попробуйте »