Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Создаем фильтрующееся портфолио с адаптивным дизайном за счет возможностей CSS

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Благодаря свойственной фильтрующимся портфолио (вроде Tuts+ hub) визуальной привлекательности они стали очень популярными. Сегодня мы будем создавать одно такое при помощи простой разметки, кода CSS и небольшого количества кода jQuery.


Шаг 1: Файловая структура

Мы организуем файлы нашего проекта следующим образом:

File Structure

Сформируйте проект на основе этих файлов (вам необходимо будет скачать HTML5 Shiv (* прокладка (добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными), которая позволяет ранним версиям Internet Explorer распознавать теги HTML5). Здесь и далее примеч. пер.), и давайте приступим к работе с разметкой HTML в файле index.html.


Шаг 2: Заголовок HTML-документа

Давайте продолжим в том же темпе и настрочим список действий, необходимых для создания <head>:

  • объявить тип контента и набор символов, используемых на странице;
  • установить в качестве значения ширины окна просмотра значение ширины устройства и задать в качестве значения изначального масштаба 1 (Подробнее об этом читайте здесь);
  • добавить название для нашей страницы;
  • добавить значок веб-сайта (заинтересованы в иконках, совместимых с экранами, разработанными на основе технологии Retina (* технология визуализации информации, превышающая способность сетчатки глаза выделить отдельные пикселы в изображении (разработчик: компания Apple Inc.))?);
  • добавить нашу основную таблицу стилей (style.css);
  • добавить нашу таблицу стилей для работы с медиа-запросами (media-queries.css);
  • подключить последнюю версию jQuery;
  • добавить HTML5 Shiv для разрешения проблем поддержки HTML5 в ранних браузерах;

И вот, что у нас получается:


Шаг 3: Базовая разметка HTML-документа

В теле документа мы сперва добавляем «контейнер» для размещения всех наших элементов в пределах элемента с заданной шириной, выровненный по центру страницы. Внутри того элемента мы добавляем (подготовьтесь к тому, чтобы настрочить еще один список):

  • <header> для размещения нашего заголовка (‘John Doe’);
  • базовое навигационное меню (<nav>), содержащее <ul> с пятью элементами, для каждого из которых задан соответственный ID.
  • <section> с классом ‘work’ для размещения контрольных изображений (* уменьшенная и упрощённая копия графического объекта, а также макета верстаемого документа);
  • <footer> с предупреждение об авторском праве (* строка, содержащая знак копирайта и сопутствующий текст. Является заявлением (предупреждением) о том, что публикуемый материал охраняется законом об авторском праве);

Шаг 4: Иллюстрация и изображение

Мы будем использовать тег <figure> для размещения наших контрольных изображений и применим к нему класс с названием соответствующей категории, к которой он принадлежит. Внутри этого тега мы добавим тег <a>, содержащий изображение (<img>) для реализации фона контрольного изображения и список определений (<dl>) для добавления надписи.


Шаг 5: HTML-надпись (DL, DT, DD)

Как было упомянуто выше, мы будем использовать список определений для добавления надписей к изображениям. В качестве терминов (<dt>) будут выступать наши небольшие заголовки – Client и Role (* Клиент и Категория), в качестве определений (<dd>) – Envato и Illustration (* например) соответственно.


Шаг 6: Полный код HTML

Ниже проводится весь код нашей разметки:

Теперь давайте перейдем к добавлению стилевого оформления.


Шаг 7: Стилевое оформление для выделяемого пользователем текста и полосы прокрутки

Мы начнем с некоторых интересных элементов: выделенного  пользователем текста и полосы прокрутки (для которых добавлять стилевое оформление вовсе необязательно), а также мы подберем некоторые шрифты.

В коде выше мы импортировали два веб-шрифта с Google: Open Sans и PT Sans Narrow. Затем мы просто установили темно-серый фон и белый цвет для текста, выделяемого пользователем.

После этого мы задали в качестве значения ширины полосы 9px (для браузеров, работающих на основе Webkit) и добавили для дорожки полосы светло-серый фон, тонкую границу и небольшую тень, которая выводится внутри элемента. Далее мы установили темно-серый фон и тонкую границу для ползунка полосы прокрутки.

Обратите внимание: за детальной информацией по поводу webkit-scrollbars обращайтесь к посту Chris Coyier.


Шаг 8: Стилевое оформление для тела

Мы добавим для нашего фона шум в виде светло-серого цвета и установим в качестве шрифта ‘Open Sans’, который импортировали ранее. Также мы добавим границу сверху красного цвета для придания дополнительной изящности.


Немного пошумим...

Шаг 9: Стилевое оформление для контейнера

Теперь переходим к контейнеру, для которого устанавливаем в качестве значения ширины 960px, в качестве значений отступов сверху и снизу 10px и выравниваем его по центру за счет установления в качестве значений отступов справа и слева ‘auto’. Также мы запустим аппаратное ускорение работы с графикой (* стимулирование работы GPU (Graphics Processing Unit – графический процессор) видеокарты, а не CPU – Central Processing Unit – центральный процессор) для (некоторых) мобильных устройств за счет добавления ‘-webkit-transform: translateZ(0);’ (* используется для сдвигания элемента по оси z на указанное значение).


Шаг 10: Стилевое оформление для заголовка

Мы просто увеличим размер нашего шрифта, выровняем текст по центру и установим в качестве значения свойства font-weight (* насыщенность шрифта) 300, чтобы текст выглядел изящнее.


Шаг 11: Стилевое оформление для подвала

Мы выровняем текст по центру горизонтально, добавим отступы сверху и снизу величиной 50px, установим в качестве значения цвета текста серый и разместим подвал под «рабочей» областью за счет ‘clear: both’.

Давайте теперь перейдем к навигационному меню.


Шаг 12: Стилевое оформление для навигационного меню

Мы начнем с удаления всех стилевых правил, применяемых по умолчанию, для нашего <ul>. Затем мы добавим отступы сверху и снизу величиной 50px и выровняем текст по центру.

Теперь за счет использования ‘display: inline’ мы сделаем так, чтобы наши элементы <li> располагались на одной линии. Мы установим в качестве курсора курсор-руку (* используется для сообщения пользователю, что под ним находится гиперссылка) и добавим отступ справа величиной 10px для каждого <li>. Цветом текста по умолчанию будет светло-серый, который меняется на черный при наведении курсора поверх него.

Также мы добавим некоторое время перехода для анимирования изменения цвета.

Поскольку последний элемент <li> является, м-м, последним дочерним элементом, для него не нужно устанавливать какой-либо отступ справа. Так что мы удалим его.

Теперь давайте добавим слэши после элементов <li>. Мы реализуем это за счет использования псевдо-селектора ‘:after’. За счет установления в качестве значения его свойства ‘content’ ‘/’, в качестве цвета светло-серый и соответствующего отступа слева мы можем создать простую и в то же время эффективную систему разделения ссылок. Также мы гарантируем, что цвет слешей не меняется при наведении курсора поверх них за счет явного указания значения по умолчанию их цвета при помощи селектора li:hover.

Опять-таки нам необходимо будет удалить слеш у последнего элемента <li>.

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


Шаг 13: Стилевое оформление для контрольных изображений

Для начала мы добавим отступы сверху и снизу величиной 20px для раздела с классом ‘.work’.

Далее мы добавим стилевое оформление для каждого ‘.work figure’ (т.е. для всех наших контрольных изображений). Мы будем использовать ‘float: left’ для того, чтобы их выстроить в ряд. Затем мы добавим отступ величиной 20px, установим в качестве значений высоты и ширины 200px и добавим незначительный эффект сепии (* светло-коричневый цвет) при помощи ‘-webkit-filter: sepia(0.4)’. Затем мы зададим в качестве position значение relative, благодаря чему сможем задать для других элементов (надписей в нашем случае), что располагаются в внутри элемента figure, абсолютное позиционирование. Затем мы добавим небольшую box-shadow (* тень), которая будет выступать также и в качестве нашей границы. Также мы добавим некоторое время перехода для увеличения и уменьшения масштаба наших элементов.

Мы гарантируем, что наше изображение всегда соответствует по размерам контрольному изображению за счет установления в качестве значений его ширины и высоты 100%.

На этом все с базовым стилевым оформлением для наших контролек. Теперь давайте приступим к надписям.


Шаг 14: Стилевое оформление для надписей

Список определений

Поскольку мы не хотим, чтобы наша надпись была видимой изначально, мы зададим в качестве значения свойства opacity 0. Затем мы установим для нее абсолютное позиционирование (внутри элемента figure) и сделаем так, чтобы она полностью заполняла figure, за счет установления в качестве значений всех 4-х свойств – top, right, bottom и left 0.

Затем мы зададим в качестве значения свойства line-height (* межстрочный интервал) 2.5 и добавим полупрозрачный фон темного цвета. Поскольку мы используем темный фон, то зададим в качестве значения цвета текста белый. Также мы добавим небольшое время перехода для анимирования прозрачности надписи при figure:hover.

Так как мы хотим, чтобы она появлялась при наведении курсора поверх контрольки, то устанавливаем в качестве значения прозрачности надписи 1 при figure:hover.

Термины

Для начала мы установим в качестве значения свойства font-family ‘PT Sans Narrow’. Для того чтобы термины были меньшего размера, чем их описания, мы установим в качестве значения их свойства font-size 80%. Затем мы меняем регистр наших терминов (Client и Role) на верхний при помощи ‘text-transform:uppercase’. Также мы установили отступ снизу отрицательной величины, чтобы избежать избыточного промежутка между терминами и их определениями.

Определения

Нам не нужно тут особо ничего делать – просто нужно задать в качестве значения свойства margin 0. (По умолчанию для <dd> задан небольшой отступ слева).


Шаг 15: Стилевое оформление для контрольных изображений с классами ‘current’/‘not-current

.current

При добавлении контрольным изображениям определенной категории класса .current (при помощи JS) нам необходимо, чтобы они увеличивались в размере и приобретали обратно свой обычный тон (т.е. удалить сепию). Мы увеличим их размер при помощи ‘transform: scale(1.05)’, благодаря чему их масштаб будет увеличиваться в 1.05 раза по сравнению с изначальным по осям x и y, и удалим добавленный ранее эффект сепии за счет использования ‘-webkit-filter: sepia(0)’.

.not-current

Здесь мы будем выполнять полностью противоположные тому, что делали с контрольными изображениями с классом .current – мы уменьшим их размер до 75% за счет ‘transform: scale(0.75)’ и сделаем контрольные изображения черно-белыми при помощи ‘-webkit-filter: grayscale(1)’.

.current-li

Мы просто зададим в качестве цвета текста элементов с классом ‘.current-li’ черный.


Шаг 16: Весь код CSS

Ниже приводится полный код CSS:

Давайте теперь возьмемся за JS.


Шаг 17: Алгоритм

Ниже перечисляется то, что мы будем выполнять при помощи кода JavaScript (в хронологическом порядке):

  1. отслеживать выбор nav > li;
  2. уменьшать размер всех контрольных изображений за счет добавления им класса .not-current ;
  3. добавлять класс .current-li к соответствующим выбранной категории элементам <li>;
  4. удалять класс .not-current только у контрольных изображений выбранной категории;
  5. добавлять класс .current ко всем контролькам выбранной категории;

шаг 2 будет выполнен при помощи функции scaleDown(), а 3, 4 и 5 – за счет функции show(category);


Шаг 18: Функция scaleDown()

Используя методы removeClass и addClass мы удалим класс .current у элементов, которые его имеют, и добавим ко всем ним класс .not-current . Также мы удалим класс .current-li у всех <li>, которые в данный момент его имеют.


Шаг 19: Функция show(category)

Эта функция будет выполняться каждый раз при выборе <li>. Для начала мы вызовем функцию scaleDown() для того, чтобы уменьшить размер всех контрольных изображений. Затем мы добавим класс .current-li к соответствующему  выбранной категории элементу <li>. После этого мы изменим класс контрольных изображений, принадлежащих к выбранной категории, с .not-current на .current (мы применили класс .not-current ко всем контрольным изображениям в функции scaleDown()). Наконец, если выбрана категория ‘all’, то мы удалим динамически добавленные классы (т.е. .current и .not-current) у всех контрольных изображений.

Обратите внимание: поскольку имя id (<li>) и класса (элементов figure) каждой категории одинаковы, то мы просто будем ссылаться на <li> при помощи ‘# + category’ и на элементы figure при помощи ‘. + category’.


Шаг 20: Определение выбранных элементов и выполнение функции show(category)

Наконец, при помощи метода document.ready мы добавим класс .current-li к li#all и определим выбранные элементы nav > li. Затем мы получим id выбранного <li> и выполним функцию show(category), где в качестве ‘category’ будет выступать ‘this.id’, то есть выбранный <li>. Таким образом, например, если выбран <li> в id #print, то будет выполнена функция show(‘print’).

На этом наш код JavaScript завершен.


Шаг 21: Полный код Javascript

Весь код Javascript выглядит следующим образом:

Теперь, когда наш сайт полноценно функционирует, давайте сделаем его дизайн адаптивным.


Шаг 22: Делаем дизайн адаптивным

Давайте откроем ‘media-queries.css’ и приступим. То, как вы решите реализовать ваши медиа-запросы, полностью зависит от вас. Возможно, вы предпочитаете размещать медиа-запросы в вашей главной таблице стилей, возможно вы даже предпочитаете размещать их модулями и на одной линии с объявлениями стилей – выбор за вами!

Изменения стилевого оформления, необходимые для каждой контрольной точки, описываются ниже.

965px или меньше

  • уменьшить ширину контейнера до 840px;
  • уменьшить высоту и ширину всех контрольных изображений до 170px, чтобы в каждом ряду располагалось 4 контрольных изображения [(170px + 40px) x 4 = 210px x 4 = 840px];

860px или меньше

  • уменьшить ширину контейнера до 720px;
  • увеличить высоту и ширину всех контрольных изображений обратно до 200px, чтобы в каждом ряду располагалось 3 контрольных изображения [(200px + 40px) x 3 = 240px x 3 = 720px];

740px или меньше

  • уменьшить ширину контейнера до 600px;
  • уменьшить прозрачность элементов с классом .not-current до 50% (поскольку мы здесь работаем, главным образом, с мобильными устройствами);
  • уменьшить высоту и ширину всех контрольных изображений до 160px, чтобы в каждом ряду располагалось 3 контрольных изображения [(160px + 40px) x 3 = 200px x 3 = 600px];

610px или меньше

  • уменьшить ширину контейнера до 460px;
  • задать для отступы сверху и снизу для контрольных изображений величиной 20px и отступы слева и справа величиной 60px;
  • увеличить высоту и ширину всех контрольных изображений обратно до 200px, чтобы в каждом ряду располагалось 1 контрольное изображение [(200px + 120px) x 1 = 320px x 1 = 320px];

480px или меньше

  • уменьшить ширину контейнера до 320px;
  • задать отступы сверху и снизу для контрольных изображений величиной 20px и отступы слева и справа величиной 60px;
  • увеличить высоту и ширину всех контрольных изображений обратно до 200px, чтобы в каждом ряду располагалось 1 контрольное изображение [(200px + 120px) x 1 = 320px x 1 = 320px];


Поддержка браузерами

Базовая возможность масштабирования (трансформации CSS) отлично работает в большинстве главных браузеров, среди которых:

  • IE 9+ (используйте http://www.useragentman.com/IETransformsTranslator/ для более ранних версий)
  • Firefox 14+
  • Chrome 21+
  • Safari 5.1+

Эффект фильтр (* визуальный эффект) (сепия и шкала уровней серого) функционирует только в браузерах, работающих на основе Webkit.


Фидлы jsFiddle (* онлайн редактор кода для тестирования JavaScript, HTML и CSS)

Мы подготовили три фидла js для вас, чтобы вы попробовали поэкспериментировать с:

  1. Caption Split Effect (Vertical) (* эффектом разделения надписи на части по вертикали)
  2. Caption Split Effect (Horizontal) (* эффектом разделения надписи на части по горизонтали)
  3. Diagonal Masked Thumbnail Images

Заключение

Вот и все! Мы успешно создали рабочее фильтрующееся портфолио с адаптивным дизайном. Надеюсь, вы с пользой провели время! Спасибо за проявленный интерес!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.