Набор стилей для формирования постраничной навигации сайта на CSS3

Готовые наборы правил CSS для формирования внешнего вида панелей постраничной навигации сайта

by Andrey Dobrovoi

HTML

<div class="pagination">
<ul>
<li><a href="#" title="Старт" class="blacksquare">Старт</a></li>
<li><a href="#" title="Назад" class="blacksquare">&laquo; Назад</a></li>
<li><a href="#" title="1" class="blacksquareactive">1</a></li>
<li><a href="#" title="2" class="blacksquare">2</a></li>
<li><a href="#" title="3" class="blacksquare">3</a></li>
<li><a href="#" title="4" class="blacksquare">4</a></li>
<li><a href="#" title="5" class="blacksquare">5</a></li>
<li><a href="#" title="6" class="blacksquare">6</a></li>
<li><a href="#" title="7" class="blacksquare">7</a></li>
<li><a href="#" title="8" class="blacksquare">8</a></li>
<li><a href="#" title="9" class="blacksquare">9</a></li>
<li><a href="#" title="10" class="blacksquare">10</a></li>
<li><a href="#" title="Вперед" class="blacksquare">Вперед &raquo;</a></li>
<li><a href="#" title="Конец" class="blacksquare">Конец</a></li>
</ul>
</div> 
<div class="pagination">
<ul>
<li><a href="#" title="Старт" class="blackcurve">Старт</a></li>
<li><a href="#" title="Назад" class="blackcurve">&laquo; Назад</a></li>
<li><a href="#" title="1" class="blackcurve">1</a></li>
<li><a href="#" title="2" class="blackcurveactive">2</a></li>
<li><a href="#" title="3" class="blackcurve">3</a></li>
<li><a href="#" title="4" class="blackcurve">4</a></li>
<li><a href="#" title="5" class="blackcurve">5</a></li>
<li><a href="#" title="6" class="blackcurve">6</a></li>
<li><a href="#" title="7" class="blackcurve">7</a></li>
<li><a href="#" title="8" class="blackcurve">8</a></li>
<li><a href="#" title="9" class="blackcurve">9</a></li>
<li><a href="#" title="10" class="blackcurve">10</a></li>
<li><a href="#" title="Вперед" class="blackcurve">Вперед &raquo;</a></li>
<li><a href="#" title="Конец" class="blackcurve">Конец</a></li>
</ul>
</div> 
<div class="pagination">
<ul>
<li><a href="#" title="Старт" class="whitesquare">Старт</a></li>
<li><a href="#" title="Назад" class="whitesquare">&laquo; Назад</a></li>
<li><a href="#" title="1"...

CSS

p {
    margin: 15px auto;
    text-align: center
}
a {
    color: #006b05;
    text-decoration: none;
}


/*** Постраничная навигация базовый стиль ***/

.pagination {
    width: 100%;
    text-align: center;
}

.pagination ul {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.pagination ul li {
    display: inline-block;
    list-style: none;
    margin: 3px 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

.pagination ul li a,
.pagination ul li a:visited {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
}

.pagination ul li a:hover {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
}


/***** Черный *****/

.pagination ul li a:link.blacksquare,
.pagination ul li a:visited.blacksquare {
    border: 1px solid #000;
    background: #000;
    background: -moz-linear-gradient(top, #3f3f3f, #000);
    background: -ms-linear-gradient(top, #3f3f3f, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#3f3f3f), to(#000));
    background: -o-linear-gradient(#3f3f3f, #000);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#3f3f3f', EndColorStr='#000', GradientType=0);
    color: #fff;
    text-shadow: none !important;
}

.pagination ul li a:hover.blacksquare {
    border: 1px solid #000;
    background: #7c7c7c;
    background: -moz-linear-gradient(top, #7c7c7c, #000);
    background: -ms-linear-gradient(top, #7c7c7c, #000);
    background: -webkit-gradient(linear, left top, left bottom, from(#7c7c7c), to(#000));
    background: -o-linear-gradient(top, #7c7c7c, #000);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#7c7c7c', EndColorStr='#000', GradientType=0);
    color: #fff;
    text-shadow: none !important;
}

.pagination ul li a:link.blacksquareactive,
.pagination ul li a:visited.blacksquareactive {
    border: 1px solid #000;
    background: #7c7c7c;
    background: -moz-linear-gradient(top, #7c7c7c, #000);
    background:...