Главная

Статьи iT заметки HTML&CSS

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

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
• 2
• 3
• 4
• 5

| | обсудить на форуме | | Рейтинг: 5.0/1

="uForm uComForm">

Войдите:

• Отправить