Повторювані градієнти CSS3 [Поради CSS3]

Є багато функцій CSS3, які змінюють спосіб оформлення веб-сайту, одним з яких є градієнти CSS3. До CSS3, нам, безумовно, потрібні зображення для створення ефекту градієнта; тепер ми можемо надавати однакові (і кращі) ефекти, використовуючи лише CSS

У попередніх публікаціях ми обговорили два типи градієнтів, які можна досягти за допомогою CSS3:

• Радіальні і
• Лінійні градієнти.

Цього разу ми подивимося на їхнього брата: повторювані градієнти.

Базове повторення

Повторювані градієнти по суті є продовженням. Синтаксис подібний до того, як ми визначаємо радіальні та лінійні градієнти, але тільки так, як випливає з назви, він також буде повторювати кольори в заданому напрямку. Щоб повторити лінійні градієнти, можна скористатися цією функцією: повторюваного лінійного градієнта, для повторення радіальних або еліптичних градієнтів ми використовуємо цю функцію: повторювально-радіально-градієнтний.

 / * Лінійний * / .gradient фон: повторення-лінійний градієнт (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient фон: повторюється радіальний градієнт (50% 50%, коло, # f9f9f9, #cccccc 20px);  

Існує не так багато різниці для решти коду, за винятком повторення кольору. Нижче наведено просту ілюстрацію, яка описує, як працює це повторення кольорів.

Хоча вищезгадане зображення лише ілюструє повторювані лінійні градієнти, основна ідея також застосовується до радіальних градієнтів, в яких кольори будуть повторюватися нескінченно, в даному випадку в будь-якому напрямку. Перейдіть за посиланням нижче, щоб побачити демо.

• Переглянути демонстрацію

У наступному розділі ми покажемо, як ми можемо використовувати CSS3 Repeating Gradients у реальних прикладах.

Приклад: Створення шаблонів

Найбільш поширена реалізація Повторювані градієнти полягає у створенні шаблонів фону. У цьому прикладі ми збираємося створювати прості шаблони вертикальної смуги.

 .градієнт background: повторення-лінійний градієнт (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Зверніть увагу на те, як ми визначаємо два різних кольори - # f9f9f9 і #cccccc - на тому ж місці, 20px. Цей приклад загострить різницю між цими двома кольорами і усуне розмитість.

Щоб направити орієнтацію, ми просто змінюємо кут - 90deg буде направляти його горизонтально, поки 45deg буде направляти його по діагоналі і так далі.

• Переглянути демонстрацію

Приклад: Створення Paperline

У цьому другому прикладі ми створимо паперову лінію, яку ви часто бачите в блокноті. Щоб створити цей ефект, нам потрібно лише a div, немає зображень, тільки CSS.

 .gradient width: auto; висота: 500px; маржа: 0 50px; background: -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background: -moz-повторюється-лінійний градієнт (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background: -o-повторюється-лінійний градієнт (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background: повторення-лінійний градієнт (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); розмір фону: 100% 21px;  

Зверніть увагу, ми також додали CSS3 розмір фону властивість для визначення розмірів фонових зображень для 100%, 20px. Незважаючи на те, що CSS3 градієнти відображають "кольори", це насправді класифікується як зображення, не колір.

Далі ми використаємо : раніше псевдоелемент щоб додати смужку з лівого боку паперу.

 .градієнт: до content: ""; дисплей: вбудований блок; висота: 500px; ширина: 4px; ліворуч: 4px double # FCA1A1; позиція: відносна; ліворуч: 30px;  

І ми зробили, це дійсно просто так? Тепер ми можемо побачити їх у дії за посиланнями нижче.

• Переглянути демонстрацію
• Завантажити джерело

Подальші ресурси

• Webkit CSS3 Градієнти
• Градієнти CSS3 в мережі розробників Microsoft