Creare un Portfolio in Html5

Oggi creiamo un Portfolio Html5 che si puo’ usare per la presentazione dei nostri lavori tanto e’ completamente personalizzabile.

IL CODICE HTML

Come al solito partiamo dal file index.html o se preferite portfolio.html. Eccolo:

Creare un portfolio in Html5 | iwebdesigner Demo










Il mio Portfolio










Creare un Portfolio in Html5
Torna al Blog

Andiamo a vedere cosa ho scritto. Nell’Header c’e’ la voce H1 che e’ il logo, poi si vedra’ nel file CSS. Il div #stage e’ la lista non ordinata delle immagini del nostro portfolio. Esso contiene una serie di tag che vedremo a cosa servono quando esamineremo il jQuery che fa scorrere la lista dei nostri progetti. l primi elementi LI  rappresentano una voce del top_menu’:

ration" />
>IL CODICE JQUERY
Questo e’ contenuto nel file script.js:
$(document).ready(function(){

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

// Looping though all the li items:

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

// Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);

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

// Removing extra whitespace:
value = $.trim(value);

if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}

// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});

});

// Creating the "Everything" option in the menu:
createList('Everything',items);

// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
createList(k,v);
});

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

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

// Using the Quicksand plugin to animate the li items.
// It uses data('list') defined by our createList function:

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

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

function createList(text,items){

// This is a helper function that takes the
// text of a menu button and array of li items

// Creating an empty unordered list:
var ul = $('
',{'class':'hidden'});

$.each(items,function(){
// Creating a copy of each li item
// and adding it to the list:

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

ul.appendTo('#container');

// Creating a menu item. The unordered list is added
// as a data parameter (available via .data('list'):

var a = $('',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#filter');
}
});
Con questo codice si creera’ un ciclo di tutti i #stage LI e andiamo a costruire per ognuno di essi una lista nascosta non ordinata. Poi andiamo a creare una nuova opzione per le voci di menu in maniera che si verifichi la transizione delle nostre immagini tra una voce e un’altra, proprio andando a sfruttare le liste nascoste appena create.
IL CODICE CSS
Adesso quello che ci manca e’ il file CSS. La parte principale del codice inserito in questo file e’ senza dubbio l’ordine degli elementi del bg menu. Gli elementi :before e :after, quelli che abbiamo identificato nella sezione di commento green filter bar.
Ecco lo style.css:
/*-------------------------
Simple reset
--------------------------*/

*{
margin:0;
padding:0;
}

/*-------------------------
General Styles
--------------------------*/

html{
background: url('../img/bg_tile.jpg') #18222b;
}

body{
color:#fcfcfc;
font:14px/1.3 'Segoe UI',Arial, sans-serif;
min-height: 930px;
background:url('../img/bg_center.jpg') center 240px no-repeat;
}

a, a:visited {
text-decoration:none;
outline:none;
color:#54a6de;
}

a:hover{
text-decoration:underline;
}

/*----------------------------
Headers & Footers
-----------------------------*/

header{
background:url('../img/header.png') repeat-x;
display: block;
height: 220px;
padding: 10px;
}

h1{
background:url('../img/logo.png') no-repeat center center;
height: 80px;
margin: 75px auto;
overflow: hidden;
text-align: center;
text-indent: -99999px;
}

/*----------------------------
Green filter bar
-----------------------------*/

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

/*----------------------------
Content area
-----------------------------*/

#container{
display:block;
overflow:hidden;
width: 830px;
margin:0 auto;
}

#container li{

float: left;
height: 96px;
list-style: none outside none;
margin: 6px;
position: relative;
width: 125px;

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

#container ul{
overflow:hidden;
}

#container ul.hidden{
display:none;
}

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

footer{
display:block;
background-color:#13181d;
position:fixed;
width:100%;
height:70px;
bottom:0;
left:0;
z-index: 100000;
}

footer h2{
font-size:20px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:400px;
color:#eee;
}

footer a.iwd,a.iwd:visited{
background:url("../img/iwd.png") no-repeat right top;
border:none;
text-decoration:none;
color:#FCFCFC;
font-size:12px;
height:70px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
width:290px;
}
Il Portfolio Html5 e’ finito.
E’ facile da personalizzare, andando a modificare i vari Li del codice Html e della lista #stage; lo script fara’ tutto il resto.
Alla prossima!