Циркулярні та еліптичні градієнти CSS3 [Поради CSS3]
Сьогодні ми продовжимо нашу дискусію Градієнти CSS3. У попередньому повідомленні ми показали вам, як створювати Лінійні градієнти. Цього разу ми охопимо їх родичів, Циркулярні та еліптичні градієнти.
Синтаксис градієнта
Градієнт в CSS3 оголошується за допомогою фонове зображення власності. Це для кращої сумісності, коли нам також потрібно додати Колір фону в одному наборі правил, щоб вони не стикалися один з одним. Потім, щоб створити радіальний градієнт, ми просто називаємо його цим радіальний градієнт () функції. Для того, щоб правильно встановити градієнт, у функцію потрібно включити чотири значення.
Перше значення визначає градієнтне положення. Ми можемо використовувати описові ключові слова, такі як верхній, нижній, центральний і лівий, або ми можемо бути більш конкретними, 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: -о-радіальний градієнт (дно центру, обкладинка еліпса, # ffeda3, # ffc800); background-image: -ms-радіальний градієнт (центральне дно, обкладинка еліпса, # ffeda3, # ffc800); background-image: -моз-радіальний градієнт (дно центру, обкладинка еліпса, # ffeda3, # ffc800); background-image: -webkit-радіальний градієнт (центральне дно, обкладинка еліпса, # ffeda3, # ffc800);
Перегляньте демо-версію або скачайте джерело, щоб грати з градієнтами.
- Демо
- Завантажити джерело
Заключні слова
Створення радіального градієнта CSS3 не настільки складне, як ви думаєте, і особливо, коли ви отримуєте допомогу від цих інструментів для створення коду:
- Градієнти Colorzilla
- Gradientoo
Радіальний градієнт - це лише один з типів CSS3, ми продовжимо обговорення цього питання в наступних публікаціях, тому стежте за посиланням на Hongkiat.com
