Автор

Стильное портфолио на HTML5

Стильное портфолио на HTML5


 

В наше время технологии для веб-мастеров быстро развиваются, предоставляя нам новые и все интересные возможности разработки новых креативных идей с помощью технологий  HTML 5,  jQuery и плагина Quicksand. Данное портфолио отлично выглядит и будет работать даже если у посетителя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта. Данное портфолио мозно с легкостью отредактировать под свое усмотрение и добавить в него необходимые элементы..

 

ДЕМО
ИСХОДНИКИ

 

Для начала нам необходимо создать разметку нового документа HTML5. В разделе заголовка включим стиль страницы. Библиотека jQuery, плагин Quicksand и наш файл script.js будут включены перед закрывающимся тегом body:

Как создать стильное портфолио на HTML5
        <!-- Наш файл CSS -->
        
         <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
<header>

<h1>Мое портфолио</h1>
</header>

<nav id="filter"> <!-- Пункты меню будут располагаться здесь. Они генерируются кодом jQuery --> </nav> 

<section id="container">
 </section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.quicksand.js"></script><script type="text/javascript" src="assets/js/script.js"></script>

 

Элемент HTML5 header содержит наш заголовок h1 (который оформлен как логотип). Элементsection содержит неупорядоченный список пунктов портфолио другие списки добавляются кодом jQuery)/ Элемент nav, оформленный как зеленая полоса, действует как фильтр содержания.

Неупорядоченный список #stage содержит пункты нашего портфолио. Каждый пункт имеет атрибут data, который определяет серию разделенных запятой меток. Позже, в коде jQuery, мы проходим циклом список, записываем метки и создаем категории, которые могут быть выбраны на зеленой полоске меню.

<ul>
	<li data-tags="Типографика"><img src="assets/img/shots/1.jpg" alt="Иллюстрация" /></li>
	<li data-tags="Логотипы,Типографика"><img src="assets/img/shots/2.jpg" alt="Иллюстрация" /></li>
	<li data-tags="Веб дизайн,Логотипы"><img src="assets/img/shots/3.jpg" alt="Иллюстрация" /></li>
</ul>

 

Плагин Quicksand сравнивает два неупорядоченных списка, находит одинаковые элементы liв них, и анимирует процесс расстановки. Скрипт jQuery, который разбирается в данной части урока, проходит циклом по пунктам портфолио в списке #stage и создает новые (скрытые) неупорядоченные списки для каждой найденной метки. Данные списки затем будут использоваться для работы плагина Quicksand.

$(document).ready(function(){

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

	// Цикл по всем элементам li:

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

		// Добавляем атрибут data-id. Требуется плагином Quicksand:
		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['Веб дизайн'] будет содержать массив всех пунктов, которые имеют метку 'Веб дизайн'. Мы используем данный объект для создания скрытого нецпорядоченного списка на странице для плагина Quicksand.

function createList(text,items){

	// Вспомогательная функция, которая получает текст кнопки меню и
	// массив пунктов li

	// Создаем пустой неупорядоченный список
var ul = $('</pre>
<ul>
<ul>',{'class':'hidden'});</ul>
</ul>
<ul>
<ul>$.each(items,function(){</ul>
</ul>
&nbsp;
<ul>
<ul>// Создаем копию каждого пункта li</ul>
</ul>
&nbsp;
<ul>
<ul>// и добавляем ее в список:</ul>
</ul>
<ul>
<ul>$(this).clone().appendTo(ul);</ul>
</ul>
&nbsp;
<ul>
<ul>});</ul>
</ul>
<ul>
<ul>ul.appendTo('#container');</ul>
</ul>
<ul>
<ul>// Создаем пункт меню. Неупорядоченный список добавляется</ul>
</ul>
&nbsp;
<ul>
<ul>// как параметр data (доступен через .data('list'):</ul>
</ul>
<ul>
<ul>var a = $('</ul>
</ul>
<a>',{
 html: text,
 href:'#',
 data: {list:ul}
 }).appendTo('#filter');
}

 

Данная функция получает имя группы и массив с пунктами li как параметры. Затем она клонирует данные пункты в новый список  ul и добавляет ссылку на зеленую полоску. Теперь мы проходим циклом по всем группам и вызываем вспомогательную функцию, также добавляем обработку события click для пунктов меню.

// Создаем опцию "Все" в меню:
createList('Все',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');

	// Используем плагин Quicksandдля анимации пунктов li.
	// Он использует data('list'), определённую нашей функцией createList:

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

$('#filter a:first').click();

 

Самая интересная часть стилей CSS - зеленая плоска #filter. Для нее используются  псевдо-элементы :before / :after, чтобы создать привлекательные уголки по сторона полоски. Так как они позиционируются абсолютно, то при изменении размеров полоски они выведутся там, где надо.

#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;

 

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеHTML5

Стильное портфолио на HTML5

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


Стильное портфолио на HTML5

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


Стильное портфолио на HTML5

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


Стильное портфолио на HTML5

В данном уроке мы рассмотрим процесс создания весьма интересного концепта меню, мы создадим его вертикальным еще и минималистическим. Данная навигация будет содержать подпункты, то есть мы создадим иерархию выпадающих вкладок для навигации. Кроме этого будет установлена анимация при выборе пункта и добавлены иконки, которые будут существенно украшать нашу навигацию. Мы будем развивать данную тенденцию в сайтостроении и продолжать разрабатывать различные варианты данной навигации.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close