- PVSM.RU - https://www.pvsm.ru -
Создаём современное портфолио с фильтрацией используя CSS3 и HTML5. Сделано в Envato.
Мы будем использовать такую структуру файлов. Для начала скачайте HTML5 Shiv [3] и подключите в вашем index.html
Давайте начнём с того что составим заголовок(head) нашего index.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 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/main.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
Итог:
<!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>
Тело будет состоять из:
<header>
<nav>
<section>
будет содержать превью наших работ<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>© 2012 John Doe. Valid HTML5.</footer>
</body>
Мы будем использовать тэг <figure>
для превью и добавим класс который будет пояснять в какой категории наше превью. Тэг <a>
ссылка на работу, <dl>
лист(список) описания, будет содержать название работы или другую информацию, на ваше усмотрение.
<figure class="illustration">
<a href="#">
<img src="images/1.png" alt="" />
<dl>
</dl>
</a>
</figure>
Подробнее про тэг <dl>
. Он включает в себя тэг <dt>
это заголовок, а тэг <dd>
это описание.
<figure class="illustration">
<a href="#">
<img src="images/1.png" alt="" />
<dl>
<dt>Клиент</dt>
<dd>Envato</dd>
<dt>Раздел</dt>
<dd>Иллюстрации</dd>
</dl>
</a>
</figure>
На этом этапе закончим с HTML разметкой
Весь 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>© 2012 John Doe. Valid HTML5.</footer>
</div>
</body>
</html>
@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 Fonts — Open Sans и PT Sans Narrow.
Для выделения мы сделали тёмно серый цвет и белые буквы.
Установили ширину полосы прокрутки в 9px для браузеров на движке -webkit.
Цвет «бегунка» будет #eee + тень
Цвет фона полосы прокрутки будет #999 + линии по бокам
body {
font-family: 'Open Sans', sans-serif;
background: url('../images/bg.gif');
padding: 0;
margin: 0;
border-top: 10px solid #9d2e2c;
}
.container {
width: 960px;
margin: 10px auto;
-webkit-transform: translateZ(0);
}
header {
text-align: center;
font-weight: 300;
font-size: 700%;
}
footer {
text-align: center;
height: 100px;
line-height: 100px;
color: gray;
clear: both;
}
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;
}
nav ul li:last-child {
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: '';
}
nav ul li:last-child селектор последнего элемента в меню
Теперь вставляем косые черты при помощи селектора nav ul li:after
.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
.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;
}
/* Для текущего пункта навигации */
.current-li {
color: #000;
}
Будем использовать JavaScript
Алгоритм:
<li>
.Для пунктов #2 используем scaleDown() функцию, а для #3, #4, и #5 будем использовать show(category) функцию.
Функция ScaleDown:
function scaleDown() {
$('.work > figure').removeClass('current').addClass('not-current');
$('nav > ul > li').removeClass('current-li');
}
Функция show(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');
}
}
Отлавливаем клик по навигации:
$(document).ready(function(){
$('#all').addClass('current-li');
$("nav > ul > li").click(function(){
show(this.id);
});
});
/* Small viewports — Old monitors, netbooks, tablets (landscape), etc. */
@media only screen and (max-width: 965px) {
.container {
width: 840px;
}
.work figure {
width: 170px;
height: 170px;
}
}
/* Smaller viewports — more tablets, old monitors */
@media only screen and (max-width: 860px) {
.container {
width: 720px;
}
.work figure {
width: 200px;
height: 200px;
}
}
/* 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;
}
}
/* 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;
}
}
/* Mobile phones (Portrait) */
@media only screen and (max-width: 480px) {
.container {
width: 320px;
}
.work figure {
width: 200px;
height: 200px;
margin: 20px 60px;
}
}
Совместимость с браузерами:
Автор подготовил для вас три разных эффекта при наведении на превью
Это отличный вариант для представления ваших работ, с таким портфолио ваш сайт не покажется таким уж и простым. Не ленитесь прикрутите себе такой!
P.S. От переводчика, очень не хватает тэга для сворачивания/разворачивания большого кода.
Автор: Mike_Bazhenov
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css3/19189
Ссылки в тексте:
[1] Результат: http://webdesigntutsplus.s3.amazonaws.com/tuts/394_portfolio/demo-files/index.html
[2] Исходники: http://enva.to/RBJ0K3
[3] HTML5 Shiv: http://code.google.com/p/html5shiv/
[4] www.useragentman.com/IETransformsTranslator/: http://www.useragentman.com/IETransformsTranslator/
[5] Caption Split Effect (Vertical): http://jsfiddle.net/akshatsrivastava/a69xm/
[6] Caption Split Effect (Horizontal): http://jsfiddle.net/akshatsrivastava/246dJ/
[7] Diagonal Masked Thumbnail Images: http://jsfiddle.net/akshatsrivastava/rs8hr/
[8] Источник: http://habrahabr.ru/post/157563/
Нажмите здесь для печати.