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

() translation by (you can also view the original English article)

Завдяки властивій фільтрівним портфоліо (на зразок Tuts+ hub) візуальній привабливості вони стали дуже популярними. Сьогодні ми будемо створювати одне з таких за допомогою простої розмітки, коду CSS та невеликої кількості коду jQuery.

Крок 1: Файлова структура

Ми організуємо файли проекту наступним чином:

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

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

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

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

І ось, що у нас виходить:

<!doctype html>
<html lang="en">
  <head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>John Doe's Portfolio</title>
		<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
		<link rel="stylesheet" href="css/style.css" media="screen">
		<link rel="stylesheet" href="css/media-queries.css" media="screen">
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/js.js"></script>
		<!--[if lt IE 9]>
			<script src="js/html5shiv.js"></script>
		<![endif]-->
	</head>

Крок 3: Базова розмітка HTML-документа

У тілі документа ми спершу додаємо «контейнер» для розміщення всіх наших елементів у межах елемента зі встановленою шириною, вирівняний по центру сторінки. Усередині того елемента ми додаємо (підготуйтеся до того, щоб настрочити ще один список):

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

<body>
	<div class="container">
		<header>
			<h1 class="title">
				John Doe
			</h1>
		</header>
		<nav>
			<ul>
				<li id="all">All</li>
				<li id="web">Web</li>
				<li id="print">Print</li>
				<li id="illustration">Illustration</li>
				<li id="logo">Logo</li>
			</ul>

		</nav>
		<section class="work">
		</section>
		<footer>&copy; 2012 John Doe. Valid HTML5.</footer>
</body>

Крок 4: Ілюстрація та зображення

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

<figure class="illustration">
	<a href="#">
		<img src="images/1.png" alt="" />
		<dl>
		</dl>
	</a>	
</figure>

Крок 5: HTML-надпис (DL, DT, DD)

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

<figure class="illustration">
	<a href="#">
		<img src="images/1.png" alt="" />
		<dl>
			<dt>Client</dt>
				<dd>Envato</dd>
			<dt>Role</dt>
				<dd>Illustration</dd>	
		</dl>
	</a>	
</figure>

Крок 6: Повний код HTML

Нижче наведено весь код нашої розмітки:

<!doctype html>

<html lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>John Doe's Portfolio</title>
		<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
		<link rel="stylesheet" href="css/style.css" media="screen">
		<link rel="stylesheet" href="css/media-queries.css" media="screen">
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="js/js.js"></script>
		<!--[if lt IE 9]>
			<script src="js/html5shiv.js"></script>
		<![endif]-->

	</head>

	<body>

		<div class="container">

			<header>

				<h1 class="title">
					John Doe
				</h1>

			</header>

			<nav>

				<ul>
					<li id="all">All</li>
					<li id="web">Web</li>
					<li id="print">Print</li>
					<li id="illustration">Illustration</li>
					<li id="logo">Logo</li>
				</ul>

			</nav>

			<section class="work">

				<figure class="illustration">
					<a href="#">
						<img src="images/1.png" alt="" />

						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Illustration</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="print">
					<a href="#">
						<img src="images/2.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Print</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="logo">
					<a href="#">
						<img src="images/3.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Logo</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="web">
					<a href="#">
						<img src="images/4.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Web</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="print">
					<a href="#">
						<img src="images/5.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Print</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="web">
					<a href="#">
						<img src="images/6.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Web</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="print">
					<a href="#">
						<img src="images/7.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Print</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="web">
					<a href="#">
						<img src="images/8.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Web</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="illustration">
					<a href="#">
						<img src="images/9.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Illustration</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="print">
					<a href="#">
						<img src="images/10.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Print</dd>	
						</dl>
					</a>	
				</figure>		

				<figure class="web">
					<a href="#">
						<img src="images/11.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Web</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="logo">
					<a href="#">
						<img src="images/12.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Logo</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="illustration">
					<a href="#">
						<img src="images/13.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Illustration</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="web">
					<a href="#">
						<img src="images/14.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Web</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="logo">
					<a href="#">
						<img src="images/15.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Logo</dd>	
						</dl>
					</a>	
				</figure>	

				<figure class="print">
					<a href="#">
						<img src="images/16.png" alt="" />
						<dl>
							<dt>Client</dt>
								<dd>Envato</dd>
							<dt>Role</dt>
								<dd>Print</dd>	
						</dl>
					</a>	
				</figure>	

			</section>
			
			<footer>&copy; 2012 John Doe. Valid HTML5.</footer>
		
		</div>
	
	</body>

</html>

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

Крок 7: Стильове оформлення для тексту, який виділяється користувачем, та лінійки прокручування

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

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);

::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 {
	background:#999;
	border: thin solid gray;
}

У коді вище ми імпортували два веб-шрифти з Google: Open Sans та PT Sans Narrow. Потім ми просто встановили темно-сірий фон та білий колір для тексту, який виділяється користувачем.

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

Зверніть увагу: за детальною інформацією про webkit-scrollbars звертайтеся до посту Chris Coyier.

Крок 8: Стильове оформлення для тіла

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

Трохи пошумимо...

body {
	font-family: 'Open Sans', sans-serif;
	background: url('../images/bg.gif');
	padding: 0;
	margin: 0;
	border-top: 10px solid #9d2e2c;
}

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

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

.container {
	width: 960px;
	margin: 10px auto;
	-webkit-transform: translateZ(0);
}

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

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

header {
	text-align: center;
	font-weight: 300;
	font-size: 700%;
}

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

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

footer {
	text-align: center;
	height: 100px;
	line-height: 100px;
	color: gray;
	clear: both;
}

Давайте тепер перейдемо до навігаційного меню.

Крок 12: Стильове оформлення для навігаційного меню

Ми почнемо з видалення всіх стильових правил, застосовуваних за налаштуванням, для нашого <ul>. Потім ми додамо відступи зверху та знизу величиною 50px та вирівняємо текст по центру.

nav ul {
	list-style: none;
	padding: 0;
	margin: 50px 0;
	text-align: center;
}

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

Також ми додамо деякий час переходу для анімування зміни кольору.

nav ul li {
	display: inline;
	cursor: pointer;
	margin-right: 10px;
	color: #666;
	
	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;
}

Оскільки останній елемент <li> є, м-м, останнім дочірнім елементом, для нього не потрібно встановлювати будь-який відступ справа. Так що ми видалимо його.

1	nav ul li:last-child {
2	margin-right: 0;
3	}

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

nav ul li:after {
	margin-left: 10px;
	content: '/';
	color: #bbb;
}

nav ul li:hover:after {
	color: #bbb;
}

Знов-таки нам буде потрібно видалити слеш в останнього елемента <li>.

1	nav ul li:last-child:after {
2	content: '';
3	}

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

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

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

1	.work {
2	margin: 20px 0;
3	}

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

.work figure {
	float: left;
	margin: 20px;
	width: 200px;
	height: 200px;
	background: #9d2e2c;
	line-height: 200px;
	-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;
}

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

1	.work figure a img {
2	height: 100%;
3	width: 100%;
4	}

Тепер ми завершили базове стильове оформлення для наших контрольних зображень. Давайте візьмемося за надписи.

Крок 14: Стильове оформлення для надписів

Список визначень

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

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

.work figure dl {
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	padding: 20px;
	margin: 0;
	line-height: 2.5; 
	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;
}

Оскільки ми хочемо, щоб він з'являвся при наведенні курсору поверх контрольного зображення, то встановлюємо у якості значення прозорості надпису 1 при figure:hover.

1	.work figure:hover dl {
2	opacity: 1;
3	}

Терміни

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

.work figure dl dt {
	text-transform: uppercase;
	font-family: 'PT Sans Narrow';
	font-size: 12px;
	margin-bottom: -16px;
}

Визначення

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

1	.work figure dl dd {
2	margin-left: 0;
3	}

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

`.current`

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

.current {
	-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);

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

`.not-current`

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

.not-current {
	-webkit-transform: scale(0.75);	
	-moz-transform: scale(0.75);
	-o-transform: scale(0.75);
	-ms-transform: scale(0.75);
	transform: scale(0.75);

	-webkit-filter: grayscale(1) !important;
}

`.current-li`

Ми просто задамо у якості значення кольору тексту елементів з класом ‘.current-li’ чорний.

1	.current-li {
2	color: #000;
3	}

Крок 16: Весь код CSS

Нижче наведено повний код CSS:

/* Style */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);

::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 {
	background:#999;
	border: thin solid gray;
}

/* --------------------------
	Body
----------------------------- */

body {
	font-family: 'Open Sans', sans-serif;
	background: url('../images/bg.gif');
	padding: 0;
	margin: 0;
	border-top: 10px solid #9d2e2c;
}

/* --------------------------
	Container
----------------------------- */

.container {
	width: 960px;
	margin: 10px auto;
	-webkit-transform: translateZ(0);
}

a {
	text-decoration: none;
}

/* --------------------------
	Header
----------------------------- */

header {
	text-align: center;
	font-weight: 300;
	font-size: 700%;
}

/* --------------------------
	Footer
----------------------------- */

footer {
	text-align: center;
	height: 100px;
	line-height: 100px;
	color: gray;
	clear: both;
}

/* --------------------------
	Navigation
----------------------------- */

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;

	transition: 0.3s;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
}

nav ul li:last-child {
	margin-right: 0;
}

nav ul li:hover {
	color: #000;
}

nav ul li:hover:after {
	color: #bbb;
}

nav ul li:after {
	margin-left: 10px;
	content: '/';
	color: #bbb;
}

nav ul li:last-child:after {
	content: '';
}

/* --------------------------
	Main Image Box
----------------------------- */

.work {
	margin: 20px 0;
}

.work figure {
	float: left;
	margin: 20px;
	width: 200px;
	height: 200px;
	background: #9d2e2c;
	line-height: 200px;
	-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 {
	height: 100%;
	width: 100%;
}

.work figure dl {
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	padding: 20px;
	margin: 0;
	line-height: 2.5; 
	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;
	font-family: 'PT Sans Narrow';
	font-size: 12px;
	margin-bottom: -16px;
}

.work figure dl dd {
	margin-left: 0;
}

.current-li {
	color: #000;
}

.current {
	-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);

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.not-current {
	-webkit-transform: scale(0.75);	
	-moz-transform: scale(0.75);
	-o-transform: scale(0.75);
	-ms-transform: scale(0.75);
	transform: scale(0.75);

	-webkit-filter: grayscale(1) !important;
}

.not-current:hover dl {
	opacity: 0 !important;
}

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

Крок 17: Алгоритм

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

відстежувати вибір nav > li;
зменшувати розмір всіх контрольних зображень завдяки додаванню їм класу .not-current ;
додавати клас .current-li до елементів <li>, що відповідають вибраній категорії;
видаляти клас .not-current тільки у контрольних зображень вибраної категорії;
додавати клас .current до всіх контрольних зображень вибраної категорії;

крок 2 буде виконано за допомогою функції scaleDown(), а 3, 4 та 5 – за допомогою функції show(category);

Крок 18: Функція `scaleDown()`

Використовуючи методи removeClass та addClass ми видалимо клас .current у елементів, які його мають, та додамо до них всіх клас .not-current . Також ми видалимо клас .current-li у всіх елементів <li>, які у цей момент його мають.

function scaleDown() {

	$('.work > figure').removeClass('current').addClass('not-current');
	$('nav > ul > li').removeClass('current-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’.

function show(category) {

	scaleDown();

	$('#' + category).addClass('current-li');
	$('.' + category).removeClass('not-current');
	$('.' + category).addClass('current');

	if (category == "all") {
		$('nav > ul > li').removeClass('current-li');
		$('#all').addClass('current-li');
		$('.work > figure').removeClass('current, not-current');
	}

}

Крок 20: Визначення вибраних елементів та виконання функції `show(category)`

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

$(document).ready(function(){

	$('#all').addClass('current-li');

	$("nav > ul > li").click(function(){
		show(this.id);
	});

});

На цьому наш код JavaScript завершено.

Крок 21: Повний код Javascript

Весь код JavaScript виглядає наступним чином:

function scaleDown() {

	$('.work > figure').removeClass('current').addClass('not-current');
	$('nav > ul > li').removeClass('current-li');

}

function show(category) {

	scaleDown();

	$('#' + category).addClass('current-li');
	$('.' + category).removeClass('not-current');
	$('.' + category).addClass('current');

	if (category == "all") {
		$('nav > ul > li').removeClass('current-li');
		$('#all').addClass('current-li');
		$('.work > figure').removeClass('current, not-current');
	}

}

$(document).ready(function(){

	$('#all').addClass('current-li');

	$("nav > ul > li").click(function(){
		show(this.id);
	});

});

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

Крок 22: Робимо дизайн адаптивним

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

Зміни стильового оформлення, потрібні для кожної контрольної точки, описуються нижче.

965px або менше

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

/* Small viewports — Old monitors, netbooks, tablets (landscape), etc. */

@media only screen and (max-width: 965px) {
	.container {
		width: 840px;
	}
	.work figure {
		width: 170px;
		height: 170px;
	}
}

860px або менше

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

/* Smaller viewports — more tablets, old monitors */

@media only screen and (max-width: 860px) {
	.container {
		width: 720px;
	}
	.work figure {
		width: 200px;
		height: 200px;
	}
}

740px або менше

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

/* Even smaller viewports — more tablets, etc. */

@media only screen and (max-width: 740px) {
	.container {
		width: 600px;
	}
	.work figure {
		width: 160px;
		height: 160px;
	}
	.not-current {
		opacity: 0.5;
	}
}

610px або менше

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

/* Mobile phones (Landscape) and Tablets (Portrait) */

@media only screen and (max-width: 610px) {
	.container {
		width: 460px;
	}
	header {
		font-size: 400%;
	}
	nav ul li {
	}
	.work figure {
		margin-left: 40px;
		margin-bottom: 60px;
	}
	.work figure dl {
		height: 40px;
		top: 200px;
		bottom: 0px;
	}
}

480px або менше

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

/* Mobile phones (Portrait) */

@media only screen and (max-width: 480px) {
	.container {
		width: 320px;
	}

	.work figure {
		width: 200px;
		height: 200px;
		margin: 20px 60px;
	}
}

Підтримка браузерами

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

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

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

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

Ми підготували три фідли js для вас, щоб ви спробували поекспериментувати з:

Завершення

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