Набір стилів для формування посторінкової навігації на CSS3
Набір стилів для формування сторінкової навігації сайту на CSS3
Посторінкова навігація так чи інакше є практично на всіх сайтах або блогах, якщо звичайно вони не є односторінковими. Більшість шаблонів мають у комплекті зразки верстки та стильового оформлення блоків посторінкової навігації. Але найчастіше це нічим не примітний набір цифр зі стрілками вперед і назад, позначені, в деяких випадках, невиразною рамкою. Саме цей елемент сайту, багатьом хочеться якось виділити, гармонійно вписавши його в загальний дизайн. Можна посидіти годинку-другу експериментуючи зі стилями і створити щось своє, а можна скористатися готовими рішеннями, яких якщо пошукати знайдеться чимало. Наприклад блогери, які ведуть свій блог на движку WordPress і з успіхом користуються найпопулярнішим плагіном WP-Pagenavi, можуть підглянути непогану добірку стилів тут, або ж скористатися вихідниками будь-якого шаблону, що сподобався.
Коли мені на очі попався адаптивний універсальний шаблон сайту - "Response", я звернув увагу на пристойний набір стилів оформлення посторінкової навігації, виконаний з використанням властивостей CSS3. Трохи попрацювавши зі значеннями, додавши функції для окремих браузерів (градієнт в Opera), отримав готовий комплект стилів для форматування посторінкової навігації сайту. Маючи під рукою такий набір, ви легко зможете видозмінювати панельку оформлення посторінкової навігації, як душі завгодно. Тим більше, що стиль один – редагуються лише відтінки кольору цього стилю.
Існують всі необхідні CSS-класи, їх можна використовувати для оформлення будь-якого елемента навігації. Слід зазначити, що всі панелі виконані без жодногозображення, тільки засобами CSS3, так що не варто забувати про те, що не всі браузери однаково добре підтримують властивості CSS3 і слід уважно ставитись до цього факту))). CSS-код всього набору стилів досить об'ємний і немає сенсу наводити його повністю в записі, для роботи простіше скористатися вихідним файлом pagenavi_style.css, дбайливо упакованим в архіві з вихідними. Вибираєте колірний відтінок, при необхідності коригуєте значення і все.
Поколупати код можете тут.
З повагою Андрій .
Всім вдячний, якщо підтримаєте проект — додавши блог у виключення AdBlock і поділіться посиланням на запис у своїх соц-мережах: