проблема
У попередньому розділі ми дізналися, як за допомогою градієнтів CSS створювати всілякі смуги. Однак смугами фонові візерунки, та й будь-які інші геометричні малюнки, не обмежуються. Часто у нас виникає необхідність створювати інші типи візерунків: сітки, візерунок в горошок, шаховий візерунок і багато інших.
На щастя, градієнти CSS можуть допомогти і з багатьма з цих завдань. За допомогою градієнтів CSS можна створити майже будь-який геометричний візерунок, хоча це і не завжди практично: якщо ми не будемо дотримуватися обережності, то на руках у нас виявиться шалений обсяг не піддається супроводу коду. Створення візерунків засобами CSS - це також одна з ситуацій, коли використання препроцесора CSS, наприклад Sass виправдано. Це дозволяє скоротити кількість повторень, тому що чим складніше стають візерунки, тим менше відповідає принципам DRY описує їх CSS-код. У цьому секреті ми зосередимося на створенні найпростіших і найбільш затребуваних візерунків.
Використовуючи тільки один градієнт, можна створити не так вже й багато візерунків. Чари починається, коли ви поєднуєте кілька градієнтів, що просвічують крізь один одного завдяки наявності прозорих областей. Ймовірно, найпростіший з подібних візерунків - це накладення горизонтальних і вертикальних смуг для створення різних типів сіток. Наприклад, наступний фрагмент коду створює візерунок, що нагадує забарвлення бавовняної скатертини:
background: white;
background-image: linear-gradient (90deg, rgba (200,0,0, .5) 50%, transparent 0), linear-gradient (rgba (200,0,0, .5) 50%, transparent 0);
background-size: 30px 30px;
У деяких випадках ми хочемо мати можливість регулювати розмір осередків сітки, не змінюючи при цьому ширину ліній, наприклад, для створення ліній, які служать в якості направляючих. Це прекрасний привід використовувати абсолютні значення замість процентних як кордонів переходу кольору:
background: # 58a;
background-image: linear-gradient (white 1px, transparent 0), linear-gradient (90deg, white 1px, transparent 0);
background-size: 30px 30px;
Результат представляетсобой сітку з білих ліній шириною 1px. де ширина осередку дорівнює 30px. Так само як в секреті «Гнучкі ніжні смуги», базовий колір служить резервним варіантом для випадків, коли браузер не підтримує градієнти CSS.
Ця сітка - відмінний приклад узору, який може бути створений за допомогою досить добре піддається супроводу CSS-коду (хоча і не повністю відповідного принципам DRY):
?? якщо нам знадобиться поміняти розмір осередку, товщину ліній або будь-який з квітів, здогадатися, яке значення потрібно для цього відредагувати, буде досить просто;
?? для внесення подібних змін не доводиться робити величезну кількість правок; потрібно виправити лише одне або два значення;
?? код до того ж відносно короткий, всього лише чотири рядки об'ємом 170 байт. SVG-код не міг би бути коротше.
Ми можемо також накласти один на одного дві сітки з лініями різної товщини і різними кольорами, для того щоб створити більш реалістичний варіант світлокопіювальні листа:
background: # 58a;
background-image: linear-gradient (white 2px, transparent 0), linear-gradient (90deg, white 2px, transparent 0), linear-gradient (hsla (0,0%, 100% ,. 3) 1px, transparent 0) , linear-gradient (90deg, hsla (0,0%, 100% ,. 3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
Візерунок в горошок
Поки що для створення візерунків ми використовували тільки лінійні градієнти. Однак радіальні градієнти теж можуть бути надзвичайно корисними, так як вони дозволяють створювати кола, еліпси і фрагменти цих фігур. Найпростіший візерунок, який можна створити за допомогою радіального градієнта, - це масив точок:
background: # 655;
background-image: radial-gradient (tan 30%, transparent 0);
background-size: 30px 30px;
Слід визнати, що сам по собі цей малюнок не дуже придатний для використання. Однак ми можемо об'єднати два таких градієнта і визначити для них різні позиції фону, створивши таким чином візерунок в горошок:
background: # 655;
background-image: radial-gradient (tan 30%, transparent 0), radial-gradient (tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
Зверніть увагу: щоб цей ефект спрацював, друга позиція фону повинна становити половину розміру плитки. На жаль, це означає, що для того, щоб змінити розмір плитки, нам потрібно внести чотири правки. Це на межі того, щоб назвати такий код непридатним до супроводу, хоча спільної думки щодо того, перейдена чи риса, немає. Якщо ви використовуєте препроцесор, то можете перетворити це в домішка:
SCSS
@mixin polka ($ size, $ dot, $ base, $ accent)
background: $ base;
background-image:
radial-gradient ($ accent $ dot, transparent 0),
radial-gradient ($ accent $ dot, transparent 0);
background-size: $ size $ size;
background-position: 0 0, $ size / 2 $ size / 2;
>
Потім для створення візерунка в горошок знадобиться виклик, подібний цьому:
SCSS
@include polka (30px, 30%, # 655, tan);
шахові дошки
Візерунки типу «шахівниця» використовуються в безлічі ситуацій. Наприклад, шахівниця ніжною забарвлення може бути цікавою альтернативою прісного фону суцільного кольору. Крім цього, сіра шахівниця стала де-факто стандартом позначення прозорості, що знаходить застосування в самих різних призначених для користувача інтерфейсів. Зробити шахову дошку за допомогою CSS значно складніше, ніж можна було б очікувати. Типова плитка, повторення якої генерує шахову дошку, включає по два квадратика кожного кольору. Здається, що цей ефект має бути нескладно відтворити за допомогою CSS: потрібно всього лише визначити два квадрата з різними позиціями фону, чи не так? Не зовсім. Так, технічно можливо створити квадрати, використовуючи градієнти CSS, але без порожнього простору навколо них результат буде виглядати як заливка суцільним кольором. Однак не існує способу створювати квадрати, оточені порожнім простором, використовуючи тільки один градієнт CSS. Якщо ви вважаєте, що це не так, спробуйте знайти градієнт, який при повторенні створюватиме зображення. Хитрість полягає в тому, щоб робити квадратик з двох прямокутних трикутників. Ми вже вміємо створювати прямокутні трикутники. Ви можете освіжити пам'ять, глянувши на наступний фрагмент коду (тут використовуються інші кольори і прозорість):
background: #eee;
background-image:
linear-gradient (45deg, #bbb 50%, transparent 0);
background-size: 30px 30px;
Можливо, ви ставите питанням, чим це може вам допомогти. Безумовно, якщо спробувати зробити квадратики з двох трикутників, результатом стане суцільний колір. А що, якщо наполовину зменшити катети цих трикутників, щоб вони займали 1/8 плитки,
а не 1/2, як зараз? Цього можна з легкістю добитися, вказавши в якості позиції кордону переходу кольору 25% замість 50%. Результат буде виглядати як на малюнку нижче.
Схожим чином можна створити трикутники, що вказують в протилежному напрямку, дзеркально відбивши кордону переходу кольору:
background: #eee;
background-image: linear-gradient (45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
Вгадаєте, що станеться, якщо ми об'єднаємо ці два рішення? Код буде виглядати так:
background: #eee;
background-image: linear-gradient (45deg, #bbb 25%, transparent 0), linear-gradient (45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
На перший погляд здається, що результат, показаний не здатний привести нас до бажаної мети. Однак потрібно всього лише зрушити другий градієнт на половину розміру плитки, для того щоб об'єднати ці трикутники і отримати квадрат:
background: #eee;
background-image: linear-gradient (45deg, #bbb 25%, transparent 0), linear-gradient (45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
У майбутньому для створення шахових дощок нам не доведеться покладатися виключно на допомогу трикутників, педантично що накладаються один на одного. Нрвий стандарт визначає новий набір функцій градієнта, що дозволяють створювати конічні градієнти (також відомі як кутові градієнти »). Ці градієнти часто виглядають як конуси, якщо дивитися на них зверху, звідси і назва. Вони генеруються за допомогою лінії, яка крутиться навколо фіксованої точки, поступово змінюючи колір. Наприклад, колірне колесо, показане тут,
можна буде створити за допомогою наступного градієнта:
Здогадаєтеся, яким буде результат? Це якраз те, чого ми намагалися домогтися раніше. Зверніть увагу, що, по суті, це половинчаста шахівниця. Все, що нам потрібно для перетворення її в повноцінну шахову дошку, - це повторити два градієнта, створивши ще один набір квадратиків, і ще раз змістити їх позиції, як якщо б ми двічі застосовували техніку створення візерунка в горошок:
background: #eee;
background-image: linear-gradient (45deg, #bbb 25%, transparent 0), linear-gradient (45deg, transparent 75%, #bbb 0), linear-gradient (45deg, #bbb 25%, transparent 0), linear -gradient (45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;
Результатом стане шахівниця.
Ми можемо трохи вдосконалити код, об'єднавши трикутники, що вказують в протилежні сторони (тобто перший з другим, а третій з четвертим) і перетворивши темніший відтінок сірого в напівпрозорий чорний, для того щоб базовий колір можна було завжди з легкістю поміняти без необхідності відповідним чином коригувати колір верхнього шару:
background: #eee;
background-image: linear-gradient (45deg, rgba (0,0,0, .25) 25%, transparent 0, transparent 75%, rgba (0,0,0, .25) 0), linear-gradient (45deg , rgba (0,0,0, .25) 25%, transparent 0, transparent 75%, rgba (0,0,0, .25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
Тепер у нас два градієнта замість чотирьох, але код, як і раніше, може служити ілюстрацією принципу WET. Для того щоб змінити акцентне колір або розмір комірки, необхідно внести чотири правки. В даному випадку доречно створити домішка в препроцесорів, щоб виключити дублювання. Наприклад, в Sass це виглядало б так:
Поєднання цих технік з режимами змішування коли значення background-blend-mode. відмінні від normal, використовуються для деяких (або навіть усіх) шарів, складових фонове зображення, може дати дуже цікаві результати, що підтверджує ця галерея візерунків Беннетта Філі. Для більшості з цих візерунків використовується тільки режим змішування multiply, а й інші значення, такі як overlay, screen і difference, також можуть виявитися дуже корисними
Версія в форматі SVG не тільки на 40 символів коротше, в ній також помітно менше повторень. Наприклад, для зміни кольору досить однієї правки, а для зміни розміру - двох.
Десерт на сьогодні - часто кажуть, що не потрібно винаходити велосипед. А хтось взяв, і винайшов цікавий варіант