• Страница 1 из 1
  • 1
Обсуждение «Закруглённые стрелки “Назад” и “Вперёд” для навигации»
avatar
Админ | Оффлайн
Простые ссылки вперёд/назад для навигации с закругленными стрелками на CSS3. В создании стрелок использовался обычный элемент div и два псевдо-элемента  :after и :before. А сами закругления сделаны с помощью border-radius для псевдо-элементов.

Давайте посмотрим код.

HTML:

<nav>
 
<ahref="#"id="prev">Prev</a>
 
<ahref="#"id="next">Next</a>
</nav>

CSS:

#next,
#prev {
    color
:#333;
    display
:inline-block;
    font
: normal bold 4emArial,sans-serif;
    overflow
: hidden;
    position
: relative;
    text
-decoration: none;
    width
:auto;
}

#next,
#prev { padding: 0.5em 1.5em }

#next { text-align: right }

#next:before,
#next:after,
#prev:before,
#prev:after {
    background
:#333;
   
-moz-border-radius:0.25em;
   
-webkit-border-radius:0.25em;
    border
-radius:0.25em;
    content
:"";
    display
: block;
    height
:0.5em;
    position
: absolute;
    right
:0;
    top
:50%;
    width
:1em;
}

#prev:before,
#prev:after { left: 0 }

#next:before,
#prev:before {
   
-moz-transform: rotate(45deg);
   
-ms-transform: rotate(45deg);
   
-o-transform: rotate(45deg);
   
-webkit-transform: rotate(45deg);
    transform
: rotate(45deg);
}

#next:after,
#prev:after {
   
-moz-transform: rotate(-45deg);
   
-ms-transform: rotate(-45deg);
   
-o-transform: rotate(-45deg);
   
-webkit-transform: rotate(-45deg);
    transform
: rotate(-45deg);
}

#prev:after,
#next:before { margin-top: -.36em }

#next:hover,
#next:focus,
#prev:hover,
#prev:focus { color: #c00 }

#next:hover:before,
#next:hover:after,
#next:focus:before,
#next:focus:after,
#prev:hover:before,
#prev:hover:after,
#prev:focus:before,
#prev:focus:after { background: #c00 }

/* container styles  */

nav
{ text-align: center }

Не поддерживаются браузеры:

  • Mozilla Firefox 3.5 и ниже.
  • Internet Explorer 8.0 и ниже.
  • Opera 10.0 и ниже.

А вот и пример:



В этой теме Вы можете задать вопрос о материале: Закруглённые стрелки “Назад” и “Вперёд” для навигации.
[Сообщение # 1]  
  • Страница 1 из 1
  • 1
Поиск:

close