CSS3 Круговые и Эллиптические Градиенты [CSS3 Tips]


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

Синтаксис градиента

Градиент в CSS3 объявлен с использованием свойства background-image. Это для лучшей совместимости, когда нам также нужно добавить цвет фона в одном наборе правил, чтобы они не сталкивались друг с другом. Затем, чтобы создать радиальный градиент, мы просто вызываем его с помощью этой функции radial-Gradient (). Для правильной установки градиента в функцию необходимо включить четыре значения.

Первое значение определяет положение градиента. Мы можем использовать описательное ключевое слово, такое как top, bottom, center и left, или мы также можем быть более конкретными, например, 50% 50%, чтобы установить градиент в центре, или 0% 0%, чтобы установить градиент, чтобы начать сверху слева. ,

Второе значение определяет форму и размер градиента, есть два аргумента для формирования градиента, первый – эллипс по умолчанию, а второй – круг.

А для размера градиента мы можем выбрать один из следующих шести аргументов.
Ценности
Описание
ближайшая сторона

Форма градиента соответствует стороне бокса, ближайшей к его центру (для кругов), или к вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).

Ближайший-уголок

Форма градиента имеет размеры, так что он точно соответствует ближайшему углу коробки от его центра.

дальняя сторона

Аналогичен ближайшей стороне, за исключением того, что форма имеет размеры, чтобы соответствовать стороне коробки, наиболее удаленной от ее центра (или вертикальной и горизонтальной сторон).

самый дальний угол,

Форма градиента имеет такие размеры, что он точно соответствует дальнему углу коробки от его центра.

содержать

Синоним ближайшей стороны.

обложка

Синоним дальнего угла.

Источник таблицы: Сеть разработчиков Mozilla,

Наконец, третий и четвертый определяют цветовую комбинацию. Итак, вот как мы пишем синтаксис для создания эллиптических градиентов, и на этот раз мы будем использовать покрытие для размера градиента, поэтому оно будет широко распространяться, охватывая контейнер;

тело {
background-image: радиальный градиент (центральный центр, крышка эллипса, # ffeda3, # ffc800);
}

Чтобы создать Круговой градиент, мы можем просто сделать это следующим образом:

тело {
background-image: радиальный градиент (центр, круговая обложка, # ffeda3, # ffc800);
}

Как следует из названия, форма градиента будет кругом.

Поддержка браузера

Просто учтите, что все браузеры все еще находятся в процессе полной поддержки этой функции, поэтому им все еще нужен префикс поставщика. Таким образом, весь полный синтаксис, который будет работать во всех современных браузерах – IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ и Opera 11+ – будет выглядеть примерно так;

тело {
background-image: радиальный градиент (центр внизу, крышка эллипса, # ffeda3, # ffc800);
background-image: -o-радиальный градиент (центр снизу, крышка эллипса, # ffeda3, # ffc800);
background-image: -ms-радиальный градиент (центр внизу, крышка эллипса, # ffeda3, # ffc800);
background-image: -moz-радиальный градиент (центр снизу, крышка эллипса, # ffeda3, # ffc800);
background-image: -webkit-радиальный градиент (центр снизу, крышка эллипса, # ffeda3, # ffc800);
}

Проверьте демо или загрузите исходный код, чтобы поиграть с градиентами.

Заключительные слова

Создание радиального градиента CSS3 не так сложно, как вы думаете, особенно когда вы получаете помощь от этих инструментов для генерации кода:

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


0 Comments

Добавить комментарий