Градиентор цвета
Градиент позволяет сделать расцветку блока более объемной и стильной.
Основные типы градиентов
Линейный [1] — переход происходит по прямой линии.
Отраженный [2] — состоит из линейного градиента и его воображаемого отражения в зеркале.
Угловой [3] — состоит из линейного градиента повернутого на 45 градусов.
Круговой [4] — напоминает собой алмаз.
Радиальный [5] — переход происходит от центра к краям в виде круга.
Спиральный (CW/CCW) [6] — переход происходит от центра к краям в виде спирали
Конический (симм. [7] и ассим. [8]) — плавный переход вдоль длины окружности
Направления
Позиция | Угол | Описание
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 можно реализовать градиент и для других браузеров, то новый метод имеет право на жизнь. Но с другой стороны, стоит ли использовать эти громоздкие методы для такой типичной и часто встречающейся задачи?
Помните, в нашем арсенале всегда остается и старый метод реализации градиента с помощью фонового рисунка.
CSS функции linear-gradient и radial-gradient, описанные в проектах спецификации CSS3 дают нам мощный механизм создания градиентов. Но, так как фактически данная спецификация еще не окончена, пройдет, наверно, немало времени, пока мы сможем использовать эту мощь в своей работе. Тем не менее, все большее число браузеров в том или ином виде поддерживает CSS-градиенты, в этот список уже входят IE6-8+, Firefox 3.6+, Safari 4.0+, Chrome 2.0+.
Учитывая, что используя JavaScript можно реализовать градиент и для других браузеров, то новый метод имеет право на жизнь. Но с другой стороны, стоит ли использовать эти громоздкие методы для такой типичной и часто встречающейся задачи?
Помните, в нашем арсенале всегда остается и старый метод реализации градиента с помощью фонового рисунка.
