Netcribe — Адаптивная страница портфолио с фильтрами

Создаем адаптивную страницу портфолио с фильтрами

Доброго времени суток уважаемые хабражители. На сегодняшний день уже многие знакомы с понятием адаптивный дизайн и я хочу поделиться интересной реализацией страницы портфолио с фильтрами.

HTML разметка

Создаем тело страницы. В блоке каждому элементу

Создаем элементы портфолио

Адаптивная страница портфолио с фильтрами
Категория
Описание работы
Категория
Описание работы
Категория
Описание работы
Категория
Описание работы

CSS

Задаем стиль для навигационной панели:

nav ul < list-style: none; padding: 0; margin: 50px 0; text-align: center; >nav ul li < display: inline; cursor: pointer; margin-right: 10px; color: #666; font-size: 12px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; >nav ul li:hover < color: #000; >nav ul li:last-child < /* Убираем margin у последнего элемента списка для корректного центрирования */ margin-right: 0; >nav ul li:after < /* Добавляем разделитель '/' */ margin-left: 10px; content: '/'; color: #bbb; >nav ul li:hover:after < color: #bbb; >nav ul li:last-child:after < /* Убираем разделитель '/' после последнего элемента списка */ content: ''; >.current-li < /* Присваиваемый класс выбранному элементу категории */ color: #000; >

Стилизуем элементы портфолио:

.work < margin: 20px 0; >.work figure < float: left; margin: 20px; width: 200px; height: 200px; background: #0296BA; /* Используем webkit фильтр (подробнее на http://habrahabr.ru/post/155353/) */ -webkit-filter: sepia(0.4); position: relative; /* Поскольку к применяется абсолютное позицианирование */ padding: 0 !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); transition: 0.6s; /* Анимация сортировки работ при выборе категории */ -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; > .work figure a img

Описание к каждой работе в портфолио должно появляться при наведении на нее (тег

). Устанавливаем нулевую непрозрачность и абсолютное позицианирование для : 
.work figure a < text-decoration: none; >.work figure a img < height: 100%; width: 100%; >.work figure dl < opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; margin: 0; background: rgba(0, 0, 0, 0.8); color: white; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; -ms-transition: 0.6s; >.work figure:hover dl < opacity: 1; >.work figure dl dt < text-transform: uppercase; margin-bottom: 20px; >.work figure dl dd

Стилизуем классы .selected и .not-selected , свойства которых описывают изменения в анимации элементов

 при выборе категории. 
.selected < -webkit-filter: sepia(0) !important; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); >.not-selected

Selection и Scrollbar

Прошли те дни, когда было актуально стилизовать scrollbar в IE 5.5 и IE6 с помощью не стандартизированных W3C свойств вида scrollbar-base-color . Хочется поделиться одной интересной особенностью webkit:

::selection < background: #333; color: #FFF; >::-webkit-scrollbar < width: 9px; >::-webkit-scrollbar-track < background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset; >::-webkit-scrollbar-thumb

C помощью псевдо-селекторов ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb; мы простилизовали scrollbar в webkit, что похоже на скроллинг в Gmail. Учитывая количество пользователей Google Chrome, Safari, Yandex Browser мы можем смело применять эти свойства, так как это не останется незамеченным практически для половины аудитории Вашего сайта. Если я не ошибаюсь, то об этой полезности на хабре не рассказывалось, хотя данные префиксы поддерживаются с 2009 года. Подробно об этом пишет Cris Coyier на CSS Tricks.

Media Queries

965px или меньше

840 = (170+40)*4. Ширина .conteiner равна сумме ширины и значений свойств margin-left и margin-right помноженных на 4 (элемента).

/* Старые мониторы, нетбуки, планшеты (в горизонтальном положении) */ @media only screen and (max-width: 965px) < .container < width: 840px; >.work figure < width: 170px; height: 170px; >> 

860px или меньше

/* Нетбуки, планшеты */ @media only screen and (max-width: 860px) < .container < width: 720px; >.work figure < width: 200px; height: 200px; >> 

740px или меньше

600 = (160+40)*3. Добавим непрозрачность 0.5 что бы на устройствах с данным разрешением заметнее выглядели элементы с классом .not-selected:

/* Планшеты и телефоны */ @media only screen and (max-width: 740px) < .container < width: 600px; >.work figure < width: 160px; height: 160px; >.not-current < opacity: 0.5; >> 

610px или меньше

/* Телефоны (в горизонтальном положении) и Планшеты (в вертикальном положении) */ @media only screen and (max-width: 610px) < .container < width: 460px; >.work figure < margin: 20px 35px; >> 

480px или меньше

/* Телефоны (в горизонтальном положении) */ @media only screen and (max-width: 480px) < .container < width: 320px; >.work figure < width: 200px; height: 200px; margin: 20px 60px; >> 

JavaScript — jQuery

Все просто — манипулируем классами:

• Создаем обработчик события при клике на категории nav > li
• У всех элементов, где класс совпадает с идентификатором выбранной категории удаляем класс .not-selected и добавляем .selected.
• Удаляем класс .corrent-li и добавляем .current-li выбранной категории.
• Для всех работ не входящих в выбранную категорию удаляем класс .selected и присваиваем .not-selected

function scaleDown() < // Заменяем классы у выделенных элементов, и удаляем класс у текущей категории $('.work >figure').removeClass('selected').addClass('not-selected'); $('nav > ul > li').removeClass('current-li'); > function show(category) < // Добавляем класс к категории, меняем классы у выбранных работ scaleDown(); $('#' + category).addClass('current-li'); $('.' + category).removeClass('not-selected'); $('.' + category).addClass('selected'); if (category == "all") < // Если выбраны все работы $('nav >ul > li').removeClass('current-li'); $('#all').addClass('current-li'); $('.work > figure').removeClass('selected, not-selected'); > > $(document).ready(function() < $('#all').addClass('current-li'); $("nav >ul > li").click(function()< show(this.id); >); >); 

UPD: Не нашел, где указать первоисточник в редакторе, напишу здесь — webdesign.tutsplus.com

UPD: Коллеги, все кто пишет о том, что тормозит — это последствия хабраэффекта.

Источник