Круговые и эллиптические градиенты CSS3 [Советы CSS3]
Сегодня мы продолжим наше обсуждение CSS3 градиенты. В предыдущем посте мы показали, как создать Линейные градиенты. На этот раз мы рассмотрим их родственник, Круговые и эллиптические градиенты.
Синтаксис градиента
Градиент в CSS3 объявлен с использованием изображение на заднем плане имущество. Это для лучшей совместимости, когда нам также нужно добавить фоновый цвет в одном наборе правил, чтобы они не сталкивались друг с другом. Затем, чтобы создать радиальный градиент, мы просто называем это с этим радиально-градиент () функция. Для правильной установки градиента необходимо включить четыре значения.
Первое значение определяет положение градиента. Мы можем использовать описательное ключевое слово, такое как top, bottom, center и left, или мы также можем быть более конкретными, как, 50% 50% установить градиент в центре или 0% 0% установить градиент, чтобы начать с верхний левый.
Второе значение определяет форма и размер градиента, Есть два аргумента для формирования градиентов, во-первых, эллипс который по умолчанию, а второй круг.
И для размер градиента, мы можем выбрать один из следующих шести аргументов.
| Ценности | Описание |
|---|---|
ближайшая сторона | Форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для кругов), или вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов). |
Ближайший-уголок | Форма градиента имеет размеры, так что он точно соответствует ближайшему углу коробки от его центра. |
дальняя сторона | Аналогичен ближайшей стороне, за исключением того, что форма имеет размеры, соответствующие самой большой части коробки от ее центра (или вертикальной и горизонтальной сторон). |
самый дальний угол, | Форма градиента имеет размеры, так что он точно соответствует дальнему углу коробки от его центра. |
содержать | Синоним для |
покрытие | Синоним для |
Источник таблицы: Сеть разработчиков Mozilla.
Наконец, третий и четвертый определяют сочетание цветов. Итак, вот как мы пишем синтаксис для создания эллиптический градиенты, и на этот раз мы будем использовать покрытие для размера градиента, поэтому он будет широко распространяться, охватывая контейнер;
body background-image: радиальный градиент (центральный центр, крышка эллипса, # ffeda3, # ffc800);
Чтобы создать круговое градиент мы можем просто сделать так:
body background-image: радиальный градиент (центр, круговая обложка, # ffeda3, # ffc800);
Как следует из названия, форма градиента будет кругом.
Поддержка браузера
Просто учтите, что все браузеры все еще находятся в процессе полной поддержки этой функции, поэтому им все еще нужен префикс поставщика. Таким образом, весь полный синтаксис, который будет работать во всех современных браузерах - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ и Opera 11+ - будет выглядеть примерно так;
body 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 не так сложно, как вы думаете, особенно когда вы получаете помощь от этих инструментов для генерации кода:
- Colorzilla Gradients
- Gradientoo
Радиальный градиент - это всего лишь один из видов CSS3-гаджетов, мы продолжим наше обсуждение этой темы в следующих публикациях, так что следите за обновлениями на Hongkiat.com
