Набір стилів для формування посторінкової навігації сайту на CSS3

44

Набор стилей для формирования постраничной навигации сайта на CSS3

Посторінкова навігація так чи інакше присутній практично на всіх сайтах або блогах, якщо звичайно вони не є одностраничными. Більшість шаблонів мають в комплекті зразки верстки і стильового оформлення блоків посторінкової навігації. Але найчастіше, це нічим не примітний набір цифр зі стрілками вперед і назад, позначені, в деяких випадках, невиразною рамкою. Саме цей елемент сайту, багатьом хочеться якось виділити, гармонійно вписавши його в загальний дизайн.
Можна посидіти годинку-інший експериментуючи зі стилями і створити що-небудь своє, а можна скористатися готовими рішеннями, яких якщо пошукати знайдеться чимало. Наприклад блогери, які ведуть свій блог на движку WordPress і з успіхом користуються популярний плагін WP-Pagenavi, можуть підглянути непогану добірку стилів тут, або ж скористатися першоджерелом будь-якого вподобаного шаблону.

Коли мені на очі попався адаптивний універсальний шаблон сайту — «Response», я звернув увагу на пристойний набір стилів оформлення посторінкової навігації, виконаний з використанням властивостей CSS3. Трохи попрацювавши зі значеннями, додавши відсутні функції для окремих браузерів (градієнт в Opera), отримав готовий комплект стилів для форматування посторінкової навігації сайту.
Маючи під рукою такий набір, ви з легкістю зможете видозмінювати панельку оформлення посторінкової навігації, як душі завгодно. Тим більше, що один стиль — редагуються тільки колірні відтінки цього стилю.

Стили постраничной навигации

ДемоСкачать

Для того щоб вам було легше розібратися, в исходниках прописав деякі коментарі до стилів кожної панельки того чи іншого кольору. Ну, а html-код, який вийде в результаті виведення функцій посторінкової навігації, простий до непристойності і виглядає наступним чином:

<div class="pagination">
<ul>
<li><a href="#" title="Старт" class="blacksquare">Старт</a></li>
<li><a href="#" title="Назад" class="blacksquare">« Назад</a></li>
<li><a href="#" title="1" class="blacksquareactive">1</a></li>
<li><a href="#" title="2" class="blacksquare">2</a></li>
<li><a href="#" title="3" class="blacksquare">3</a></li>
<li><a href="#" title="4" class="blacksquare">4</a></li>
<li><a href="#" title="5" class="blacksquare">5</a></li>
<li><a href="#" title="6" class="blacksquare">6</a></li>
<li><a href="#" title="7" class="blacksquare">7</a></li>
<li><a href="#" title="8" class="blacksquare">8</a></li>
<li><a href="#" title="9" class="blacksquare">9</a></li>
<li><a href="#" title="10" class="blacksquare">10</a></li>
<li><a href="#" title="Вперед" class="blacksquare">Вперед »</a></li>
<li><a href="#" title="Кінець" class="blacksquare">Кінець</a></li>
</ul>
</div>
  • Старт
  • « Назад
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Вперед »
  • Кінець

Присутні всі необхідні CSS-класи, їх можна використовувати для оформлення будь-якого елемента навігації. Слід зазначити, що всі панелі виконані без єдиного зображення, тільки засобами CSS3, так що не варто забувати про те, що не всі браузери однаково добре підтримують властивості CSS3 і слід уважно ставитися до даного факту))).
CSS-код набору стилів досить об’ємний і немає сенсу наводити його повністю у запису, для роботи простіше скористатися вихідним файлом pagenavi_style.css, дбайливо упакованому в архіві з вихідними кодами. Вибираєте потрібний колірний відтінок, при необхідності коригуєте значення і все.

Длубати код можете тут…

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

Сьогодні на десерт — дивимося відео незвичайного Chrome Експерименту:

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: