CSS3 линейные градиенты [CSS3 Советы]
градиент отличное дополнение цвета в CSS3. Вместо того, чтобы добавлять только один цвет, теперь мы можем добавить несколько цветовых комбинаций в одном блоке объявления, не полагаясь на изображения, что может уменьшить HTTP-запрос на нашем веб-сайте, позволяя загружать сайт быстрее..
Если вы играли с градиентами в CSS3, вы, вероятно, знакомы с двумя методами: радиальным и линейным градиентом. Сегодняшний пост будет о последнем.
Создание градиентов
Как сказано в спецификации, градиенты в CSS3 - это изображение, у него нет специального свойства, как при добавлении других новых функций, поэтому оно объявляется с использованием изображение на заднем плане свойство вместо.
Если мы посмотрим на полный синтаксис для градиента, он выглядит немного растянутый, что может привести к путанице для некоторых людей.
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%);
Итак, давайте покопаемся в каждой части синтаксиса один за другим, чтобы прояснить ситуацию.
Прежде всего, линейный градиент объявляется с линейный градиент () функция. Функция имеет три основных значения. Первое значение определяет начальную позицию градиента. Вы можете использовать описательное ключевое слово, как Топ чтобы начать градиент, вытекающий из Топ;
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 background-image: linear-Gradient (top, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
Приведенный выше фрагмент снизит интенсивность цвета на 20%, и градиент получится так:
Несколько цветов
Если вы хотите добавить больше цветов, просто добавьте цвета рядом с другим с разделителем-запятой и позвольте браузеру определить каждую позицию остановки цвета.
div background-image: линейный градиент (верх, красный, оранжевый, желтый, зеленый, синий, индиго, фиолетовый);
Фрагмент выше создаст следующую радугу.
Совместимость браузера
К сожалению, на момент написания этой статьи все современные браузеры еще не поддерживали стандартный синтаксис. Им все еще нужен префикс поставщика (-WebKit-, -Мос-, -Миз- а также -о-). Вот почему полный синтаксис выглядит так:
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%);
С другой стороны, Internet Explorer, особенно версия 9 и ниже, далек от стандарта. Градиент в IE9 и ниже объявлено с фильтр, поэтому, если мы хотим добавить градиент в этих браузерах, мы должны написать что-то вроде этого;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
фильтр имеет свои ограничения: во-первых, он не позволяет добавлять более трех цветов, а создание эффекта прозрачности также немного сложнее - он не позволяет RGBA, но IE фильтр использования #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Вот инструмент, который поможет вам конвертировать RGBA в #ARGB.
- демонстрация
- Скачать исходный код
Написание синтаксиса быстрее
Как вы можете видеть выше, чтобы поддерживать совместимость градиентов в разных браузерах, нам нужно добавить еще пять строк кода, что неэффективно.
Есть много способов упростить задачу; например, использование Prefix-free, Prefixr, LESS или Sass для помощи в компиляции кодов, но, прежде всего, мы рекомендуем использовать этот инструмент, ColorZilla Gradient. Этот инструмент просто сгенерирует все необходимые коды для работы градиентов во всех браузерах.
Заключительные слова
Сегодня мы много говорили о создании градиентов, мы рассмотрели каждую часть синтаксиса, создавая прозрачные эффекты и поддерживая совместимость браузера. Итак, на данный момент, мы надеемся, что у вас уже есть лучшее понимание по этому вопросу.
Есть еще много вещей, которые мы планируем изучить CSS3 градиенты в наших будущих сообщениях, так что следите за обновлениями на Hongkiat.com. Наконец, спасибо за чтение этого поста, мы надеемся, что вам понравилось.
Дальнейшее чтение
- Пуленепробиваемый кросс-браузерный фон RGBA - Lea Verou
- CSS3 изображение - W3.org
- Когда я могу использовать CSS3 градиенты - CanIUse.com
