Кардинальна зміна іміджу: jPaginator версії CSS3

17

Від автора: jPaginator – це стильний плагін jQuery від Ремі Элазара (Remy Elazare), що поєднує при простому інтерфейсі нумерацію сторінок та прокручування. Ремі нещодавно запитав мене, чи не хотів би я застосувати його для чого-небудь на Webdesigntuts+ і я вирішив, що він став би відмінним кандидатом для створення нового стилю.

Нумерація сторінок часто стосується безлічі посилань на сторінки, які самі по собі потребують навігації ще до того, як ви виберете. Мета jPaginator’а – поліпшити враження користувача від довгих списків пронумерованих сторінок, запропонувавши йому для пересування посилань вліво і вправо слайдер. Також з будь-якої сторони нумератора сторінок можна використовувати контрольні посилання або ж покластися на хороші ol’ покажчики-стрілки.

Кардинальна зміна іміджу: jPaginator версії CSS3Кардинальна зміна іміджу: jPaginator версії CSS3

Вступ

Подивіться на jPaginator в його «сирому» вигляді. Він неусложнен і ідеально придатний до застосування, але давайте подивимося, чи можна додати йому трохи яскравих фарб. Ми збираємося застосувати кілька технік CSS3 – це практична задача нашого підручника, а ми при цьому переконаємося, що фінальний інтерфейс, принаймні, застосуємо для неподдерживающих браузерів.

Що тут розкривається?

Вартий уваги CSS:

тінь тексту (text-shadow)

градієнти

радіус закругленого кута (border-radius)

тінь блоку (box-shadow)

множинні фони

селектор :after

застосування таблиці спрайтів

Підтримка браузерів (без «латочок»):

IE9+

FireFox 3.6

Safari 1.0

Chrome 1.3

Opera 10.5

Крок 1: PSD

Я міг би написати підручник про те, як збирається .psd, потім продовжити поясненням розмітки і стилів, але ви б точно так довго не витримали! Замість цього просто скачайте исходник і пограйте з файлом самі.

Варто згадати текстуру фону «Тактильний шум» (Tactile Noise), завантажену у Этла Мо (Atle Mo) з дуже корисного сайту subtlepatterns.com.

Кардинальна зміна іміджу: jPaginator версії CSS3

Крок 2: новий документ HTML

Давайте створимо новий документ, потім звернемося до парі файлів, які знадобляться нам для застосування плагіна jPaginator.

jPaginator — jQuery plugin
@import url(jPaginator.css);
@import url(custom.css);

Ми починаємо з основного документа HTML5, робимо посилання на jQuery (в даному випадку розміщений на Google), потім слід плагін слайдера jQuery UI, на якому jPaginator відчуває себе впевнено, і, нарешті, сам скрипт jPaginator.js.

Зробивши це, ми посилаємося на файл jPaginator.css (що дає нам робочу базу слайдера), а потім, нарешті, наш власний custom.css, який ми будемо використовувати для призначення стилів на свій розсуд.

Ось як в даний момент повинна виглядати структура ваших документів:

Кардинальна зміна іміджу: jPaginator версії CSS3

Крок 3: запускаємо jPaginator

Пора додати jPaginator на сторінку. Починаємо з розмітки, вставлена в тіло body нашого документа:

Наша мета – div «pagination», це те, куди буде додано наш jPaginator. Елемент div перед «pagination» не критичний, але ми збираємося застосувати його для ілюстрування реального дії нумерації сторінок, змінюючи вміст всередині нього кожен раз, коли на кнопку клацають мишею.

Також слід звернути увагу на контрольні кнопки, два посилання з кожної сторони «paginator_p_wrap», які ми будемо використовувати для управління нумерацією сторінок. Це чисто додаткова функція – ми призначимо їм роль в параметрах, коли викликаємо jPaginator. Нарешті додаємо розмітку слайдера. Все повністю потім обертається у div «container», щоб допомогти нам красиво відобразити це на екрані.

Тепер потрібно викликати jPaginator в head:

// Initial call
$(document).ready(function(){
$(«#pagination»).jPaginator({
nbPages:64,
marginPx:5,
length:8,
overBtnLeft:’#over_backward’,
overBtnRight:’#over_forward’,
maxBtnLeft:’#max_backward’,
maxBtnRight:’#max_forward’,
onPageClicked: function(a,num) {
$(«#page»).html(«Page «+num);
}
});
});

Тут ви бачите jPaginator, застосований до нашого div у «pagination», тонко настроєний за допомогою пари доступних нам параметрів. Ми встановили кількість сторінок на 64, поле навколо кожної посилання на 5px і довжину (хоча видимі будуть багато посилання) – на 8. Далі ми просто вносимо в список 4 елемента керування, додані до розмітки – тепер вони насправді будуть щось робити. Нарешті, функція зміни вмісту нашого div » а «page» (надана Ремі), в момент, коли проводиться клацання.

Ми закінчили, так що у своєму основному вигляді все повинно працювати.

Крок 4: починаємо грати

Для акуратного побудови елементів спочатку потрібно переконатися, що ми знаємо, наскільки велика завдання. Давайте розглянемо різні виміри свого проекту:

Кардинальна зміна іміджу: jPaginator версії CSS3

Коротко, у нас є кнопки нумерації сторінок (вони не кнопкові елементи, але ми з цього моменту будемо вважати їх кнопками) розміром 30x30px, контейнер (включаючи виділення і тіні) висотою в 110px і посилання nav шириною 40px.

Виконавши це, давайте перейдемо до прикраси…

Крок 5: таблиця стилів

Кнопки нашої нумерації сторінок створюються динамічно, так що якщо ви видалили прокомментированный приклад, вам доведеться скористатися Firebug або яким-небудь іншим інспектором браузерів, щоб бачити, як знову все зібрати.

Кардинальна зміна іміджу: jPaginator версії CSS3

Встановивши, що наші кнопки насправді div и з класом «paginator_p», ми, принаймні, знаємо, чого будемо призначати стилі. Також видно, що багато вбудовані стилі додані до цих елементів за допомогою jPaginator’а, хоча вони все визначають розмітку на противагу естетиці.

Давайте додамо в свою таблицю стилів кілька правил, щоб запустити в дію…

body {
background: url(img/bg.png) #242424;
}
#container {
padding: 20px;
width: 480px;
margin: 100px auto 0 auto;
font-family: Arial, sans-serif;
}
.paginator_p {
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
font-size: 13px;
font-weight: bold;
color: #26430c;
}

Потужний старт. До того, як почати возитися з кнопками, встановлюємо фонове зображення для body і додаємо кілька стилів до свого div у «container». Ми визначили, що наші кнопки повинні бути 30x30px, встановили між ними відповідну висоту рядка (що розташує наші номери більш або менш вертикально по центру) і застосували вирівнювання тексту text-align: по центру, щоб впоратися з горизонтальним вирівнюванням чисел. Отже, у нас вийшли красиві квадратні кнопки з ідеально розташованими по центру числами. Потім ми робимо текст напівжирним і призначаємо йому колір згідно зі своїм задумом.

Крок 6: гарні кольори

В продовження давайте застосуємо до своїх кнопок правильний фон. Ми використовуємо градієнти CSS3, чим зможемо догодити всім сучасним браузерам – навіть IE10. Для підстраховки у нас для неподдерживающих браузерів буде чистий колір та альтернативне зображення градієнта. Ми також додамо легку тінь до тексту в нашій кнопці, як це слід зробити згідно дизайну проекту.

/*офсет в 1px праворуч і внизу, ніякого розмивання і не зовсім білий колір*/
text-shadow: 1px 1px 0px #5a8332; /* FF3.5+, Opera 9+, Saf1+, Chrome */
background-color: #4A821B;
background-image: url(img/sprite.png) no-repeat 0 0; /*image fallback for none supporting browsers*/
background-image: -webkit-gradient(linear, left, top, left bottom, from(#4a821b), to(#243f0d)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #4a821b, #243f0d); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #4a821b, #243f0d); /* FF3.6 */
background-image: -ms-linear-gradient(top, #4a821b, #243f0d); /* IE10 */
background-image: -o-linear-gradient(top, #4a821b, #243f0d); /* Opera 11.10+ */
background-image: linear-gradient(top, #4a821b, #243f0d);

Примітка: якщо у вас є 5 хвилин, перегляньте CSS3 Підлоги Айриша (Paul Irish), будь ласка! для отримання додаткової інформації з CSS3 і підтримують браузерах.

Крок 7: життєвий коло

Ми вже визначили, що наші посилання були квадратами в 30px, так що додавання закруглених кутів в 15px дасть нам ідеальні колу. Тому беремося за роботу…

/*border radius в половину ширини та висоти наших посилань для створення кола*/
-moz-border-radius: 15px; /* FF1-3.6 */
-webkit-border-radius: 15px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

Крок 8: стриб!

Ми всього в парі маленьких кроків-деталей від отримання таких же кнопок .psd. Давайте додамо тінь блоку для того, щоб наш елемент видавався вперед. Фактично, давайте додамо дві.

Ми додамо кожної ссылке по темній тіні, що діє близько окружності як темне світіння. Вони поширяться на 1px від неї, потім расплывутся на наступні 4px. Я точно встановив колір (спасибі інструмента «Піпетка» (dropper) з photoshop’у), але ми могли б також застосувати тут значення rgb з непрозорістю.

Застосувавши першу тінь блоку, тепер можна застосувати другу (скоро полюблю тіні блоку), яка діє як виделітель-подсвечиватель. Ви побачите другий набір властивостей, випереджає «inset», який змушує сяйво знаходитися всередині. Ніякого розмивання, ніякого офсету по осі x, а офсет в 1px вниз, так що світіння просто ледь стосується верхівки наших кіл.

/*тінь блоку – ніякого офсету, але розмивання у 4px і поширення в 1px*/
/*плюс додаткова тінь блоку для створення ефекту світіння*/
-moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* FF3.5+ */
-webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Saf3.0+, Chrome */
box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Opera 10.5, IE9, Chrome 10+ */

Ось як виглядає остаточний css для нашого div » а «paginator_p»:

.paginator_p {
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
font-size: 13px;
font-weight: bold;
color: #26430c;
/*1px right and down offset, no blur and offwhite*/
text-shadow: 1px 1px 0px #5a8332; /* FF3.5+, Opera 9+, Saf1+, Chrome */
background-color: #4A821B;
background-image: url(img/sprite.png) no-repeat 0 0; /*image fallback for none supporting browsers*/
background-image: -webkit-gradient(linear, left, top, left bottom, from(#4a821b), to(#243f0d)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #4a821b, #243f0d); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #4a821b, #243f0d); /* FF3.6 */
background-image: -ms-linear-gradient(top, #4a821b, #243f0d); /* IE10 */
background-image: -o-linear-gradient(top, #4a821b, #243f0d); /* Opera 11.10+ */
background-image: linear-gradient(top, #4a821b, #243f0d);
/*border radius half the width and height of our links to create a circle*/
-moz-border-radius: 15px; /* FF1-3.6 */
-webkit-border-radius: 15px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/*shadow box — no offset, but a blur of 4px and spread of 1px*/
/*plus an additional box-shadow to create the glow*/
-moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* FF3.5+ */
-webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Saf3.0+, Chrome */
box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Opera 10.5, IE9, Chrome 10+ */
}

Крок 9: проміжний етап №1

Прямо зараз наші посилання перебувають у стані за замовчуванням – виглядають відмінно! Тепер нам потрібно додати елементам навколо посилань трохи простору:

/*контейнер для кнопок – додайте відступ, щоб було видно тінь*/
.paginator_p_bloc {
padding: 5px 0;
}

«paginator_p_bloc» батьківський елемент всіх наших кнопок і потребує невеликому відступі (зверху і знизу), щоб врахувати тінь, застосовану навколо них. Те, що у вас зараз є, має виглядати, як наш перший проміжний етап.

Крок 10: стан при проведенні мишею

Давайте застосуємо до своїх кнопок красиве стан при проведенні мишею, таке, як ми встановили .psd.

.paginator_p:hover {
color: #0d1804;
/*офсет в 1px праворуч і знизу, ніякого розмивання, блідо-зелений колір*/
text-shadow: 1px 1px 0px #8dc953;
background-color: #87D445;
background-image: url(img/sprite.png) no-repeat -120px 0; /*image fallback for none supporting browsers*/
background-image: -webkit-gradient(linear, left, top, left bottom, from(#87d445), to(#589225)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #87d445, #589225); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #87d445, #589225); /* FF3.6 */
background-image: -ms-linear-gradient(top, #87d445, #589225); /* IE10 */
background-image: -o-linear-gradient(top, #87d445, #589225); /* Opera 11.10+ */
background-image: linear-gradient(top, #87d445, #589225);
/*тінь боксу – ніякого офсету, але розмивання у 2px і поширення в 1px*/
/*плюс додаткова тінь боксу для створення ефекту світіння – злегка яскравіше свого звичайного стану*/
-moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #cff3a2; /* FF3.5+ */
-webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #cff3a2; /* Saf3.0+, Chrome */
box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #cff3a2; /* Opera 10.5, IE9, Chrome 10+ */
}

Отже, що ми тут зробили? Власне, затемнили колір чисел і призначили їм бліду тінь. Ми змінили значення градієнта фону (для того, щоб елементи виглядали яскравіше) і злегка змінили виділяє тінь блоку зверху посилань. Отбрасываемая тінь з темним сяйвом залишається тією ж, але нам потрібно знову її оголосити, якщо її не слід пропустити.

Крок 11: стан вибору (проміжний етап № 2)

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

/*стан натискання, плюс стан проведення мишею, поки елемент вибирається. Це може відбуватися до або після загального стану проведення мишею, завдяки особливості випередження*/
.paginator_p.selected,
.paginator_p.selected:hover {
color: #0d1804;
/*офсет в 1px праворуч і внизу, ніякого розмивання, блідо-зелений колір*/
text-shadow: 1px 1px 0px #8dc953; /* FF3.5+, Opera 9+, Saf1+, Chrome */
background-color: #589225;
background-image: url(img/sprite.png) no-repeat -80px 0; /*image fallback for none supporting browsers*/
background-image: -webkit-gradient(linear, left, top, left bottom, from(#589225), to(#87D445)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #589225, #87D445); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #589225, #87D445); /* FF3.6 */
background-image: -ms-linear-gradient(top, #589225, #87D445); /* IE10 */
background-image: -o-linear-gradient(top, #589225, #87D445); /* Opera 11.10+ */
background-image: linear-gradient(top, #589225, #87D445);
/*тінь блоку – ніякого офсету, але розмивання у 2px і поширення в 1px*/
/* плюс додаткова тінь боксу для створення ефекту світіння – злегка яскравіше свого звичайного стану */
-moz-box-shadow: 0 0 2px 1px #191919, inset 0 1px 0 #cff3a2; /* FF3.5+ */
-webkit-box-shadow: 0 0 2px 1px #191919, inset 0 1px 0 #cff3a2; /* Saf3.0+, Chrome */
box-shadow: 0 0 2px 1px #191919, inset 0 1px 0 #cff3a2; /* Opera 10.5, IE9, Chrome 10+ */
}

Ми включили стан selected:hover, так що кнопка не змінюється, коли над нею проводять мишею. Що ще ми тут зробили? Знову змінили колір і тінь тексту, звернули в іншу сторону градієнт для створення відчуття угнутості і зменшили темне світіння (передбачається, що вона більше так сильно не виділяється). Все просто. Те, що у вас зараз виходить, має виглядати, як наш другий проміжний етап.

Крок 12: слайдер

Розсортувавши кнопки, давайте звернемо свою увагу на слайдер. Він порівняно простий; нам потрібно змінити поля, щоб правильно його розмістити, призначити йому фон і правильну висоту. Він повинен бути, згідно з нашим задумом, висотою в 10px, так що ми призначимо йому висоту 8px плюс кордон навколо нього в 1px, щоб зробити навколо нього відступ. Призначаємо верхній і лівій кордонів темний колір, потім нижній і правій границям блідий колір, щоб склалося враження рельєфності.

Нарешті, навколо кутів з кожного боку у нас тепер є напрямна для красивого слайдера.

/*напрямна для слайдера*/
.paginator_slider {
/*поле ліворуч зрушує його повз кнопок nav,
так що зробіть відстань на повну ширину, включаючи поля кнопок nav*/
margin: 20px 0 20px 80px;
/*при висоті в 8px плюс кордон у 1px навколо висоти дає в підсумку 10px*/
height: 8px;
background: #181818;
border: 1px solid #393939;
border-top-color: #0f0f0f;
border-left-color: #0f0f0f;
/*border radius for ff, safari + chrome, css3*/
/*половина загальної висоти нашого елемента для створення заокруглених кінців*/
-moz-border-radius: 5px; /* FF1-3.6 */
-webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
}

Крок 13: ручка

Так, ручка. Іноді це здається гарною назвою, але я вважаю, що міг би зупинитися і на «ручці». У будь-якому випадку, давайте додамо трохи стилів тій штуці, на яку ви клацаєте і тягніть вздовж смуги прокрутки слайдера…

/*ручка слайдера*/
.paginator_slider .ui-slider-handle {
height: 20px;
width: 20px;
margin-left: -10px; /*nudges the knob left, half its width*/
/*прибираємо outline в ff*/
outline: none;
/*border radius for ff, safari + chrome, css3*/
/*половина ширини та висоти ручки для створення кола*/
-moz-border-radius: 10px; /* FF1-3.6 */
-webkit-border-radius: 10px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/*змініть розташування так, щоб воно отцентрировалось по направляючої*/
top: -7px;
/*ті ж стилі, що в посилань*/
background-color: #4A821B;
background-image: url(img/sprite.png) no-repeat 0 0; /*image fallback for none supporting browsers*/
background-image: -webkit-gradient(linear, left, top, left bottom, from(#4a821b), to(#243f0d)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #4a821b, #243f0d); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #4a821b, #243f0d); /* FF3.6 */
background-image: -ms-linear-gradient(top, #4a821b, #243f0d); /* IE10 */
background-image: -o-linear-gradient(top, #4a821b, #243f0d); /* Opera 11.10+ */
background-image: linear-gradient(top, #4a821b, #243f0d);
/*тінь блоку – ніякого офсету, але розмивання у 4px і поширення в 1px*/
/*плюс додаткова тінь блоку для створення світіння*/
-moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* FF3.5+ */
-webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Saf3.0+, Chrome */
box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Opera 10.5, IE9, Chrome 10+ */
}

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

Інші стоять згадки правила – це outline:none», яке прибирає контур з точок Firefox, розташування осі ординат y для зміни там, де ручка вертикально посаджена на смугу слайдера і margin-left: -10px; яке підштовхує ручку вліво точно на половину ширини. Подивіться на зображення внизу, щоб зрозуміти, навіщо:

Кардинальна зміна іміджу: jPaginator версії CSS3

Ми прогресуємо, дивіться наш третій проміжний етап.

Крок 14: управління

В продовження давайте впорядкувати елементи управління по сторонах контейнера з нумерацією сторінок.
Заради простоти ми будемо застосовувати зображення, так що, перейшовши до Photoshop, створіть таблицю спрайтів для іконок посилань. Я вже почав заповнювати таблицю спрайтів альтернативними показниками, так що я просто зроблю додавання до них, розміщуючи все логічно для посилань в CSS. Якщо ви віддаєте перевагу закинути в свою таблицю спрайтів все у випадковому порядку, то завжди можете визначити потрібні вам зображення завдяки таким сервісам, як Sprite Cow.

Кардинальна зміна іміджу: jPaginator версії CSS3

Форма кожної іконки — 40x40px і ми розташуємо стану проведення над ними мишею по вертикалі. Як можна бачити в стилях внизу, кожна кнопка – це блок 40x40px і у неї є додається відповідне зображення в залежності від її розташування і стану. Css прокоментовано, так що я зараз мовчу.

/*працюємо з кнопками управління*/
/*загальні стилі для кнопок управління*/
.control {
float: left;
width: 40px;
height: 40px;
margin: 35px 0 0 0;
position: relative; /*трохи пізніше ви побачите, навіщо*/
cursor: pointer;
}
#max_backward {
background: url(img/sprite.png) no-repeat 0 -60px;
}
#over_backward {
background: url(img/sprite.png) no-repeat -40px -60px;
}
#over_forward {
background: url(img/sprite.png) no-repeat -80px -60px;
}
#max_forward {
background: url(img/sprite.png) no-repeat -120px -60px;
}
/*стану проведення мишею*/
#max_backward:hover {
background: url(img/sprite.png) no-repeat 0 -100px;
}
#over_backward:hover {
background: url(img/sprite.png) no-repeat -40px -100px;
}
#over_forward:hover {
background: url(img/sprite.png) no-repeat -80px -100px;
}
#max_forward:hover {
background: url(img/sprite.png) no-repeat -120px -100px;
}

Дуже добре, подивіться, що було зроблено на проміжному етапі №4.

Крок 15: відчуття занурення

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

Погляньте на зображення внизу. На ньому ви побачите, що нам потрібно чотири зображення для опрацювання виділення і тіні для кожного. Виділення відповідають, крім елементів управління, кожній стороні контейнера, тіні відповідають самому контейнера, тому нам потрібно зробити їх висотою 110px.

Кардинальна зміна іміджу: jPaginator версії CSS3

Спочатку давайте подбаємо (збільшимо) відступ нашого елементу-контейнера:

.paginator_p_wrap {
margin: 0;
padding: 35px 0;
}

Після цього наша нумерація сторінок виявиться зрушеної вниз у правильне положення.

Крок 16: стискаємо і ховаємо

ОК, давайте зробимо ці тіні прорізами (я додав в таблицю спрайтів один раз):

.paginator_p_wrap {
margin: 0;
padding: 35px 0;
/*множинні фонові зображення, одне ліворуч, одна праворуч*/
background: url(img/shadow_sprite.png) left -220px no-repeat,
url(img/shadow_sprite.png) right -330px no-repeat
}

…а зараз попрацюємо з виділенням, застосовуючи селектор :after (підтримуваний усіма основними браузерами).

/*виділення*/
#over_backward:after {
content: «;
background: url(img/sprite.png) -40px -140px no-repeat;
display: block;
height: 110px;
width: 30px;
/*встановіть розташування виділення з-за незручних успадкованих від .control чисел з плаваючою точкою і полів*/
position: absolute;
right: 0px;
top: -35px;
}
#over_forward:after {
content: «;
background: url(img/sprite.png) -80px -140px no-repeat;
display: block;
height: 110px;
width: 30px;
/*встановіть розташування виділення з-за незручних успадкованих від .control чисел з плаваючою точкою і полів*/
position: absolute;
left: 0px;
top: -35px;
}

Селектор :after ефективно генерує об’єкт всередині нашої сторінки. Потім ми можемо керувати ним, як будь-яким іншим, пам’ятаючи про те, що він успадкував від свого батьківського елемента. В нашому випадку завдяки вичерпного призначенням стилів батьківського елемента, ми воліли абсолютне позиціонування, що дозволяє нам точно вказати, де з’являється виділення.

Тепер кілька додаткових стилів для впорядкування вмісту сторінки, а потім ми закінчимо.
Чудово! Ми дісталися до проміжного етапу №5, фінальної рядки, якщо ви не збираєтеся займатися обслуговуванням старих браузерів.

Крок 17: зворотна сумісність

Я збираюся залишити це на ваш розсуд. Методики, випробувані нами були точно такими ж техніками на практиці, а сумісність з браузерами я перерахував у вступі. Однак якщо ви хочете піти далі і переконатися, що в старих браузерах все владнається, у вас на вибір є декілька опцій. Ми гарантували показ градієнтів, включаючи альтернативні зображення в таблиці спрайтів. Проте налагодження множинних фонових зображень, тіней блоків, тіней тексту і закруглених кутів не така вже проста річ.

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

@import url(ie.css);

Висновок

Спасибі за увагу, я сподіваюся, що ви зможете вибрати корисні для себе ідеї з прочитаного. А також велике спасибі Ремі за пожертвування jPaginator’ом як піддослідної морською свинкою – обов’язково подивіться його розробку на GitHub!