Зміст
- 01. Установіть відповідність між зображеннями та кольоровими схемами сайту
- 02. Рівномірно розподіліть простір в останньому ряду сітки
- 03. Створіть анімацію частинок за допомогою вікна-тіні
- 04. Анімуйте багатогранники з перетвореннями
- 05. Майстер 'calc ()' для позиціонування
- 06. Зробіть модель коробки розумною за допомогою функції «розмір коробки»
- 07. Вертикальний центр за допомогою CSS
- 08. Націльтесь на банк пов’язаних об’єктів
- 09. Контрольний перенос
- 10. Скористайтеся перевагами режимів написання
- 11. Використовуйте градієнти незвично
- 12. Використовуйте відповідність рядків на посиланнях
- 13. Змусьте FOUT працювати для вас
- 14. Дослідіть SVG, щоб знайти фони
- 15. Фокусуйте користувачів на 3D-переходах
- 16. Створіть кругові меню за допомогою CSS та математики
- 17. Анімація посилань при наведенні
- 18. Створіть прості анімації ключових кадрів
- 19. Створюйте плаваючі 3D-ефекти з тінями
- 20. Оновлення елементів сторінки за допомогою ': target'
- 21. Забезпечте зворотний зв’язок за допомогою тонкої анімації
- 22. Підготуйся до „волевиявлення”
- 23. Поля введення гуманізації
- 24. Призупиняйте та відтворюйте анімацію CSS
- 25. Не використовуйте змінні CSS
У якийсь момент з будь-якою технологією складається відчуття, що зроблено майже все, що можна зробити. Коли щось вже не настільки нове та блискуче, інтерес падає і увагу привертає наступна велика річ. Це часто траплялося у веб-індустрії, яка схильна страшенно хвилюватися певним аспектом технології, перш ніж, рано чи пізно, відпустить її в повсякденне життя.
Коли CSS з’явився вперше, він був революційним, і з часом він змінився, щоб дозволити дизайнерам створювати гнучкі, чітко продумані та красиві макети веб-сторінок. Однак останнім часом з різних сторін припускають, що CSS втомився і, можливо, його час на сонці вже пройшов.
Я хочу продемонструвати, що у світі CSS все ще багато хвилювань і життя, чи то в найсучасніших властивостях, які ви, можливо, ще не вивчали, чи через використання аспекту CSS таким, яким ви раніше не розглядали.
Ось декілька порад від найкращих експертів CSS у цій галузі.
(Примітка: Деякі прийоми цієї функції є передовими і можуть не підтримуватися повністю у всіх браузерах. Ретельно протестуйте та переконайтесь, що резервні копії існують, перш ніж запускати будь-яку роботу.)
01. Установіть відповідність між зображеннями та кольоровими схемами сайту
Крістофер Шмітт, організатор конференції
Конференції мають свої власні кольорові схеми, і, маючи багато спікерів, робочий процес для управління портретами може бути складним. Застосування фільтрів вручну не масштабується і покладається на те, що ви маєте доступ, скажімо, до певної дії Photoshop. Зараз я використовую PNG із високою роздільною здатністю, і додаю тони за допомогою фільтрів CSS. Це дозволяє мені узгодити будь-який портрет зі схемою події, а також використовувати зображення повторно за різними темами. Мені просто потрібно нове правило CSS для кожного. Подивіться демо.
02. Рівномірно розподіліть простір в останньому ряду сітки
Стівен Хей, дизайнер та автор
Якщо у вас є невідома кількість елементів для відображення в сітці, ви можете використовувати Flexbox, щоб рівномірно розділити останній рядок. Отже, якщо є лише один предмет, він займе весь рядок; якщо є два елементи, рядок буде розділено навпіл тощо. Подивіться демо.
03. Створіть анімацію частинок за допомогою вікна-тіні
Ана Тудор, кодер та фанатик математики
Змішуючи коробка-тінь за допомогою математики та Сасса ви можете графікувати двовимірні криві, імітувати 3D-рух та створювати шалені анімації частинок, яких кожен помилково приймає за полотняні! Дивіться демо-версію та іншу.
04. Анімуйте багатогранники з перетвореннями
Ана Тудор, кодер та фанатик математики
Ви, напевно, бачили чисті полігони CSS, створені з межами, але ми маємо набагато потужніший інструмент у перетворювати майно. Накладання ланцюгів і застосування перетворень на вкладених елементах дозволяє нам створювати складні багатокутники із фоновими зображеннями або межами та прозорими інтер’єрами. Використовуючи 3D-перетворення, ми можемо об’єднати ці 2D-фігури в багатогранники і змусити тверді речовини зливатися, розгортатися, вибухати або рекомбінувати способом, який легко прийняти за WebGL. Подивіться демо.
05. Майстер 'calc ()' для позиціонування
Ана Тудор, кодер та фанатик математики
я кохав calc () з того моменту, як я це виявив. Це корисно для приборкання полів, відступів або розмірів, і може бути рятівним ключем, коли використовується для позиціонування або розміру фонів, всередині градієнтів або перетворень, а також у поєднанні не тільки з тими самими старими одиницями, але також новими та крутими вікнами перегляду.
06. Зробіть модель коробки розумною за допомогою функції «розмір коробки»
Сойєр Холленсхед, розробник та дизайнер Oak Studios
Використовуйте розмір коробки щоб зберегти ваш розум. Без нього елемент із заданою шириною 250 пікселів і 25 пікселів заповнення поєднується до ширини 300 пікселів, роблячи змішувальні пікселі та відсотки жорсткими. С розмір коробки:бордюр межі та відступи замість цього розміщуються в межах визначеної ширини.
07. Вертикальний центр за допомогою CSS
Трент Уолтон, засновник Paravel
Історично складно було вертикально центрувати щось за допомогою CSS, наприклад, якщо у вас є зображення із сусіднім текстом, який потрібно вертикально вирівняти. Замість того, щоб тупати та лаятися, використовуйте Flexbox, щоб боротися з бідами, пов’язаними з вирівнюванням. Подивіться демо.
08. Націльтесь на банк пов’язаних об’єктів
Джонатан Смайлі, партнер Zurb та керівник дизайну
Голіть вагу рядка CSS, використовуючи приблизні селектори атрибутів в іменах класів, щоб націлити великий банк пов'язаних об'єктів, а не приєднувати загальні атрибути до кожного окремого класу. Наприклад ... [class * = "- block-grid-"] {} ... буде націлено на такі: .small-block-grid-3 .large-block-grid-5
09. Контрольний перенос
Савід Сторі, адвокат відкритого Інтернету
Дефіс сприймається як належне в друкованому вигляді, і деякі розробники використовують дефіси власність в Інтернеті, але мало хто знає про інші властивості, які забезпечують більш точний контроль. Якщо ви не будете обережні, ви отримаєте сходи для переносу, де дефіси використовуються через кілька рядків. Загальне емпіричне правило - не більше двох поспіль, якими ви можете керувати за допомогою дефіс-граничні лінії. Крім того, дефіс-ліміт-символи дозволяє вказати мінімальну довжину слова, яке буде переноситись, а також мінімальну кількість символів до та після розриву дефіса.
10. Скористайтеся перевагами режимів написання
Девід Сторі, відкритий веб-адвокат
Режими введення дозволяють визначити напрямок, в якому рухається текст. Деякі східноазіатські тексти написані вертикально, рядки зростають справа наліво, зазначені режим запису: вертикальний-rl (tb-rl в IE). Вертикальний текст насправді не використовується в європейських системах письма, але може бути корисним для заголовків таблиць, коли обмежений горизонтальний простір.
11. Використовуйте градієнти незвично
Рут Джон, дизайнер
Фонові градієнти можуть виглядати чудово, якщо їх використовувати з рамками та маркерами. Я використовую як у своєму блозі, так і з препроцесором, можу викликати мікшин із повторно використаним кодом, щоб не повторювати його вручну. Не будьте шаленими, бо градієнти можуть бути важкими для процесора. Комбінація SCSS для маркерів списку:
@mixin gradedBullet ($ color) {фонове зображення: лінійний градієнт (ліворуч, освітлити ($ color, 15%) 10px, $ color 11px, $ color 20px, затемнити ($ color, 15%) 21px, затемнити ($ color , 15%) 30 пікселів, прозорий 31 пікселів); }
12. Використовуйте відповідність рядків на посиланнях
Рут Джон, дизайнер
У своєму блозі я використовував селектори атрибутів CSS із відповідністю рядків для стилізації соціальних значків. Вони з’являються у всьому моєму блозі, іноді з текстом, а іноді без, але завжди з піктограмою. Щоб оформити правильне посилання за допомогою правильної соціальної піктограми, я використовую відповідність рядків на href атрибут якірного елемента. я використовую *= так що href на елемент прив'язки повинен містити лише вказаний мною рядок.
/ * для всіх соціальних посилань * / .social a: перед {display: inline-block; відступ праворуч: 30 пікселів; сімейство шрифтів: ‘FontAwesome’;} / * Кожне конкретне посилання * / .social a [href * = "twitter"]: перед {content: " f099"; колір: # 52ae9f;} .social a [href * = "github"]: перед {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: перед {content: " f09e"; колір: # b47742;}
13. Змусьте FOUT працювати для вас
Джейсон Фундаментал, директор проекту H + W
Інтернет побудований на передумові, що він повинен доставляти вміст, навіть якщо браузер не може зробити bling. Повільне завантаження веб-шрифтів може викликати розчарування, FOUT (спалах нестильового тексту) нервує, оскільки навігація та текст переробляються під час завантаження шрифтів. Google і Typekit дають відповідь: завантажувач веб-шрифтів. Вводячи класи на сторінку, виходячи зі стану завантаження шрифтів, ви можете стилізувати резервні копії за допомогою цих класів, щоб мінімізувати перекомпонування, також викорінюючи синдром "невидимого вмісту" WebKit. Подивіться демо.
14. Дослідіть SVG, щоб знайти фони
Еміль Бьорклунд, веб-розробник inUse
Єдиними браузерами, які зараз не підтримують SVG, є IE8 і нижче та Android 2 WebKit, і тому використання SVG для фонів у CSS можливо, особливо поряд із резервним рішенням PNG, таким як Grunticon. SVG може бути стилізований CSS, і є цікавий перебір властивостей CSS (фільтри!) Від SVG, з якими ми можемо грати, застосовуючись до HTML.
15. Фокусуйте користувачів на 3D-переходах
Еміль Бьорклунд, веб-розробник inUse
Використання 3D-перетворень та використання z-розмірність в користувацьких інтерфейсах може бути дійсно корисним, зокрема для приховування / показу або згортання / розширення вмісту. У таких ситуаціях також досить легко отримати запасний варіант до 2D-переходу або взагалі не перейти. Це область, де невелике прогресивне вдосконалення може пройти довгий шлях.
16. Створіть кругові меню за допомогою CSS та математики
Сара Суейдан, розробник інтерфейсу
Круглі меню популярні в мобільних додатках, і ви можете використовувати перетворення та переходи CSS, щоб створити просте кругле меню. Це меню можна змінити та налаштувати для створення меню, що відкривається вгору або вниз. У CSS немає прямого способу перекласти елемент по діагоналі, але ви можете використовувати значення радіуса кола, на якому ви хочете розташувати елементи, і застосувати просте математичне правило для обчислення горизонтальних та вертикальних значень перекладу, що передаються в translateX () і перекластиY () функції. Таким чином, ви закінчите з діагональ переклад, щоб перемістити пункти меню у правильні позиції по колу. Подію кліків, яка закриває / відкриває меню, можна обробити за допомогою JavaScript, або ви можете зробити це ще на один крок далі і мати меню лише для CSS, використовуючи hack для прапорця CSS. У своїй демонстраційній версії я використовую JavaScript та API HTML5 classList, який підтримується не у всіх браузерах, тому вам потрібно буде переглянути демонстраційну версію в сучасному браузері, щоб вона працювала, або розкоментувати код jQuery замість того, щоб використовувати API classList код.
Дивіться демонстраційний ролик та повний посібник. Приклад злому CSS Checkbox.
17. Анімація посилань при наведенні
Пол Ллойд, дизайнер взаємодії The Guardian
Не слід покладатися на режими наведення, щоб виконати дію або надати важливу інформацію, але ви все одно можете вдосконалити інтерфейси для користувачів на основі миші. На 24ways.org ми розкриваємо заголовки статей, коли ви наводите курсор на посилання в попередній / наступній навігації. Це було досягнуто шляхом створення :: після псевдоелемент, що містить згенерований вміст, отриманий із значення a дані- атрибут, із застосованим переходом CSS, щоб він перемістився у поле зору при наведенні. Подивіться демо.
18. Створіть прості анімації ключових кадрів
Пол Ллойд, дизайнер взаємодії The Guardian
На 24ways.org ми додали анімовані кутові заслінки до резюме, яке відкривалося при наведенні. Це було зроблено шляхом об'єднання @keyframes правило із властивістю анімації, змінюючи положення фонового зображення для досягнення анімації на основі спрайтів. Фокус полягає у оголошенні кількості кадрів у вашому анімаційному спрайті за допомогою кроки () значення. Подивіться демо.
19. Створюйте плаваючі 3D-ефекти з тінями
Кетрін Фарман, розробник Happy Cog
Нещодавній проект вимагав плаваючої фотографії товару з круглою тінню знизу, створюючи 3D-ефект, який вискакує з екрану. Тінь використовує кілька функцій CSS3: межа-радіус альфа-прозорість і коробка-тінь. Це добре працює для сіток продуктів, демонстрації зображень героя домашньої сторінки або будь-якого химерного дизайну зі скеуоморфним вигином. Подивіться демо.
20. Оновлення елементів сторінки за допомогою ': target'
Саймон Медін, старший веб-розробник HeRe
CSS не є мовою програмування в звичайному розумінні, але ви все одно можете робити розумні речі, не повертаючись до JavaScript. Наприклад, : ціль псевдо-клас застосовується до елементів, на які націлено посилання, що натиснуто.
Ви можете використовувати це для визначення стану сторінки, націлювання на батьків, що містить безліч елементів, і ваші посилання стають засобом контролю зовнішнього вигляду та макета всіх дочірніх елементів одним клацанням миші. Подивіться демо.
21. Забезпечте зворотний зв’язок за допомогою тонкої анімації
Ніл Ренікер, дизайнер і розробник
Псевдоелементи CSS :: до і :: після поряд із переходами CSS, може забезпечити чудову анімацію, яка забезпечує тонкий відгук для користувачів миші. Наприклад, побудувати стрілку CSS всередині псевдоелемента, застосувати перехід до псевдоелемента (перехід: усі 15-ти;), а потім додайте просту зміну макета до : наведення псевдоклас (наприклад, виправлення margin-top). Подивіться демо.
22. Підготуйся до „волевиявлення”
Пол Льюїс, програміст та член команди зв’язків із розробниками Chrome
Якщо ви використовували -webkit-transform: translateZ (0) щоб чарівно зробити ваші сторінки швидшими, хак, який у багатьох браузерах просто створює новий шар композитора, замінюється на воля-анімація. Незабаром ви зможете повідомити браузеру, що ви плануєте змінити щодо елемента (його положення, розмір, вміст або положення прокрутки), і браузер застосує правильну оптимізацію під капотом. Більше інформації.
23. Поля введення гуманізації
Ярон Шон, засновник "Для людей"
Додавання швидкої анімації до елементів, з якими взаємодіють користувачі, робить інтерфейс менш відчутним. З полями введення спробуйте поставити a перехідний дзвінок всередині, тож, коли ви його фокусуєте або розфокусуєте, відбувається плавний перехід.
введення, текстове поле {-moz-перехід: полегшення всіх 0,2 с; -o-перехід: полегшення всіх 0.2s; -webkit-перехід: полегшення всіх 0.2s; -ms-перехід: полегшення всіх 0.2s; перехід: полегшення всіх 0,2 с;
24. Призупиняйте та відтворюйте анімацію CSS
Вал Хед, дизайнер та консультант
Ви можете «призупинити» та «відтворити» анімацію CSS, змінивши її анімація-гра-стан майно. Якщо встановити для нього значення «призупинено», анімація зупиняється на місці, доки ви не зміните її анімація-гра-стан до біг, наприклад при наведенні.
.animating_thing {анімація: спін 10s лінійний нескінченний; анімація-відтворення-стан: призупинено; }. animating_thing: hover {animation-play-state: running; }
25. Не використовуйте змінні CSS
Дейв Ши, дизайнер та автор
Нарешті ми отримуємо змінні CSS, наприклад, щоб один раз записати шістнадцяткове значення кольору та посилатися на нього через таблицю стилів. Але офіційна специфікація є багатослівною, додає синтаксичну складність, пропонує надзвичайну функціональність і в основному не підтримується більшістю браузерів. В епоху, коли Sass користується широкою популярністю і виходить за межі змінних з потужною логікою програмування, як користувальницькі функції та оператори if / else, офіційна специфікація виявляється далеко короткою.
Сподіваємось, ці найкращі поради оновили ваш погляд на CSS та можливості, які він представляє у веб-розробці та дизайні. Не забудьте ретельно протестувати будь-яку з цих технік, щоб перевірити підтримку браузера, перш ніж будь-яку роботу публікувати.
Слова: Крейг Граннелл Ілюстрація: Майк Чіпперфілд
Ця стаття спочатку з’явилася у випуску 253 журналу net.
