Десять потужних трюків CSS
Більшість дизайнерів і мережевих розробників «схоплюють» лише верхівки такої ефективної мови, як CSS. Говорячи словами програмування, CSS має досить просту криву навчання.Це не означає, що CSS не ефективна мова. Іноді гігантську різницю в дизайні веб-сайтів створюють дрібниці.
У цьому пості ми збираємося намітити загалом 10 чудових трюків CSS для тих веб-розробників, які знають свою справу.
Для дизайнерів-початківців є безлічтрюків CSS і хаків. Усі знають такі загальноприйняті прийоми, як:
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
зображення як маркер списків
як надати стилі клавішам введення
Всі ці прості прийоми хороші і важливі, але сьогодні ми збираємося розглянути техніки CSS, які вимагають трохи більших зусиль. Вони не з тих пересічних методів, яким ви навчили б новачка в CSS. Ці 10 прийомів трохи складніше, але будучи добре виконаними, вони можуть додати якусь додаткову особливість розмітці вашого сайту.
1. Фокус та розмивання пунктів меню
Почнемо з техніки, яка не є надто передовою, просто для розминки. Фокусування та розмивання пунктів меню – це потужний спосіб привернути увагу до поточного пункту. Ця техніка різниться з традиційними роловерами (прим. перекл. – rollovers – об'єктами, що змінюють свій вигляд при проходженні над ними курсору), тому що замість зміни стану елемента, над яким проводять мишею, вона змінює не вибрані елементи.
В основі цього ефекту лежить простий роловер, який використовує зображення для кожного посилання. Кожне зображення завширшки600px має 3 різних стану: статичний, активний та стан зміни виду.
Щоб реалізувати зміну вигляду, ми робимо кожну навігаційну кнопку шириною в 200px, таким чином, щоб коли над кнопкою проводять мишею, решта пунктів навігації змістити на -200px, щоб змінити їх фонове зображення. Це стильний ефект, зовсім відмінний від більшості навігаційних меню, що базуються на роловерах.
2. Пояснювальні роловери меню
Ілюструючі розмітки – останній писк веб-дизайну, і з гарної причини. Гарне пояснення може зробити веб-сторінку дуже привабливою. Іноді пояснювальні розмітки мають проблеми з часом показу анімації на сторінках, оскільки більша частина дизайну ґрунтується на зображеннях. Можна використовувати трохи CSS у навігації, для анімації ілюстрацій.
На WebDesignerWall є чудовий підручник, який не тільки показує вам, як додати анімації до навігації, а також створити повну навігаційну систему у Photoshop'і. Остаточний продукт – це ігрова, яскрава навігаційна система, що робить дизайн набагато живішим та привабливішим. Найбільш складна частина прикладу – це робота не з CSS, а припасування у Photoshop'і, щоб роловери виглядали складно.
3. Розширені параметри розмітки тексту в CSS
Друкарській розмітці тексту в CSS іноді не надається значення. Однак ви можете зробити з текстом безліч креативних речей, просто додавши трохи CSS. Наприклад:
Відображення
Ви можете, не використовуючи JavaScript, рухатися прямо до CSS, щоб зробити всередині тексту відображення. Мушу визнати, що вони не виглядають так само елегантно, як у рішеннях JavaScript, але потенційно можуть бути досить милими.
Зливаютьсязаголовки
Ви можете створити красиві заголовки, що зливаються, використовуючи маленькі міжзнакові інтервали для першої літери всередині span. Примітка: фантастично при цьому виглядають не всі поєднання літер.
Скорочені символи
Можете навіть створити скорочені літери (бачите “g”?), використовуючи малу висоту та нижню рамку.
Безліч інших просунутих текстових технік CSS можна переглянути в блозі 3.7Crea.tv.
4. Стовпці, що динамічно висуваються в таблицях
Crazy Egg для своєї сторінки підписки створює неймовірний інтуїтивний дизайн. Замість того, щоб змусити користувача клацати на іншу сторінку для початку процесу підписки, Crazy Egg користується CSS з невеликою кількістю javascript'а, щоб колонка таблиці акуратно з'їжджала вліво в той час, як форма заповнення з'являлася на місці інших колонок. Дуже зручно, якщо хочете, щоб відвідувач негайно розпочав процес підписки, і все це на крихітному просторі.
У той час, як таблиці – це те, чого сучасні дизайнери зазвичай намагаються уникнути, вони можуть бути ідеальними для організації великої кількості даних. Прайс-листи – відмінне місце для використання таблиць, а виконання їх у цікавішому стилі, безумовно, допомагає справити на користувача враження.
Запитайте хлопця від CSS, у якого є чудовий підручник, тиражуючий код, доповнений діючим прикладом і джерелом, що легко скачується.
5. Динамічні змінні в CSS
Насправді, CSS сама по собі не дуже потужна мова. Звичайно, з його допомогою можна виконати тонни витончених прийомів, але він лише мова стилів. Ви не можете зберігати змінні або робити інші речі, які дозволяють динамічні мови на зразок PHP. Тимне менш, можна використовувати динамічні мови для генерації CSS, імітуючи динамічні змінні.
Використовуючи функцію header() у PHP, можна формувати вміст таблиці CSS на PHP. Ми можемо використовувати різні масиви, щоб показати різні фрагменти стилів CSS. Наприклад, ось колірна схема за промовчанням у CSS, написана в PHP: