Круглі кнопки панелі посторінкової навігації

33

Круглые кнопки панели постраничной навигации

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

Використовуючи виключно кошти CSS3, без підключення додаткових фонових зображень, вийшов досить не поганий результат:

Пагинация CSS3

Начебто все вийшло більш ніж чудово, ан ні, чорта з два, всю загальну картинку, як завжди нахабно і в збоченій формі, зламав все той же ІЕшка. Цей вічний гальмо прогресу, ні в яку, не захотів нормально обробити поєднання функцій скруглення кутів border-radius і лінійного градієнта. Без використання градієнта, кнопки втрачали ефект опуклості, ставали плоскими і млявими, а підключивши фільтр градієнта, вимальовувалася і зовсім неприваблива картина. У цьому випадку ІЕшка 6-9 відображав заданий градієнт без належного заокруглення сторін, виступаючи за окреслені в коло, з допомогою border-radius, краю кнопок.

Круглые кнопки пагинации

Загалом вималювалася така картина: IE6-9 безпардонно пропускає фон кнопок, заданий за допомогою фільтра реалізує лінійний градієнт, за округлені куточки.
Треба віддати належне майкрософтовським умільцям, вони знехотя знялися з ручного гальма і вже їх нове дітище — IE 10-ї версії, більш або менш стерпно, справляється з одночасним використанням округлених кутів і лінійного градієнта.

CSS3 градиент в IE10

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

Подивитися приклад того що вийшло на чистому CSS в кінцевому підсумку і при бажанні можна відредагувати в онлайн-редакторі:

Що б не спотикатися про несподівані перешкоди, які постійно вибудовує нам Internet Explorer, необхідно спрацювати лише трохи по-старому, тобто задати яку-небудь фонову картинку нашим кнопкам. Поки тільки так і ніяк інакше, можна отримати по справжньому кросбраузерність елемент управління сайту, у вигляді градієнтних, круглих кнопок посторінкової навігації.

В принципі, в коді особливо нічого міняти не треба, як я згадував вище, необхідно задати кнопок фонову картинку, виключити використання CSS функції лінійного градієнта і все, конфлікт з браузером IE старих версій на це буде вичерпано.

HTML-код

Нічого незвичайного, простий ненумерованний список, поміщений в блок div з присвоєним йому класом .pagination, для подальшого формування та редагування стилів CSS.

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

CSS-код

Ось всі необхідні стилі:

.pagination {
width:100%;
text-align:center;
padding: 10px;
margin:10px auto;
border: 1px solid #ddd;
}
.pagination ul{
width:100%;
padding:0px;
margin:0px;
}
.pagination ul li {
display:inline-block;
list-style:none;
margin:5px 5px;
font-size:14px;
text-align:center;
}
.pagination ul li a, .pagination ul li a:visited {
display:block;
text-decoration:none;
color: #555555;
background: url(bgnav.png) repeat-x scroll 0 0 #efefef;
border: 1px solid #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 1px #fff, 1px 1px 3px #ddd;
-moz-box-shadow: 0 0 0 1px #fff, 1px 1px 3px #ddd;
-ms-box-shadow: 0 0 0 1px #fff, 1px 1px 3px #ddd;
box-shadow: 0 0 0 1px #fff, 1px 1px 3px #ddd;
height: 28px;
width: 28px;
line-height: 26px;
top: -1px;
text-shadow: 1px 1px #fff;
}
.pagination ul li a:hover {
display:block;
background: url(bgnav.png) repeat-x scroll 0 -24px #efefef;
text-decoration:none;
}
.pagination ul li a:active {
box-shadow: none;
position: relative;
top: 1px;
}

.pagination {
width:100%;
text-align:center;
padding: 10px;
margin:10px auto;
border: 1px solid #ddd;
}
.pagination ul{
width:100%;
padding:0px;
margin:0px;
}
.pagination ul li {
display:inline-block;
list-style:none;
margin:5px 5px;
font-size:14px;
text-align:center;
}
.pagination ul li a, .pagination ul li a:visited {
display:block;
text-decoration:none;
color: #555555;
background: url(bgnav.png) repeat-x scroll 0 0 #efefef;
border: 1px solid #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 1px #fff, 1px 1px 3px #ddd;
-moz-box-shadow: 0 0 0 1px #fff, 1px 1px 3px #ddd;
-ms-box-shadow: 0 0 0 1px #fff, 1px 1px 3px #ddd;
box-shadow: 0 0 0 1px #fff, 1px 1px 3px #ddd;
height: 28px;
width: 28px;
line-height: 26px;
top: -1px;
text-shadow: 1px 1px #fff;
}
.pagination ul li a:hover {
display:block;
background: url(bgnav.png) repeat-x scroll 0 -24px #efefef;
text-decoration:none;
}
.pagination ul li a:active {
box-shadow: none;
position: relative;
top: 1px;
}

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

ДемоЗавантажити

Сподіваюся, все у вас вийде!

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

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