CSS-патерни
Можливості управління фонами через CSS в Cочетание з градієнтами дають абсолютно неймовірні можливості. Градієнтами можна намалювати майже все що завгодно від простих клітинок, смужок і кружечків до досить складних візерунків. Гратися можна до нескінченності.
Загальний принцип такий: створюється градієнт, який потрібно повторити. За замовчуванням він займе всю доступну площу, але якщо поставити розмір фону - вийде картинка бажаного розміру, яка Замостя собою весь фон елемента. Якщо значення градієнта задавати у відсотках або em. потім можна буде легко керувати розміром візерунка редагуючи розмір шрифту і / або background-size.
Наприклад, можна зробити прості смужки:
Білі смужки чергуються з прозорістю, і можуть бути покладені на будь-який фон. Керуючи кордоном між кольором і прозорістю можна регулювати ширину смуг.
Якщо замість білого кольору задати напівпрозорий білий або чорний, можна отримати універсальний патерн, який буде добре виглядати на будь-якому фоні:
Використовуючи два градієнта з кольоровими напівпрозорими лініями можна зробити картату скатертину:
За допомогою різнокольорових смужок можна робити невеликі декоративні елементи:
Якщо потрібен смугастий фон складніше, має сенс звернути увагу на принцип цикади:
Принцип полягає в використанні декількох фонів різного розміру. Це означає, що стикуватися вони теж будуть в різних місцях, таким чином на тлі неможливо буде знайти повторювані ділянки або місця стикування. По-моєму, геніально придумано.
Фони накладаються один на одного від найбільшого (зверху) до найдрібнішого (в самій глибині). В результаті стики найдрібнішого і повторюваного будуть перекриті вищерозташованими шарами.
Я зробила 4 смугастих фону різного кольору і задала їм різний розмір:
Це прості числа, тобто ті, які не діляться ні на що крім себе.
Схоже на диво. )
Також з смугастих градієнтів легко отримати, наприклад, аркуш із зошита в лінійку:
З простими лініями все досить зрозуміло, але що якщо потрібен патерн з косих ліній?
repeating-linear-gradient мав би допомогти, але на практиці градієнт поводиться як попало (порастягівайте вікно браузера).
Спробуємо зробити простими смужками, поверненими на 45 °.
У прикладі добре видно, що патерн складається з повторюваних квадратиків, градієнт йде з нижнього лівого кута у верхній правий, але в протилежних кутках нічого немає, і лінія виходить переривчастою.
Щоб закрити прогалини, додамо ще один градієнт:
Я зробила куточок яскравим, щоб було видно куди він потрапив:
Фарбуємо куточок в потрібний колір і отримуємо акуратні косі лінії:
Правда, довелося трохи підрегулювати точки зупинки квітів в першому градієнті (50% → 49.9%), але зате тепер стиків взагалі не видно.
Якщо замість кута вказати напрямок ключовими словами, наприклад to left top. це дозволить змінювати кут градієнта через зміну його розміру, тому що в цьому випадку градієнт буде завжди спрямований з одного кута в інший незалежно від background-size.
В останньому рядку задано градієнт прямокутної форми. Завдяки напрямку і значенням зупинок у відсотках можна скільки завгодно змінювати його розміри - зміниться кут нахилу ліній, але сам патерн від цього не постраждає:
У деяких випадках краю ліній стають зубчастими, причому їх отрисовка залежить від браузера: Chrome справляється краще, в Firefox видно сходинки. Щоб зробити край плавним, можна зробити стик між квітами не чіткий, а розмитий, шириною 1-2%. Також слід пам'ятати про проблему з прозорими квітами в Firefox - це вирішується використанням потрібного відтінку з повною прозорістю.
Експериментуючи з лініями можна отримати інші цікаві візерунки:
Втім, я захопилася. З радіальними градієнтами теж можна робити цікаве. Ось, наприклад, звичайний горох:
Щоб кордон градієнта була рівною, без зубчиків, кордон прозорості потрібно робити трохи далі, ніж точка зупинки кольору. Вебкіти, як зазвичай, краще справляються зі згладжуванням.
Принцип створення візерунків той же, що і для лінійних градієнтів. Причому поєднуючи лінійні і радіальні градієнти можна отримати з простих геометричних форм більш складні:
Можна робити досить складні візерунки, для цього найкраще скористатися наявними можливостями препроцесорів:
Мінуси таких патернів зазвичай в довжині і складності коду, а також в недостатній підтримці старими браузерами. Для них може знадобитися картинка. Плюси - градієнти нічого не важать, їх не треба запитувати з сервера, і можна легко міняти кольори і розмір візерунка.
Більше патернів можна побачити у надихає галереї від Lea Verou: lea.verou.me/css3patterns/.