Оформлення елементів управління на CSS: красиві кнопки

Краса – поняття відносне. Смаки програмістів і користувачів відрізняються разюче. Поява Інтернету і повсюдна трансформація локального програмування в розробку веб-ресурсів, а користувачів програм – у відвідувачів сайтів не змінила стан речей. Шаблони, фреймворки, системи керування сайтами та інші «прискорювачі процесу» розробки спочатку створили колекції меню, кнопок, елементів дизайну сторінок та інструменти управління нею, а потім запропонували гранично прості варіанти та зручні конструкції для розробників, зрозумілі відвідувачам.

Історичний аспект краси в програмуванні

Майбутні лідери в області представлення і обробки інформації починали з меню. Інші галузі програмного забезпечення слідували традиціям майбутніх лідерів. Кнопки з'явилися ненабагато пізніше меню, але їх первозданна краса полягала в обсязі, який давав можливість відрізняти від кнопку натиснутою або недоступною.


Це був початок «віконних» ідей, діалогу і традиційного кнопкового «красивого» рішення: Ok і Cancel. Програми-оболонки (середовища, інструменти, IDE, ) типу Turbo Vision швидко знайшли численних батьків і сімейство популярних Vision почало зростати. Поява графіки на персональних комп'ютерах зумовило перехід в «реально об'ємний режим. Це був «сірий об'єм», але реально віконний інтерфейс і початок кнопкового дизайну. Багато хто вже не пам'ятають первісні часи в області графіки, але красиві кнопки HTML/CSS «з'явилися» вже тоді. Те, що сталося пізніше, було простим приходом дизайнерів в області розробки веб-ресурсів. Програміст (розробник), як не назви цю професію, ніколи не відрізнявся схильністю до відображення прекрасного. Його карма – код, ідеї і технології розробки. Дизайнер мислить іншими категоріями, і прихід дизайнерів переніс частинку реальної краси в кнопкові форми, залишивши в силі:

ідею; обсяг; стан (є, натиснута, недоступна). Якщо не вдаватися в тонкощі технології розробки веб-ресурсів, то продуктивні 80-е і 90-е роки дали світові не тільки Oracle, Microsoft і Google, але і початку реалізації «краси» в реальне працює і практичний зміст.

Спочатку дизайн, потім практичність

Трансформація уявлень про красу в розробці веб-ресурсів була простою. Ідея гіпертексту – це ефективна і концептуально-орієнтована систематизація всього, що було досягнуто раніше. Гарний стиль написання коду зажадав створювати якісні інструменти діалогу на HTML/CSS. Красиві кнопки і меню – важлива складова будь-якого веб-ресурсу. Не має значення, як саме оформлена кнопка: тегом списку і переліком елементів або тегом блоку і містить у собі градації функціональності. Блокова верстка, розвиток гіпертексту, розширення функціональності каскадних таблиць стилів відразу поставили під главу кута дизайн, а не практичність. Це було першим поспішним рішенням та тимчасовим успіхом. Сайт повинен бути живим, реально практичним, а те, що його дизайн повинен бути бездоганним, просто не повинно викликати сумнівів.

Приклад: карта на погодному сайті

Просто намалювати карту (міста, району або території) і приробити до неї кілька кнопок: температура; вологість; тиск. Але це не саме практичне рішення. Досвід розробки аналогічних сайтів відразу дає однозначне рішення, як зробити «гарну кнопку». CSS правило (одна!) на малюнок карти і потрібну кількість тегів HTML, на кожен населений пункт (можна взагалі без правил CSS). Всі рішення. У такому рішенні наведення мишки на населений пункт буде викликати подія і давати можливість обробки конкретного населеного пункту. Видима тільки карта – це реально і практично. Під картою є призначення функціональності. Потрібні обробники подій самі відпрацюють правильний функціонал.

Сайт повинен бути живим і реально практичним

Дизайн веб-ресурсу повинен бути бездоганним – це не викликає сумнівів. Немає проблем: прикладів для чистого CSS (красиві кнопки і меню, спливаючі діалоги, стежать алгоритми, підказки з блоками вибору) в Інтернеті предостатньо.
Проблема не в тому, як відобразити пропоновані набори правил CSS. Проблема, як поєднати пропоновану красу з тегами веб-сторінки. Не так просто «натягнути» на сторінку чужорідний CSS-файл, але перенести ідею завжди практично і збагачує розробника досвідом. Як правило, у варіанті «Інтернет-CSS» красиві кнопки супроводжуються ресурсами, HTML-вставками, посиланнями на сторонні шаблони або фреймворки. Далеко не кожен розробник або власник сайту зацікавлений засмічувати свій код чужим. Це може бути викликано міркуваннями безпеки, а найчастіше – відсутністю реальної необхідності. Скопіювати і розвинути ідею дизайну і правил CSS і красиві кнопки власного виготовлення – готові. Якісне і юридично чисте рішення. Правда доведеться витратити трохи часу на редизайн та програмування, але гра варта свічок. Бездоганний дизайн сайту – це аксіома веб-розробки.

Простота – запорука успіху

Перше рішення призвело до тимчасового успіху, коли сірий об'єм перетворився в барвисті кнопки і оригінальні рішення меню завдяки участі професійних дизайнерів. Краса підкорила відвідувачів сайтів, але зовнішня мішура приїлася, і миготливі правила CSS стали відволікати увагу.

Друге рішення: гранична простота при повній функціональності – стало нормою. Характерно, що це рішення було прийнято, як само собою зрозуміле. Сучасні системи управління сайтами (CMS) стали гранично простими і максимально зручними для досягнення поставлених цілей. Розробник може сьогодні в будь-якому варіанті сайту – ручної розробки або на базі CMS – виконати на CSS красиві кнопки по своєму смаку або використовувати популярну колекцію з іншого сайту. Це ризиковане рішення. У першому випадку, виконуючи ручну розробку сайту, не гріх поцікавитися думкою провідних виробників популярних CMS. Все-таки там не одна сотня професіоналів доклала свої знання та вміння, а співтовариства розробників вимірюються сотнями тисяч фахівців. У другому випадку гнути свою лінію, коли все готове під рукою, і можна просто чисто і красиво здати роботу – марна трата часу. Замовник може не оцінити, а відвідувач просто не зрозуміє автора. У часи, коли кнопки вже з'явилися, але ще не було CS, красиві кнопки були затребувані зовсім не тому, що вони насправді були красиві. Вони були «убогими». Це була псевдографіка, тобто текстовий режим! Але вони мали обсяг, могли показати, що були натиснуті і могли ставати недоступними. Красиво далеко не все, що виконано професійним дизайнером, але завжди красиво те, що виконано професійно і несе в собі реальну практичну цінність.