Генерируем градиент из двух и более любых цветов.
Основные формы градиента
- Линейный — переход происходит по прямой линии.
- Повторяющиеся линейный градиент.
- Отражённый — состоит из линейного градиента и его воображаемого отражения в зеркале.
- Круговой — напоминает собой алмаз.
- Радиальный — переход происходит от центра к краям в виде круга.
- Повторяющиеся радиальный градиент.
- Спиральный (CW/CCW) — переход происходит от центра к краям в виде спирали.
- Конический (конусный) симметричный — плавный переход вдоль длины окружности.
- Конический ассиметричный — плавный переход вдоль длины окружности.
- Повторяющиеся конический.
Направления градиента
| Позиция | Угол | Описание |
|---|---|---|
| top | 270deg | Сверху вниз |
| left | 0deg | Слева направо |
| bottom | 90deg | Снизу вверх |
| right | 180deg | Справа налево |
| top left | -45deg | От левого верхнего угла к правому нижнему |
| top right | 225deg | От правого верхнего угла к левому нижнему |
| bottom left | 45deg | От левого нижнего угла к правому верхнему |
| bottom right | -225deg | От правого нижнего угла к левому верхнему |
CSS3 и недостаток
Вместо одной строки в CSS (как нам это обещает спецификация, например linear-gradient(right top, yellow, blue);), в настоящее врямя приходиться писать отдельные определения для FF (-moz-) и webkit-браузеров (-webkit-), Opera (-o-), а также фильтр для IE (-ie-). Кроме того, все равно остается ряд браузеров, которые не поймут этих свойств. Для них придется применять JavaScript, что, конечно, скажется на быстродействии.
CSS функции linear-gradient и radial-gradient, описанные в проектах спецификации CSS3 дают нам мощный механизм создания градиентов. Но, так как фактически данная спецификация еще не окончена, пройдет, наверно, немало времени, пока мы сможем использовать эту мощь в своей работе. Тем не менее, все большее число браузеров в том или ином виде поддерживает CSS-градиенты, в этот список уже входят IE6-8+, Firefox 3.6+, Safari 4.0+, Chrome 2.0+.
Учитывая, что используя JavaScript можно реализовать градиент и для других браузеров, то новый метод имеет право на жизнь. Но с другой стороны, стоит ли использовать эти громоздкие методы для такой типичной и часто встречающейся задачи?
Помните, в нашем арсенале всегда остается и старый метод реализации градиента с помощью фонового рисунка.