7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Complete Websites

Створюємо фільтрівне портфоліо з адаптивним веб-дизайном

Read Time: 15 mins

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Сьогодні ми будемо використовувати макет Портфоліо в форматі PSD (* PhotoShop Drawing/PhotoShop Document  – формат графічного файлу в Adobe Photoshop (розширення файлу), документ Photoshop. Тут і надалі примітка перекладача) з ThemeForest, верстаючи його тільки за допомогою HTML та CSS та роблячи його дизайн адаптивним. Потім ми підемо ще далі та додамо плаґін jQuery Isotope  для того, щоб зробити наш макет повнофункціональним фільтрівним портфоліо.


Крок 1: Задаємо організацію проекту

Ми почнемо зі створення простої структури проекту, щоб все було на своїх місцях. Ми створимо три папки:

  • css - для розташування файлів CSS
  • images - для розташування всіх зображень
  • js - для розташування плаґінів jQuery та наших власних скриптів


Крок 2: Документ

Перед тим як взятися за написання коду, ми створимо файл index.html, який можна розташувати кореневій папці вашого проекту. Ми додамо базовий шаблон HTML5, у заголовку якого підключимо файл CSS. Також нам потрібно буде підключити ще деякі файли:

  • jQuery Library – нам потрібна буде підключена бібліотека jQuery пізніше, коли будемо використовувати плаґін Isotope; ми же додамо її зараз. Я підключив бібліотеку, що розташовується на серверах Google (дуже рекомендую).
  • HTML5 Shiv – оскільки ми будемо використовувати елементи HTML5, то нам потрібно буде впевнитися, що ми підключили прокладку (* додає до старих браузерів підтримку можливостей, які вбудовано до сучасних браузерів) HTML5 Shiv, що дозволяє раннім версіям Internet Explorer розпізнавати теги HTML5.
  • Google Web Fonts – якщо ви поглянете на файл PSD, то помітите, що у ньому використовується шрифт PT Sans. Оскільки цей шрифт не буде доступний локально для багатьох користувачів, то ми підключимо його з сервісу Google Web Fonts.

Крок 3: Додаємо загальне стильове оформлення

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


Крок 4: Починаємо з додавання Шапки

Тепер ми приступаємо до створення структури сайту! Ми почнемо із заголовка та додамо його за допомогою елементу HTML5 header.

Далі ми додамо деякі стильові правила для нашого заголовка. Ми додамо тут деякі головні стилі, проте головне, на що вам варто звернути увагу, – позиціонування. Тут ми використовуємо фіксоване позиціонування та потім задаємо 0 у якості значення властивостей top, left та right. Завдяки цьому буде гарантовано, що наш заголовок розташовується поверх інших елементів вікна при прокручуванні та знаходиться вгорі вікна перегляду.


Крок 5: Логотип та емблема "Hire Me"

Для простоти обидва ці елементи будуть реалізовані завдяки використанню зображень, проте ми також обернемо ці зображення у теги а та додамо їм клас, щоб ми змогли встановити для цих елементів деякі стильові правила для їх позиціонування.

Для обох цих елементів використовується подібне стильове оформлення, для обох використовується абсолютне позиціонування (причому у якості батьківського елементу виступає елемент header), при якому в якості значення властивості top використовується 0. У якості значення left логотипа встановлено 0 для розміщення його зліва та для "Hire Me" у якості значення right встановлено 20px для невеликого зсуву його від лівого краю сторінки.

У результаті повинно вийти дещо на зразок наступного:



Крок 6: Бокова панель

Знову ми скористаємося можливостями розмітки HTML5 та створимо нашу бокову панель за допомогою елемента aside.

Серед коду CSS для бокової панелі ви помітите, що ми знову використали фіксоване позиціонування, проте формально це стильове правило тут не застосовується, оскільки бокова панель буде починатися зверху сторінки.


Крок 7: Фон бокової панелі!

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

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

Тепер ми маємо основу нашої бокової панелі!



Крок 8: Приступаємо до реалізації навігаційного меню

Тепер, коли бокова панель готова, ми можемо додати до неї навігаційне меню. Ми створимо невпорядкований список та обернемо його за допомогою елемента HTML5 nav.

Тепер додаємо деяке стильове оформлення для навігаційного меню, фон, стильові правила для шрифту та сімейство шрифту з Google Web Fonts – PT Sans.


Крок 9: Створюємо область з головним контентом

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

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


Крок 10: Додаємо проект портфоліо

Настав час взятися за проекти портфоліо. Вперед, створіть елемент div с класом portfolio всередині нашої головної області; за допомогою нього будуть об'єднані записи портфоліо. Запис нашого портфоліо реалізується за допомо figure (знав-таки елемента HTML5), що використовується для вказання того, що елемент є контейнером для якоїсь інформації.

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


Крок 11: Додаємо стильове оформлення для запису портфоліо

Стильове оформлення для проекту портфоліо не становить собою нічого особливого. Ми задамо вирівнювання для елемента за лівим краєм та встановимо відступ справа та знизу величиною 20px. Для додавання білої границі ми просто додамо деякі поля та потім фон, які будуть закруглено за допомогою властивості border-radius, значення якої складає 5px (при цьому враховуючи префікси для браузерів). Нарешті, до елемента буде додано тінь.

Оскільки ми застосовуємо відступ величиною 20px для правого боку записів, нам потрібно буде відняти це значення у відступу для правого боку батьківського контейнера (елемента div портфоліо).


Крок 12: Додаємо стрічку для запису портфоліо

Ми створили розмітку для стрічки, коли додавали запис портфоліо (хоча, знов-таки, ви могли би скористатися псевдо-елементами); тепер же нам потрібно додати для неї стильове оформлення.


Крок 13: Додаємо стильове оформлення, що змінюється при наведенні курсору поверх запису портфоліо

Останнє, що нам тепер потрібно виконати для нашого портфоліо, – додати стильове оформлення, що застосовується при наведенні курсору поверх запису портфоліо. Це буде виконано за допомогою вже створеного нами рядкового елемента; все, що тепер потрібно, – додати для нього стильове оформлення. Ми будемо використовувати зображення та фон чорного кольору, у якості значення компонента кольору альфа (* кольору, використовуваний для контролю змішування кольорів з фоном або підлеглим об'єктом. У цьому разі його значення, що дорівнює 1,0, означає цілковиту непрозорість, а 0,0 - цілковиту прозорість) якого задано 70%. Також ми додали деякі переходи CSS3, щоб стилі, використовувані при наведенні курсору поверх елемента, застосовувалися плавно. Останнє, що потрібно виконати, – додати opacity:1; на той випадок, коли курсор розташовується поверх запису портфоліо, завдяки чому поступово проявиться елемент із застосовуваним при цьому оформленням.

Тепер запис нашого портфоліо готовий, ви запросто можете додавати свої власні зображення та змінювати їх!



Крок 14: Робимо дизайн портфоліо адаптивним

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

Перед тим як взятися за редагування макета нам потрібно виконати два моменти. Для початку потрібно буде додати мета-тег viewport, завдяки чому наш веб-сайт буде коректно відображуватися на мобільних пристроях та планшетах; якщо ви хочете дізнатися більше про це, то обов'язково ознайомтеся з цією статтею, написаною Ian Yates. Потім потрібно додати трохи коду CSS, щоб наші зображення стали чутливими.


Крок 15: Задаємо стильове оформлення для планшетів з портретною орієнтацією екрана

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


Крок 16: Задаємо стильове оформлення для планшетів з альбомною орієнтацією екрана

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


Крок 17: Додаємо стильове оформлення для мобільних пристроїв із портретною орієнтацією екрана

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

Також через великий розмір заголовка, під яким розташовується бокова панель/навігаційне меню, ви не зможете побачити ту саму кількість проектів, як і раніше. Ми видалимо властивість position: fixed та замість неї застосуємо absolute, завдяки чому заголовок тепер буде прокручуватися, а не залишатися наверху сторінки.


Крок 18: Вирішуємо деякі проблеми з позиціонуванням

Що ж, тепер у нас з'явилися деякі проблеми. Бокова панель підлагодилася чудово під розмір екрана, проте проекти портфоліо розташовуються некоректно. Нам потрібно буде повернутися до макету та додати два додаткові елементи div, один з id (* identifier – ідентифікатор) wrapper, що оберне всі елементи, за виключенням заголовка, та інший з класом page, який оберне область з головним контентом.

Після додавання потрібної розмітки нам потрібно буде додати деяке стильове оформлення. Прокрутіть доверху код CSS-файлу та додайте наступний:


Крок 19: Додаємо стильове оформлення для мобільних пристроїв із альбомною орієнтацією екрана

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



Крок 20: Знайомимося з Isotope

Тепер, коли ми розглянули створення дизайну, то можемо перейти до додавання деякого функціоналу! Ми будемо використовувати надзвичайний плаґін Isotope, розроблений David DeSandro. Isotope використовується для додавання макетів, можливості фільтрації та сортування. Він часто використовується у портфоліо для фільтрації робіт за різними категоріями, наприклад Веб-дизайн, Фотографія, Ілюстрації. А тепер давайте почнемо!

Перед тим як додати плаґін до нашого документа нам потрібно завантажити його. Перейдіть за http://isotope.metafizzy.co/jquery.isotope.min.js. Тепер ви побачите JavaScript-файл Isotope; просто виберіть File > Save та збережіть його у папці js, яку створили напочатку. Далі нам потрібно буде підключити скрипт у нашому HTML-файлі.


Крок 21: Фільтрація

Для того щоб додати для записів нашого портфоліо можливість фільтрації, нам потрібно знову змінити нашу розмітку. Ми почнемо з навігаційного меню, яке будемо використовувати для фільтрації. Isotope використовуються власні атрибути HTML5 Data, а саме data-filter="". Ми встановлюємо значення залежно від категорії; наприклад для категорії Web Design використовується .web (зверніть увагу, що нам потрібно додати крапку перед значенням категорії). Тим не менше в якірному елементів для категорії All використовується не .all, а зірочка.


Крок 22: Додаємо можливість фільтрації записів

Останнє, що потрібно виконати для додання можливості фільтрації, – відредагувати записи портфоліо. Після додання значень атрибутів data-filter вам потрібно буде додати відповідні значення для кожного запису. Якщо робота належить до категорії Video, то вам потрібно буде додати клас video. Обов'язково зверніть увагу на те, що якщо значення атрибута data-filter вказано у нижньому регістрі, то ви повинні використовувати нижній регістр і при зазначенні класів записів.


Крок 23: Активуємо плаґін

Настав час активувати Isotope, що ми зробимо у два етапи. Для початку нам потрібно активувати частину, за допомогою якої буде відбуватися фільтрація записів нашого портфоліо. Почніть зі створення нового файлу під назвою "custom.js" та додайте його до нашої папки js.


Крок 24: Додаємо обробник події Click

На другому етапі ми активуємо навігаційне меню, щоб фільтрація стала можливою.


Крок 25: Додаємо стильове оформлення для пунктів меню, що знаходиться в активному стані

У PSD показано стильове оформлення для поточного вибраного якірного елемента навігаційного меню, що знаходиться в активному стані. Нам буде потрібно додати деяку додаткову розмітку, деякий код CSS і, нарешті, деякий додатковий код jQuery. Для початку перейдіть до вашого HTML-файлу та додайте class="selected" до першого якірного елемента.

Далі вам потрібно буде додати деякий додатковий код CSS, так що додайте наступний код одразу після стилів для навігаційного меню.

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


Крок 26: Ми щось забули, чи не так?

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


Завершення

От і все, підійшло до кінця ще один посібник! Ви сміло можете використовувати описаний тут підхід у будь-яких ваших роботах. Вперед, поекспериментуйте з ним!


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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.