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

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

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

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

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

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

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

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

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

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

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