От автора: jPaginator – это стильный плагин jQuery от Реми Элазара (Remy Elazare), сочетающий при простом пользовательском интерфейсе нумерацию страниц и прокрутку. Реми недавно спросил меня, не хотел бы я применить его для чего-нибудь на Webdesigntuts+ и я решил, что он стал бы отличным кандидатом для создания нового стиля.
Нумерация страниц часто касается множества ссылок на страницы, которые сами по себе требуют навигации еще до того, как вы их выберете. Цель jPaginator’а – улучшить впечатление пользователя от длинных списков пронумерованных страниц, предложив ему для передвижения ссылок влево и вправо слайдер. Также с любой стороны нумератора страниц можно использовать контрольные ссылки или же положиться на хорошие ol’ указатели-стрелки.
Вступление
Посмотрите на 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.
Шаг 2: новый документ HTML
Давайте создадим новый документ, затем обратимся к паре файлов, которые понадобятся нам для применения плагина jPaginator.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jPaginator - jQuery plugin</title> <meta name="description" content=""> <meta name="author" content=""> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery-ui-1.8.13.slider.min.js"></script> <script src="jPaginator-min.js"></script> <style type="text/css" media="all"> @import url(jPaginator.css); @import url(custom.css); </style> </head> |
Мы начинаем с основного документа HTML5, делаем ссылку на jQuery (в данном случае размещенный на Google), затем следует плагин слайдера jQuery UI, на котором jPaginator чувствует себя уверенно, и, наконец, сам скрипт jPaginator.js.
Сделав это, мы ссылаемся на файл jPaginator.css (что дает нам рабочую базу слайдера), а затем, наконец, наш собственный custom.css, который мы будем использовать для назначения стилей на свое усмотрение.
Вот как в данный момент должна выглядеть структура ваших документов:
Шаг 3: запускаем jPaginator
Пора добавить jPaginator на страницу. Начинаем с разметки, вставленной в тело body нашего документа:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div id="container"> <!--include a div which we'll use to illustrate jPaginator doing its job--> <div id="page"></div> <div id="pagination"> <!-- optional left control buttons--> <a class="control" id="max_backward"></a> <a class="control" id="over_backward"></a> <div class='paginator_p_wrap'> <div class='paginator_p_bloc'> <!--<div class='paginator_p'></div> // page number : dynamically added --> </div> </div> <!-- optional right control buttons--> <a class="control" id="over_forward"></a> <a class="control" id="max_forward"></a> <!-- slider --> <div class='paginator_slider' class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all'> <a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a> </div> </div> </div> |
Наша цель – div «pagination», это то, куда будет добавлен наш jPaginator. Элемент div перед «pagination» не критичен, но мы собираемся применить его для иллюстрирования реального действия нумерации страниц, меняя содержимое внутри него каждый раз, когда на кнопку щелкают мышью.
Также следует обратить внимание на контрольные кнопки, две ссылки с каждой стороны «paginator_p_wrap», которые мы будем использовать для управления нумерацией страниц. Это чисто дополнительная функция – мы назначим им роль в параметрах, когда вызываем jPaginator. Наконец добавляем разметку слайдера. Все полностью затем оборачивается в div «container», чтобы помочь нам красиво отразить это на экране.
Теперь нужно вызвать jPaginator в head:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script type="text/javascript"> // 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); } }); }); </script> |
Здесь вы видите jPaginator, примененный к нашему div’у «pagination», тонко настроенный при помощи пары доступных нам параметров. Мы установили количество страниц на 64, поле вокруг каждой ссылки на 5px и длину (хотя видимы будут многие ссылки) – на 8. Далее мы просто вносим в список 4 элемента управления, добавленные к разметке – теперь они на самом деле будут что-то делать. Наконец, функция смены содержимого нашего div’а «page» (предоставленная Реми), в момент, когда производится щелчок.
Мы закончили, так что в своем основном виде все должно работать.
Шаг 4: начинаем играть
Для аккуратного построения элементов сначала нужно убедиться, что мы знаем, насколько велика задача. Давайте рассмотрим различные измерения своего проекта:
Вкратце, у нас есть кнопки нумерации страниц (они не кнопочные элементы, но мы с этого момента будем считать их кнопками) размером 30x30px, контейнер (включая выделение и тени) высотой в 110px и ссылки nav шириной 40px.
Выполнив это, давайте перейдем к украшению…
Шаг 5: таблица стилей
Кнопки нашей нумерации страниц создаются динамично, так что если вы удалили прокомментированный пример, вам придется воспользоваться Firebug или каким-нибудь другим инспектором браузеров, чтобы видеть, как снова все собрать.
Установив, что наши кнопки на самом деле div’ы с классом «paginator_p», мы, по крайней мере, знаем, чему будем назначать стили. Также видно, что многие встроенные стили добавлены к этим элементам при помощи jPaginator’а, хотя они все определяют разметку в противоположность эстетике.
Давайте добавим в свою таблицу стилей несколько правил, чтобы уже запустить все в действие…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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. Для подстраховки у нас для неподдерживающих браузеров будет чистый цвет и альтернативное изображение градиента. Мы также добавим легкую отбрасываемую тень к тексту в нашей кнопке, как это следует сделать согласно дизайну проекта.
|
1 2 3 4 5 6 7 8 9 10 11 |
/*офсет в 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 даст нам идеальные окружности. Поэтому принимаемся за работу…
|
1 2 3 4 |
/*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 вниз, так что свечение просто едва касается верхушки наших окружностей.
|
1 2 3 4 5 |
/*тень блока – никакого офсета, но размывание в 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»:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.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+ */ /*box shadow - 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
Прямо сейчас наши ссылки находятся в состоянии по умолчанию – смотрятся отлично! Теперь нам нужно добавить элементам вокруг ссылок немного пространства:
|
1 2 3 4 |
/*контейнер для кнопок – добавьте отступ, чтобы было видно отбрасываемую тень*/ .paginator_p_bloc { padding: 5px 0; } |
«paginator_p_bloc» – родительский элемент всех наших кнопок и нуждается в небольшом отступе (сверху и снизу), чтобы учесть отбрасываемую тень, примененную вокруг них. То, что у вас сейчас имеется, должно выглядеть, как наш первый промежуточный этап.
Шаг 10: состояние при проведении мышью
Давайте применим к своим кнопкам красивое состояние при проведении мышью, такое, как мы установили в .psd.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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, так что давайте назначим ему такие стили, как если бы на кнопку нажали (под чем я подразумеваю, что она была нажата внутрь, она ведь не сидит в ванной, раскачиваясь вперед-назад и рыдая в горшок с арахисовым маслом).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/*состояние нажатия, плюс состояние проведения мышью, пока элемент выбирается. Это может происходить до или после общего состояния проведения мышью, благодаря особенности опережения*/ .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, чтобы сделать вокруг него отступ. Назначаем верхней и левой границам темный цвет, затем нижней и правой границам бледный цвет, чтобы получилось впечатление рельефности.
Наконец, вокруг углов с каждой стороны у нас теперь есть направляющая для красивого слайдера.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*направляющая для слайдера*/ .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: ручка
Да, ручка. Иногда это кажется хорошим названием, но я полагаю, что мог бы остановиться и на «рукоятке». В любом случае, давайте добавим немного стилей той штуке, на которую вы щелкаете и тащите вдоль полосы прокрутки слайдера…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/*ручка слайдера*/ .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; которое подталкивает ручку влево точно на половину ее ширины. Посмотрите на изображение внизу, чтобы понять, зачем:
Мы прогрессируем, смотрите наш третий промежуточный этап.
Шаг 14: управление
В продолжение давайте упорядочим элементы управления по сторонам контейнера с нумерацией страниц.
Ради простоты мы будем применять изображения, так что, перейдя к Photoshop’у, подготовьте себе таблицу спрайтов для иконок ссылок. Я уже начал заполнять таблицу спрайтов альтернативными градиентами, так что я просто сделаю добавление к ним, размещая все логически для ссылок в CSS. Если вы предпочитаете закинуть в свою таблицу спрайтов все в случайном порядке, то всегда можете определить нужные изображения благодаря таким сервисам, как Sprite Cow.
Форма каждой иконки — 40x40px и мы расположим состояния проведения над ними мышью по вертикали. Как можно видеть в стилях внизу, каждая кнопка – это блок 40x40px и у нее есть прилагаемое соответствующее изображение в зависимости от ее расположения и состояния. Css прокомментирован, так что я сейчас умолкаю.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/*работаем с кнопками управления*/ /*общие стили для кнопок управления*/ .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.
Сначала давайте позаботимся (увеличим) отступ нашего элемента-контейнера:
|
1 2 3 4 |
.paginator_p_wrap { margin: 0; padding: 35px 0; } |
После этого наша нумерация страниц окажется сдвинутой вниз в правильное положение.
Шаг 16: сжимаем и прячем
ОК, давайте сделаем эти тени прорезями (я добавил их в таблицу спрайтов один раз):
|
1 2 3 4 5 6 7 8 |
.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 (поддерживаемый всеми основными браузерами).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*выделение*/ #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 и предыдущие версии, применив условное предложение, такое, как приведенное ниже и современные браузеры будут смотреться не лучше.
|
1 2 3 4 |
<!--[if lte IE 8]> <style type="text/css" media="all"> @import url(ie.css); </style><![endif]--> |
Заключение
Спасибо за внимание, я надеюсь, что вы сможете выбрать полезные для себя идеи из прочтенного. А также большое спасибо Реми за пожертвование jPaginator’ом как подопытной морской свинкой – обязательно посмотрите его разработку на GitHub!
Автор: Ian Yates
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (5)