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

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

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

Посвятив в свое время развернутую статью стилям оформления панели постраничной навигации. Решил поэкспериментировать и с помощью новых свойств , добавить округлости цифровым кнопкам пагинации, а точнее сделать их совсем круглыми.

Используя исключительно средства 3, без подключения дополнительных фоновых изображений, получился довольно не плохой результат:

 
Пагинация CSS3
 
Вроде бы все получилось более чем замечательно, ан нет, черта с два, всю общую картинку, как всегда нагло и в извращенной форме, сломал все тот же IEшка. Этот вечный тормоз прогресса, ни в какую, не захотел нормально обработать сочетание функций скругления углов border-radius и линейного градиента. Без использования градиента, теряли эффект выпуклости, становились плоскими и безжизненными, а подключив фильтр градиента, вырисовывалась и вовсе неприглядная картинка. В этом случае IEшка 6-9 отображал заданный градиент без должного закругления сторон, выступая за очерченные в круг, с помощью border-radius, края кнопок.

 
Круглые кнопки пагинации
 
В общем вырисовалась такая картина: IE6-9 беспардонно пропускает фон кнопок, заданный с помощью фильтра реализующего линейный градиент, за скруглённые уголки.
Надо отдать должное майкрософтовским умельцам, они нехотя снялись с ручного тормоза и уже их новое детище — IE 10-й версии, более или мене сносно, справляется с одновременным использованием скругленных углов и линейного градиента.
 
CSS3 градиент в IE10
 
Конечно, мне хотелось выполнить эту задачу используя только стандарты CSS3, но не стоит забывать, что огромное количество пользователей до сих пор упорно считают IEшку своим основным браузером, а значит негоже преподносить им (пусть даже и по вине самого браузера), не до конца проработанный элемент дизайна сайта.

Посмотреть пример того что получилось на чистом CSS в конечном итоге и при желании отредактировать можно в онлайн-редакторе:
 

 


Что бы не спотыкаться о неожиданные препятствия, которые постоянно выстраивает нам Internet Explorer, необходимо лишь сработать немного по-старинке, т.е. задать какую-нибудь фоновую картинку нашим кнопкам. Пока только так и никак иначе, можно получить по настоящему кроссбраузерный элемент управления сайта, в виде градиентных, круглых кнопок постраничной навигации.

В принципе, в коде особо ничего менять и не надо, как я упоминал выше, необходимо задать кнопкам фоновую картинку, исключить использование в CSS функции линейного градиента и все, конфликт с браузером IE старых версий на это будет исчерпан.

HTML-код

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

  <div class="pagination">
     <ul>
         <li><a href="#" title="Назад" >&laquo;</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="Вперед">&raquo;</a></li>
      </ul>
  </div>

 

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;
}

 
Как видите ничего сложного, при желании можно сменить фоновую картинку на любую другую в зависимости от дизайна сайта. Кстати, в приведённом выше примере я использовал спрайт для светлого фона, который и будет применяться при наведении на кнопки. Готовый спрайт изображений находится в архиве с исходниками. В демо, вариант пагинации на светлом фоне выполнен с использованием фонового изображения в оформлении кнопок, а для тёмного фона с применением градиентов css.

Надеюсь все у вас получится!

С Уважением, Андрей .

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru