Красивое портфолио на HTML5 и CSS3

12-10-21 root Css, Html 0

В этом уроке мы сделаем красивое HTML5 портфолио, с помощью jQuery плагина Quicksand plugin.

HTML

Перед тем как приступить к html разметке, необходимо подключить наш css в теге head, jQuery и Quicksand plugin мы подключим перед тегом закрытия body.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Making a Beautiful HTML5 Portfolio</title>

        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <header>
            <h1>My Portfolio</h1>
        </header>

        <nav id="filter">
            <!-- Здесь будет меню, сгенерированное jQuery -->
        </nav>

        <section id="container">
        	<ul id="stage">
                <!-- Элементы портфолио будут здесь -->
            </ul>
        </section>

        <footer>
        </footer>

        <!-- Подключаем jQuery, плагин Quicksand и script.js -->

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="assets/js/jquery.quicksand.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

В нащей разметке мы использовали несколько новых HTML5 элементов. header — содержит заголовок страницы, section — неупорядоченный список работ нашего портфолио, в элементе nav будет располагаться меню.

Список #stage содержит все работы. Рассмотрим как будут выглядеть эти элементы. Каждый будет иметь HTML5 атрибут data, который определяет теги по которым jQuery будет фильтровать работы.

<li data-tags="Print Design">
    <img src="assets/img/shots/1.jpg" />
</li>

<li data-tags="Logo Design,Print Design">
    <img src="assets/img/shots/2.jpg" />
</li>

<li data-tags="Web Design,Logo Design">
    <img src="assets/img/shots/3.jpg" />
</li>

Вы можете поместить в элементы li что вам будет необходимо.

jQuery

Quicksand plugin сравнивает два ul списка, находит в них одинаковые элементы и перемещает на новую позицию. Наш jQuery скрипт пройдется по всем работам портфолио и создаст новый (спрятанный) список.

$(document).ready(function(){

    var items = $('#stage li'),
        itemsByTags = {};

    // пробегаем по всем работам:

    items.each(function(i){
        var elem = $(this),
            tags = elem.data('tags').split(',');

        // добавляем data-id атрибут, необходимо для плагина:
        elem.attr('data-id',i);

        $.each(tags,function(key,value){

            // удаляем ненужные пробелы:
            value = $.trim(value);

            if(!(value in itemsByTags)){
                itemsByTags[value] = [];
            }

            itemsByTags[value].push(elem);
        });

    });

Каждый тег добавлен в объект itemsByTags как массив. Это значит, что itemsByTags[‘Web Design’] будет содержать элементы с тегом Web Design. Мы будем использовать этот объект для создания скрытого списка. Напишем функцию, которая будет это делать:

function createList(text,items){

    // Создаем пустой список:
    var ul = $('<ul>',{'class':'hidden'});

    $.each(items,function(){
        // Создаем копию каждого элемента
        // и добавляем в список:

        $(this).clone().appendTo(ul);
    });

    ul.appendTo('#container');

    // Создам меню. Список добавляется как
    // параметр data (доступен через .data('list')):

    var a = $('<a>',{
        html: text,
        href:'#',
        data: {list:ul}
    }).appendTo('#filter');
}

Данная функция принимает название группы и массив элементов li, затем копирует их в новый список и добавляет ссылку в наше меню.

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

// создаем элемент "Everything" в меню:
createList('Everything',items);

// пробегаем по массивам в itemsByTags:
$.each(itemsByTags,function(k,v){
    createList(k,v);
});

$('#filter a').live('click',function(e){
    var link = $(this);

    link.addClass('active').siblings().removeClass('active');

    // анимируем li элементы с помощью Quicksand plugin:

    $('#stage').quicksand(link.data('list').find('li'));
    e.preventDefault();
});

// устанавливаем первый пункт меню по-умолчанию:
$('#filter a:first').click();

CSS

#filter {
    background: url("../img/bar.png") repeat-x 0 -94px;
    display: block;
    height: 39px;
    margin: 55px auto;
    position: relative;
    width: 600px;
    text-align:center;

    -moz-box-shadow:0 4px 4px #000;
    -webkit-box-shadow:0 4px 4px #000;
    box-shadow:0 4px 4px #000;
}

#filter:before, #filter:after {
    background: url("../img/bar.png") no-repeat;
    height: 43px;
    position: absolute;
    top: 0;
    width: 78px;
    content: '';

    -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
    -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
    box-shadow:0 2px 0 rgba(0,0,0,0.4);
}

#filter:before {
    background-position: 0 -47px;
    left: -78px;
}

#filter:after {
    background-position: 0 0;
    right: -78px;
}

#filter a{
    color: #FFFFFF;
    display: inline-block;
    height: 39px;
    line-height: 37px;
    padding: 0 15px;
    text-shadow:1px 1px 1px #315218;
}

#filter a:hover{
    text-decoration:none;
}

#filter a.active{
    background: url("../img/bar.png") repeat-x 0 -138px;
    box-shadow:	1px 0 0 rgba(255, 255, 255, 0.2),
                -1px 0 0 rgba(255, 255, 255, 0.2),
                1px 0 1px rgba(0,0,0,0.2) inset,
                -1px 0 1px rgba(0,0,0,0.2) inset;
}

Вы можете использовать данный шаблон для представления ваших работ. Преимущество заключается в простоте использования — вам необходимо просто изменить содержание элементов li. Также, если JavaScript отключен все работы будут видны.