Руководство по CSS3 линейным градиентам

Градиент – отличное дополнение цвета в CSS3. Вместо того, чтобы добавлять только один цвет, теперь мы можем добавить несколько цветовых комбинаций в одном блоке декларации, не полагаясь на изображения, что может уменьшить HTTP-запрос на нашем веб-сайте, позволяя загружать сайт быстрее.

Если вы играли с градиентами в CSS3, вы, вероятно, знакомы с двумя методами: радиальным и линейным градиентом. Сегодняшний пост будет о последнем.
Создание градиентов
Как сказано в спецификации градиенты в CSS3 это изображение, он не имеет специального свойства, как другие новые функции, поэтому он объявляется с использованием свойства background-image.

Если мы посмотрим на полный синтаксис для градиента, он выглядит немного растянутый, что может привести к путанице для некоторых людей.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

div {
background-image: -webkit-linear-Gradient (вверху, # FF5A00 0%, # FFAE00 100%);
background-image: -moz-linear-Gradient (вверху, # FF5A00 0%, # FFAE00 100%);
фоновое изображение: -ms-линейный градиент (вверху, # FF5A00 0%, # FFAE00 100%);
фоновое изображение: -o-линейный градиент (вверху, # FF5A00 0%, # FFAE00 100%);
background-image: линейный градиент (вверху, # FF5A00 0%, # FFAE00 100%);
}

Итак, давайте посмотрим на каждую часть синтаксиса одну за другой, чтобы прояснить ситуацию.

Прежде всего, линейный градиент объявляется с помощью функции linear-градиента (). Функция имеет три основных значения. Первое значение определяет начальную позицию градиента. Вы можете использовать описательное ключевое слово, например, top, чтобы начать градиент, текущий сверху;

div {
background-image: линейный градиент (вверху, # FF5A00, # FFAE00);
}

Приведенный выше фрагмент является официальной версией W3C создавать градиенты. Это на самом деле проще и не требует пояснений, а также создаст следующий градиент.
Вы также можете использовать дно, чтобы сделать противоположное, или же вправо и влево.

Мы также можем создать диагональный градиент, используя угол в качестве начальной позиции градиента. Вот пример:

div {
background-image: линейный градиент (45 градусов, # FF5A00, # FFAE00);
}

Приведенный выше фрагмент создаст следующий цветовой градиент:
Второе значение функции сообщит информацию о первом цвете и его позиции остановки, которая указана в процентах. Положение остановки на самом деле не является обязательным; браузер достаточно умен, чтобы определить правильное положение, поэтому, если мы не укажем остановку первого цвета, браузер примет 0% по умолчанию.

И следующее значение – это вторая цветовая комбинация. Это работает как предыдущее значение, только если это последний примененный цвет, и мы не указали позицию остановки, значение по умолчанию будет приниматься за 100%. Теперь давайте посмотрим на пример ниже:

div {
background-image: линейный градиент (вверху, # FF5A00 0%, # FFAE00 100%);
}

Приведенный выше фрагмент создаст градиент, подобный тому, что мы видели ранее (без разницы), но теперь мы указываем положение остановки цвета;
Теперь давайте изменим остановку цвета, и на этот раз мы укажем 50% для первого цвета и 51% для второго цвета, и давайте посмотрим, как это получается;

div {
background-image: линейный градиент (вверху, # FF5A00 50%, # FFAE00 51%);
}

прозрачность
Создание прозрачности в градиенте также возможно. Для создания эффекта нам нужно перевести цветной гекс в режим rgba и понизить альфа-канал.

div {
фоновое изображение: линейный градиент (вверху, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
}

Приведенный выше фрагмент снизит интенсивность цвета на 20%, и градиент получится следующим образом:
Несколько цветов
Если вы хотите добавить больше цветов, просто добавьте цвета рядом с другим с разделителем-запятой и позвольте браузеру определить каждую позицию остановки цвета.

div {
фоновое изображение: линейный градиент (верх, красный, оранжевый, желтый, зеленый, синий, индиго, фиолетовый);
}

Фрагмент выше создаст следующую радугу.
Совместимость браузера
К сожалению, на момент написания этой статьи все современные браузеры еще не поддерживали стандартный синтаксис. Им по-прежнему нужен префикс поставщика (-webkit-, -moz-, -ms- и -o-). Вот почему полный синтаксис выглядит так:

С другой стороны, Internet Explorer, особенно версия 9 и ниже, далек от стандарта. Градиент в IE9 и ниже объявлен с помощью фильтра, поэтому, если мы хотим добавить градиент в этих браузерах, мы должны написать что-то вроде этого;

div {
фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
}

Фильтр имеет свои ограничения: во-первых, он не позволяет добавлять более трех цветов, и создание эффекта прозрачности также немного сложнее – он не позволяет использовать rgba, но фильтр IE использует #ARGB;

div {
фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
}

Вот инструмент, чтобы помочь вам конвертировать rgba в #ARGB,
Написание синтаксиса быстрее
Как вы можете видеть выше, чтобы поддерживать совместимость градиентов между браузерами, нам нужно добавить еще пять строк кода, что неэффективно.

Есть много способов упростить задачу; такие как использование Приставка-бесплатно, Prefixr, МЕНЬШЕ или пререкаться чтобы помочь скомпилировать коды, но, прежде всего, мы рекомендуем использовать этот инструмент, ColorZilla Gradient, Этот инструмент просто сгенерирует все необходимые коды для работы градиентов во всех браузерах.
Заключительные слова
Сегодня мы много говорили о создании градиентов, мы рассмотрели каждую часть синтаксиса, создавая прозрачные эффекты и поддерживая совместимость браузера. Итак, на данный момент, мы надеемся, что у вас уже есть лучшее понимание по этому вопросу.

В наших будущих публикациях мы еще многое расскажем о градиентах CSS3, так что следите за обновлениями на Hongkiat.com. Наконец, спасибо за чтение этого поста, мы надеемся, что вам понравилось.
Дальнейшее чтение