Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Створюємо фільтрівне портфоліо з адаптивним дизайном завдяки можливостям CSS

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) 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 рази у порівнянні з початковим по осям х та у, і видалимо доданий раніше ефект сепії завдяки використанню ‘-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.