Создание линейных градиентов кросс-браузера с помощью CSS3
Линейные градиенты
Наиболее распространенным типом градиента, который вы увидите, является линейный градиент двух цветов. Это означает, что градиент будет двигаться по прямой, постепенно меняющейся от первого цвета к второй вдоль этой линии. Изображение на этой странице показывает простой градиент слева направо # 999 (темно-серый) на #fff (белый).
Линейные градиенты наиболее просты в определении и имеют наибольшую поддержку в браузерах. Линейные градиенты CSS3 поддерживаются в Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ и Safari 4+. Internet Explorer может добавлять градиенты, используя фильтр и поддерживает их обратно в IE 5.5. Это не CSS3, но это вариант совместимости с несколькими браузерами.
Когда вы определяете градиент, вам нужно определить несколько разных вещей:
- Какой тип градиента это -
линейныйили жерадиальный - Где должен начинаться градиент
- Где градиент должен остановиться
- Какие цвета находятся в градиенте и где они должны начинаться и останавливаться
Чтобы определить линейные градиенты с помощью CSS3, вы пишете:
линейный градиент (угол или же сторона или угол, остановка цвета, остановка цвета)
- Сначала вы определяете тип градиента с именем
линейный -gradient. - Затем вы определяете точки старта и остановки градиента одним из двух способов:
уголлинии в градусах от 0 до 359, при этом 0 градусов направлены вверх. Или с помощью функции «стороны или угла», напримероставил,право,низ, а такжеТоп, Они будут более подробно описаны на следующей странице. Если вы оставите их, градиент будет течь сверху вниз. - Затем вы определяете прекращение цвета. Вы определяете прекращение цвета с цветовым кодом и дополнительным процентом. Процент указывает браузеру, где на линии начинается или заканчивается этот цвет. Значение по умолчанию заключается в равномерном размещении цветов вдоль линии. Вы узнаете больше о остановках цвета на стр. 3.
Итак, чтобы определить вышеупомянутый градиент с помощью CSS3, вы пишете:
линейный градиент (слева, # 999999 0%, #ffffff 100%);
И установить его как фон DIV ты пишешь:
div {background-image: linear-gradient (слева, # 999999 0%, #ffffff 100%;} Расширения браузера для линейных градиентов CSS3
Чтобы ваш градиент работал в кросс-браузере, вам необходимо использовать расширения браузера для большинства браузеров и фильтр для Internet Explorer 9 и ниже (фактически 2 фильтра). Все они принимают одинаковые элементы для определения вашего градиента (за исключением того, что вы можете определять только 2-цветные градиенты в IE).
Фильтры и расширения Microsoft-Internet Explorer является наиболее сложным для поддержки, потому что вам нужны три разные строки для поддержки различных версий браузера. Чтобы получить градиент от серого до белого, вы должны написать:
/ * IE 5.5-7 * /filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8-9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-linear-gradient (слева, # 999999 0%, #ffffff 100%);
Расширение Mozilla-The -moz- расширение работает как свойство CSS3, как раз с -moz- расширение. Чтобы получить вышеупомянутый градиент для Firefox, напишите:
-moz-linear-gradient (слева, # 999999 0%, #ffffff 100%);
Расширение Opera-The -о- расширение добавляет градиенты в Opera 11.1+. Чтобы получить вышеуказанный градиент, напишите:
-o-linear-gradient (слева, # 999999 0%, #ffffff 100%);
Расширение Webkit-The -webkit- расширение работает так же, как и свойство CSS3. Чтобы определить вышеуказанный градиент для Safari 5.1+ или Chrome 10+, вы пишете:
-webkit-linear-gradient (слева, # 999999 0%, #ffffff 100%);
Существует также старая версия расширения Webkit, которая работает с Chrome 2+ и Safari 4+. В нем вы определяете тип градиента как значение, а не в имени свойства. Чтобы получить градиент от серого до белого с помощью этого расширения, напишите:
-webkit-gradient (линейный, левый верхний, правый верхний, цвет-стоп (0%, # 999999), color-stop (100%, # ffffff)); Полный CSS CSS-код линейного градиента
Для полной поддержки кросс-браузера для получения градиента от серого до белого вы должны сначала включить резервный сплошной цвет для браузеров, которые не поддерживают градиенты, а последний элемент должен быть стилем CSS3 для полностью совместимых браузеров. Итак, вы пишете:
фон: # 999999;background: -moz-linear-gradient (слева, # 999999 0%, #ffffff 100%);background: -webkit-gradient (линейный, левый верхний, правый верхний, цвет-стоп (0%, # 999999), color-stop (100%, # ffffff));background: -webkit-linear-gradient (слева, # 999999 0%, #ffffff 100%);background: -o-linear-gradient (слева, # 999999 0%, #ffffff 100%);background: -ms-linear-gradient (слева, # 999999 0%, #ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);background: linear-gradient (слева, # 999999 0%, #ffffff 100%);
Следующие страницы этого руководства объясняют детали градиента более подробно, а последняя страница указывает на инструмент, который является отличным способом создания градиентов CSS3 автоматически.
Смотрите этот линейный градиент в действии, используя только CSS.
02 из 04Создание диагональных градиентов - угол градиента
Точки начала и остановки определяют угол градиента. Большинство линейных градиентов расположены сверху вниз или слева направо. Но можно построить градиент, который движется по диагональной линии. Изображение на этой странице показывает простой градиент, который перемещается под углом 45 градусов по изображению справа налево.
Углы для определения градиентной линии
Угол - это линия на воображаемой окружности в центре элемента. 0deg указывает, 90deg указывает направо, 180deg указывает вниз, и 270deg указывает налево. Вы можете определить любой угол от 0 до 359 градусов.
Следует отметить, что в квадрате угол 45 градусов перемещается из верхнего левого угла в нижнее правое, но в прямоугольнике начальная и конечная точки немного за пределами формы, как вы можете видеть на изображении.
Более распространенным способом определения диагонального градиента является определение угла, например в правом верхнем углу и градиент переместится из этого угла в противоположный угол. Вы можете определить начальную позицию со следующими ключевыми словами:
- Топ
- право
- низ
- оставил
- центр
И их можно комбинировать, чтобы быть более конкретными, например:
- в правом верхнем углу
- верхний левый
- верхний центр
- Нижний правый
- Нижний левый
- нижний центр
- правый центр
- левый центр
Вот CSS для градиента, аналогичного изображенному на рисунке, от красного до белого, переходящего из верхнего правого угла в нижний левый:
фон: ## 901A1C;background-image: -moz-linear-gradient (правый верх, # 901A1C 0%, # FFFFFF 100%);background-image: -webkit-gradient (линейный, правый верхний, левый нижний, цвет-стоп (0, # 901A1C), color-stop (1, #FFFFFF));background: -webkit-linear-gradient (правый верх, # 901A1C 0%, #ffffff 100%);background: -o-linear-gradient (правый верх, # 901A1C 0%, #ffffff 100%);background: -ms-linear-gradient (правый верх, # 901A1C 0%, #ffffff 100%);background: linear-gradient (правый верх, # 901A1C 0%, #ffffff 100%);
Возможно, вы заметили, что в этом примере нет фильтров IE. Это связано с тем, что IE разрешает использовать только два типа фильтров: сверху вниз (по умолчанию) и слева направо (с GradientType = 1 переключатель).
Смотрите этот диагональный линейный градиент в действии, используя только CSS.
03 из 04Цветные стопы
С линейными градиентами CSS3 вы можете добавить несколько цветов в свой градиент, чтобы создать даже более эффектные эффекты. Чтобы добавить эти цвета, вы добавляете дополнительные цвета в конец вашего свойства, разделенные запятыми. Вы должны указать, где на линии должны начинаться или заканчиваться цвета.
Фильтры Internet Explorer поддерживают только две остановки цвета, поэтому, когда вы создаете этот градиент, вы должны включать только первый и второй цвета, которые вы хотите отобразить.
Вот CSS для вышеупомянутого 3-цветного градиента:
background: #ffffff;background: -moz-linear-gradient (left, #ffffff 0%, # 901A1C 51%, #ffffff 100%);background: -webkit-gradient (линейный, левый верхний, правый верхний, цвет-стоп (0%, # ffffff), color-stop (51%, # 901A1C), color-stop (100%, # ffffff));background: -webkit-linear-gradient (слева, #ffffff 0%, # 901A1C 51%, # ffffff 100%);background: -o-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);background: -ms-linear-gradient (слева, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);background: linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Посмотрите на этот линейный градиент с тремя остановками цвета в действии, используя только CSS.
04 из 04Сделать градиенты здания проще
Есть два сайта, которые я рекомендую для того, чтобы помочь вам создавать градиенты, у каждого из них есть свои преимущества и недостатки, я не нашел градиент-строитель, который все еще делает.
Ultimate CSS Gradient GeneratorЭтот генератор градиента очень популярен, потому что он аналогичным образом работает с градиентными сборщиками в таких программах, как Photoshop. Мне также нравится, потому что он дает вам все расширения CSS, а не только Webkit и Mozilla. Проблема с этим генератором заключается в том, что он поддерживает только горизонтальные и вертикальные градиенты. Если вы хотите сделать диагональные градиенты, вам нужно перейти к другому генератору, который я рекомендую. Генератор градиентов CSS3Этот генератор взял меня немного дольше, чем первый, но он поддерживает изменение направления по диагонали. Если вы знаете другого генератора градиентов CSS, который вам больше нравится, сообщите нам об этом.
