Домашня » Кодування » Циркулярні та еліптичні градієнти CSS3 [Поради CSS3]

    Циркулярні та еліптичні градієнти 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