Лінійні градієнти CSS3 [Поради CSS3]
Градієнт є відмінним доповненням кольорів у CSS3. Замість того, щоб додати лише один колір, ми можемо додати декілька комбінацій кольорів в один блок декларації, не покладаючись на зображення, що може зменшити HTTP-запит на нашому веб-сайті, що дозволяє швидше завантажувати сайт.
Якщо ви граєте з градієнтами в CSS3, ви, мабуть, знайомі з двома методами: радіальним і лінійним градієнтом. Сьогоднішній пост буде про останній.
Створення градієнтів
Оскільки специфікація говорить, що градієнти в CSS3 є зображенням, у неї немає спеціального властивості, подібного до іншого додавання нових функцій, тому його оголошують за допомогою фонове зображення замість цього.
Якщо поглянути на повний синтаксис градієнта, він виглядає трохи перевантажений, що може призвести до плутанини для деяких людей.
div background-image: -webkit-лінійний градієнт (зверху, # FF5A00 0%, # FFAE00 100%); background-image: -moz-лінійний градієнт (зверху, # FF5A00 0%, # FFAE00 100%); background-image: -ms-лінійний градієнт (зверху, # FF5A00 0%, # FFAE00 100%); background-image: -о-лінійний градієнт (зверху, # FF5A00 0%, # FFAE00 100%); background-image: лінійний градієнт (зверху, # FF5A00 0%, # FFAE00 100%);
Отже, давайте розберемо кожну частину синтаксису один за одним, щоб зробити все зрозумілішим.
Перш за все, лінійний градієнт оголошується з лінійний градієнт () функції. Функція має три основні значення. Перше значення визначає початкове положення градієнта. Можна використовувати описове ключове слово, наприклад зверху щоб почати градієнт, що випливає з зверху;
div background-image: лінійний градієнт (верхній, # FF5A00, # FFAE00);
Вищезгаданий фрагмент є офіційною версією від W3C для створення градієнтів. Це насправді простіше і досить зрозуміло, і він також створить наступний градієнт.
Також можна використовувати знизу робити навпаки, або інакше право і зліва.
Також можна створити діагональний градієнт кут нахилу як градієнтне початкове положення. Ось приклад:
div background-image: лінійний градієнт (45deg, # FF5A00, # FFAE00);
У фрагменті вище буде створено такий колірний градієнт:
Друге значення функції покаже перший колір інформації та її положення зупинки яка вказана у відсотках. Положення зупинки фактично є необов'язковим; браузер достатньо розумний, щоб визначити правильну позицію, тому, коли ми не вкажемо зупинку першого кольору, браузер займе 0% за замовчуванням.
І наступним значенням є другий колір комбінації. Він працює як попереднє значення, тільки якщо це останній застосований колір, і ми не вказали положення зупинки, значення 100% буде прийнято за замовчуванням. Тепер давайте розглянемо приклад нижче:
div background-image: лінійний градієнт (верхній, # FF5A00 0%, # FFAE00 100%);
Вищезгаданий фрагмент створить градієнт, подібний до того, що ми бачили раніше (без різниці), але тепер ми вказуємо позицію кольорової зупинки;
Тепер давайте змінимо колір зупинки, і цього разу уточнимо 50% для першого кольору і 51% для другого кольору, і давайте подивимося, як це виходить;
div background-image: лінійний градієнт (верхній, # FF5A00 50%, # FFAE00 51%);
Прозорість
Створення прозорість в градієнті також можливо. Для створення ефекту нам необхідно перевести колір гекса в rgba і знизити альфа-канал.
div background-image: лінійний градієнт (верхній, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Вищезгаданий фрагмент зменшить інтенсивність кольору на 20%, і градієнт вийде так:
Кілька кольорів
Якщо ви хочете додати більше кольорів, просто додайте кольори поруч з іншим за допомогою роздільника комами і дайте браузеру визначити кожну позицію зупинки кольорів.
div background-image: лінійний градієнт (верхній, червоний, оранжевий, жовтий, зелений, синій, індиго, фіолетовий);
Вищезгаданий фрагмент створить наступну веселку.
Сумісність браузера
На жаль, на момент написання цього тексту всі поточні браузери ще не підтримують стандартний синтаксис. Вони все ще потребують префікса постачальника (-webkit-, -moz-, -мс- і -o-). Ось чому повний синтаксис виглядає так:
div background-image: -webkit-лінійний градієнт (зверху, # FF5A00 0%, # FFAE00 100%); background-image: -moz-лінійний градієнт (зверху, # FF5A00 0%, # FFAE00 100%); background-image: -ms-лінійний градієнт (зверху, # FF5A00 0%, # FFAE00 100%); background-image: -о-лінійний градієнт (зверху, # FF5A00 0%, # FFAE00 100%); background-image: лінійний градієнт (зверху, # FF5A00 0%, # FFAE00 100%);
З іншого боку, Internet Explorer, зокрема версія 9 і нижче, далекий від стандарту. Градієнт в IE9 і нижче оголошено фільтр, тому, якщо ми хочемо додати градієнт до цих браузерів, ми повинні написати щось подібне;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
The фільтр має свої обмеження: по-перше, він не дозволяє додавати більше трьох кольорів, а створення ефекту прозорості також трохи складніше - не дозволяє rgba, але IE фільтр використання #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Ось інструмент, який допоможе вам конвертувати rgba до #ARGB.
- Демо
- Завантажити джерело
Написання синтаксису швидше
Як ви можете бачити вище, для підтримання сумісності градієнтів між веб-переглядачами потрібно додати ще п'ять рядків кодів, які є неефективними.
Є багато способів, які ми можемо зробити, щоб спростити завдання; наприклад, використовуючи префікс, Prefixr, LESS або Sass, щоб допомогти компілювати коди, але перш за все ми рекомендуємо використовувати цей інструмент, ColorZilla Gradient. Цей інструмент просто генеруватиме всі необхідні коди для роботи градієнтів у всіх браузерах.
Заключні слова
Сьогодні ми багато говорили про створення градієнтів, ми розглядали кожну частину синтаксису, створюючи прозорі ефекти і підтримуючи сумісність з браузером. Отже, на даний момент, ми сподіваємося, що ви вже маєте краще розуміння з цього питання.
Є ще багато речей, які ми плануємо дослідити Градієнти CSS3 на наших майбутніх посадах, так що залишайтеся налаштовуватися на Hongkiat.com. Нарешті, дякую вам за прочитання цієї публікації, ми сподіваємося, що вам сподобалося.
Подальше читання
- Куля доказ крос-браузер RGBA фони - Lea Verou
- Зображення CSS3 - W3.org
- Коли можна використовувати CSS3 Gradients - CanIUse.com
