Oggi vi proponiamo un esclusivo set di 7 di divisori minimalisti in stile web 2.0. Un must-have per tutti coloro che si occupano di web design. Il pack contiene il file in formato .PSD contenente tutti i divisori posizionati nei vari livelli. Naturalmente, bisognerà apportare qualche piccola modifica nel qual caso lo sfondo sul quale si vogliano inserire sia colorato. Per qualsiasi domanda, potete utilizzare i commenti.

Cliccando qui potete scaricare gratuitamente il set.

Dobbiamo sempre ricordarci di minimizzare l’utilizzo di immagini dove è possibile in modo tale da rendere il nostro contenuto più veloce da modificare e più leggero da caricare per gli utenti.

In pratica, quindi, ci serviranno solo 2 immagini per la creazione di questo menu: il gradiente verde e l’effetto pixel popping (1px shadow e 1px highlight) che potete vedere sotto ogni categoria. Ricordiamoci che i gradienti lineari, possono essere ripetuti orizzontalmente e quindi ci basterà utilizzare anche un solo pixel di larghezza; vale lo stesso per l’effetto pixel popping.

Iniziamo a scrivere un pò di codice! Per quanto riguarda l’organizzazione dei div, utilizzeremo qualcosa di simile:

Che in codice, diventa:

<div class="cat_container">
	<div class="cat_title">
	Categories
	</div>
	<div class="cat_list">
		<ul>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
			<li><a href="#">Ispirations</a></li>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
		</ul>
	</div>
</div>

Ora impostiamo il nostro CSS; è tutto commentato e quindi credo sia abbastanza facile da capire:

body{
/* Opzionale */
background:transparent url(bg.jpg) repeat scroll 0 0;
 
/* Impostiamo il font che vogliamo utilizzare */
font-family: Tahoma, Sans-Serif;
}
.cat_container{
/* Questo ci servirà per gl'angoli arrotondati del box grigio */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 
/* Questa è l'ombra esterna posizionata verso la fine del menu. RGBA presenta i 3 valori di Rosso, Verde e Blu e il canale Alpha per la trasparenza */
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
 
/* Impostiamo sfondo e la larghezza del menu */
background-color: #e9e9e9;
width: 250px;
 
/* Il padding ci servirà a far si che dopo le categorie ci sia un pò di spazio vuoto */
padding-bottom: 5px;
margin: 10px;
}
.cat_title{
/* Impostiamo, anche qui, gli angoli arrotondati */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 
/* Creiamo un'altra ombra */
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
 
/* Utilizziamo il gradiente verde precedentemente creato con repeat-x in modo tale che si ripeta orizzontalmente */
background: transparent url(bg_cat_title.jpg) repeat-x scroll 0 0;
height: 50px;
 
/* Impostiamo il testo */
font-size: 16pt;
color: #fff;
 
/* Impostiamo l'ombra di 1px */
text-shadow: 0px 1px 0px #000;
 
/* Line-height ci serve per centrare verticalmente il testo */
line-height: 40px;
 
/* Mettiamo un pò di margine a sinistra in modo tale che la scritta sia ben posizionata */
padding-left: 10px;
 
/* Impostiamo come cursore la manina */
cursor: pointer;
}
.cat_list ul{
/* Eliminiamo il padding che di è default 50px */
padding: 0;
}
.cat_list li{
/* Utilizziamo come sfondo il divisore con effetto pixel popping, ripetuto orizzontalmente, e posizionato in basso */
background: transparent url(divisor.jpg) repeat-x scroll 0 bottom;
 
/* Eliminiamo i pallini a fianco ad ogni voce della lista */
list-style: none;
 
/* Aggiungiamo un padding per posizionare meglio orizzontalmente il testo */
padding-left: 20px;
 
/* Impostiamo un l'altezza di ogni categoria */
height: 25px;
 
/* Formattiamo il testo */
color: #9c9c9c;
text-shadow: 0px 1px 0px #fff;
font-size: 9pt;
line-height: 25px;
}
.cat_list a{
/* Formattiamo nuovamente il testo, nel caso in cui le categorie presentano un link */
color: #9c9c9c;
text-shadow: 0px 1px 0px #fff;
font-size: 9pt;
line-height: 25px;
text-decoration: none;
}
.cat_list li:hover{
/* Utilizziamo un altro colore di sfondo al passaggio del mouse su una categoria */
background-color: #e4e4e4;
}

Già ora il nostro menu ha preso vita ed esteticamente è molto bello. Passiamo, però, all’aggiunta di qualche effetto jQuery per renderlo dinamico:

// Quando sono carichi tutti i documenti della pagina, possono partire gli effetti jQuery
$(document).ready(function(){
	//Quando si passa sopra ad un link presente nel div "cat_list"..
	$(".cat_list a").mouseover(function () {
		//Al link si aggiunge un padding-left di 20px, e l'effetto dura per 700 ms (1000 è un secondo)
		$(this).animate({paddingLeft: 20}, 700);
	});
	//Quando si leva il mouse da un link del div "cat_list"..
	$(".cat_list a").mouseout(function () {
		//Questo ritorna al padding originario (cioè 0)
		$(this).animate({paddingLeft: 0}, 700);
	});
	//Quando si clicca sopra al div "cat_title" (cioè sopra al nome del menu)..
	$(".cat_title").click(function () {
		//Il div "cat_list" verrà chiuso con un effetto slide
		$(".cat_list").slideToggle("slow");
	});
});

Ed il nostro menu è pronto ; ecco il codice completo del file index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
<title>jQuery categories</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// Quando sono carichi tutti i documenti della pagina, possono partire gli effetti jQuery
$(document).ready(function(){
	//Quando si passa sopra ad un link presente nel div "cat_list"..
	$(".cat_list a").mouseover(function () {
		//Al link si aggiunge un padding-left di 20px, e l'effetto dura per 700 ms (1000 è un secondo)
		$(this).animate({paddingLeft: 20}, 700);
	});
	//Quando si leva il mouse da un link del div "cat_list"..
	$(".cat_list a").mouseout(function () {
		//Questo ritorna al padding originario (cioè 0)
		$(this).animate({paddingLeft: 0}, 700);
	});
	//Quando si clicca sopra al div "cat_title" (cioè sopra al nome del menu)..
	$(".cat_title").click(function () {
		//Il div "cat_list" verrà chiuso con un effetto slide
		$(".cat_list").slideToggle("slow");
	});
});
</script>
</head>
 
 
<body>
<div class="cat_container">
	<div class="cat_title">
	Categories
	</div>
	<div class="cat_list">
		<ul>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
			<li><a href="#">Ispirations</a></li>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
		</ul>
	</div>
</div>
</body>
</html>

Vi ricordo che potete scaricare il menu da qui, e vedere una demo da qui. Infine, vi rimando ai commenti per qualsiasi domanda o dubbio

Ciao ragazzi, oggi volevo segnalarvi un interessante applicazione flash per creare uno slider 3D di immagini a dir poco mozzafiato Il suo nome è CU3ER, è gratuito, è personalizzabile ed è molto semplice da usare.

L’ultima versione rilasciata è la 0.9.2 (BETA); potete vederlo subito in azione e scaricarlo dal sito ufficiale. L’applicaizione ricava le varie immagini da utilizzare da un file XML che rende il tutto facile da gestire. CU3ER, inoltre, è fornito di una ricca documentazione, di una facile guida di introduzione e di un forum di supporto.

Eccone il funzionamento:

body{
margin: 0;
}
a.button{
/* Impostiamo la grandezza del nostro bottone. */
width: 200px;
display: block;
 
/* Scegliamo il colore di sfondo. */
background-color: #388fc5;
 
/* Utilizziamo la proprietà CSS3 per arrotondare il bottone. */
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
 
/* Utilizziamo la proprietà CSS3 per aggiungere un'ombra al bottone. */
-moz-box-shadow: 1px 1px 0 #145278;
-webkit-box-shadow: 1px 1px 0 #145278;
 
/* Impostiamo un bordo chiaro al bottone. */
border: 1px solid #9fdaff;
 
/* Impostiamo il cursore come "manina" */
cursor: pointer;
 
/* Aggiungiamo dei margini interni ed esterni */
padding: 10px;
margin: 30px;
 
/* Formattiamo il testo */
font-size: 1.7em;
font-family: Myriad Pro, Tahoma, Sans-serif;
font-weight: bold;
color: #ffffff;
text-shadow: 0 1px 0 #363636;
line-height: 45px;
text-align: center;
text-decoration: none;
}
 
a.button:hover{
background-color: #45a2dc;
}
 
a.button:active{
background-color: #2a7aab;
}

Il codice, commentato, mi sembra piuttosto semplice da capire;  i selettori che ci interessano maggiormente sono -moz-border-radius, -webkit-border-radius (entrambi per la realizzazione dell’effetto arrotondato) e -moz-box-shadow per creare l’effetto rilievo con il bordo interno.
Ecco, quindi, come si presenterà il nostro codice:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 
<title>Bottone in stile web 2.0 full CSS3</title>
<style type="text/css">
body{
margin: 0;
}
a.button{
/* Impostiamo la grandezza del nostro bottone. */
width: 200px;
display: block;
 
/* Scegliamo il colore di sfondo. */
background-color: #388fc5;
 
/* Utilizziamo la proprietà CSS3 per arrotondare il bottone. */
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
 
/* Utilizziamo la proprietà CSS3 per aggiungere un'ombra al bottone. */
-moz-box-shadow: 1px 1px 0 #145278;
-webkit-box-shadow: 1px 1px 0 #145278;
 
/* Impostiamo un bordo chiaro al bottone. */
border: 1px solid #9fdaff;
 
/* Impostiamo il cursore come "manina" */
cursor: pointer;
 
/* Aggiungiamo dei margini interni ed esterni */
padding: 10px;
margin: 30px;
 
/* Formattiamo il testo */
font-size: 1.7em;
font-family: Myriad Pro, Tahoma, Sans-serif;
font-weight: bold;
color: #ffffff;
text-shadow: 0 1px 0 #363636;
line-height: 45px;
text-align: center;
text-decoration: none;
}
 
a.button:hover{
background-color: #45a2dc;
}
 
a.button:active{
background-color: #2a7aab;
}
 
</style>
 
</head>
<body>
<div>
	<a class="button" href="http://www.artedelweb.it/wp-content/uploads/2009/12/bottone_full_css.zip">
		Download
	</a>
	<a class="button" href="http://www.artedelweb.it/2009/12/08/guida-creiamo-un-bottone-dagli-angoli-arrotondati-e-in-stile-web-2-0-con-css3/">
		Go to article
	</a>
</div>
</body>
</html>

Per qualsiasi dubbio o domanda, potete scriverci nei commenti

Dopo aver realizzato sia l’header, che il content, arriviamo ora all’ultima tappa di questa guida realizzando il footer. Questo sarà principalmente composto da un contact form e da un testo di crediti.

Footer

Sfondo

Creiamo un nuovo gruppo di nome “Footer“. Inseriamo il livello del footer all’interno del gruppo e lo rinonimiamo in “bg_footer“. Vi applichiamo questo stile livello (N.B.: bisogna spostare il gradiente verso l’alto come mostra la figura 3):

Ecco cosa dovreste ottenere:

Contact form e crediti

Creiamo un nuovo gruppo di nome “Contact form“. All’interno creiamo, grazie allo strumento rettangolo arrotondato, queste forme:

Ai campi bianchi, applichiamo questo stile livello:

Mentre al bottone azzurro, quest’altro stile livello:

Ecco ciò che otterremo:

Aggiungiamo, infine, del testo sopra ai campi, e una scritta di crediti in basso:

Ecco finito il nostro template in perfetto stile web 2.0

Potete scaricare da qui gratuitamente, il file .PSD del template Per qualsiasi domanda, o dubbio, potete scriverci nei commenti .

Prosegue la nostra guida alla creazione di un template in stile web 2.0 con Adobe Photoshop. Dopo aver completato l’header, passiamo alla realizzazione del content.

Content

Sfondo

Rinonimiamo il livello di sfondo in “bg_content“. Creiamo un nuovo livello e grazie allo strumento sfumatura (dal nero al trasparente) creiamo 2 sfumature come in figura. Abbassiamo l’opacità al 25%.

Testi e contenuti

La gestione dei contenuti, e quindi dei testi, di una pagina web deve essere intelligente ma al contempo stesso, gradevole alla vista.

Nel nostro caso, i testi saranno disposti principalmente nella zona in alto a sinistra. Creiamo quindi un campo di testo, nel quale inserire delle scritte casuali. Ecco come abbiamo disposto il testo nel nostro esempio:

Inseriamo anche un bottone di download (nel qual caso il template sia destinato alla sponsorizzazione di un software). Creiamo quindi, con lo strumento rettangolo arrotondato, il nostro pulsante e applichiamogli questo stile livello. Vi invito, inoltre, a notare l’utilizzo improprio dell’ombra interna.

Aggiungiamo sopra il bottone il testo “Download” di colore #e0fbff. Ecco cosa dovreste ottenere:

Categorie

Creiamo un nuovo gruppo di nome “Categories”. All’interno, inseriamo un nuovo livello e con lo strumento selezione, creiamo un rettangolo di colore #4f4f4f. Lo impostiamo, infine, in modalità “luce soffusa”.

Con la stessa tecnica utilizzata per il bottone di download, ne creiamo un’altro simile al precedente con sopra la scritta “Navigation”.

Su un nuovo livello, creiamo dei divisori di 1 px, sfruttando l’ormai diffusa tecnica del pixel popping, utilizzando come colori #d9d9d9 e #e8e8e8. Aggiungiamo, infine, del testo di prova.

Ecco finito il nostro content:

Per qualsiasi dubbio o domanda, potete lasciare un commento

In questa guida per Adobe Photoshop, vi mostrerò come creare un efficace template web 2.0 per la propria attività. Sarà suddiviso in un header (contenente logo, alcune informazioni e gallery), un content (contenente menu ed informazioni) ed un footer (contenente un contact form e dei crediti). Potete segnalarci qualsiasi errore o chiederci qualunque cosa nei commenti

Premessa sul workspace.

Lo spazio di lavoro in cui lavoriamo deve essere completo di ogni strumento che può servirci, in modo tale da non dover perdere tempo inutilmente a cercarli. Vi consiglio di utilizzare il pre-creato Web con l’aggiunta della paletta di Storia.

Creazione del documemnto.

Creiamo un nuovo documento 900×1000 px. Attiviamo lo strumento griglia (View->Show->Grid) e lo impostiamo come segue (Ctrl + K):

Iniziamo a schematizzare il nostro layout. I primi 3 “quadrati grandi” e mezzo, saranno il nostro header, i successivi 3 quadrati e mezzo il nostro content, e gli ultimi 3 quadrati il nostro footer. Possiamo quindi “livellarli” e colorarli con colori differenti. Ricordate, l’ordine e la precisione nella creazione di un template in Photoshop sono essenziali. Senza contare che sono indispensabili nel qual caso volessimo crearne la versione HTML/CSS.

Header.

Sfondo.

Iniziamo a lavorare con l’header; creiamo un nuovo gruppo di nome “Header“, rinonimiamo il livello in “bg_header” e lo coloriamo con #00677e. Apriamo lo stile del livello; assicurandoci di avere come colore di primo piano il bianco, applichiamo una sovrapposizione gradiente come in figura. Spostiamo quindi il gradiente verso l’alto (con la finestra dello stile aperta, posizioniamoci con il puntatore nel documento e spostiamo il gradiente in alto).

Spostiamoci alla voce “Bagliore interno“. Utilizzeremo il bagliore impropriamente, infatti questo ci servirà soltanto a creare un lieve effette disturbo in modo tale che l’header non risulti del tutto piatto.

Ecco cosa dovreste ottenere:

Logo e slogan.

Creiamo un nuovo gruppo di nome “Logo” da posizionare dentro il gruppo “Header“. All’interno aggiungiamo un testo; l’immagine spiega meglio di mille parole:

Applichiamo uno stile livello al testo:

Aggiungiamo, ora, un testo di slogan da posizionare al di sotto del logo. Applichiamo anche uno stile livello:

Ecco come dovrebbe presentarsi il nostro header:

Gallery

E’ il momento, ora, di focalizzarci sulla creazione del box di una possibile gallery. Questa, quindi, sarà costituita dal box centrale e da 2 freccie di scorrimento. Iniziamo creando il box centrale.

Su un nuovo livello di nome “Box gallery“, con lo strumento che preferite, creiamo un quadrato grande 2 quadrati (scusate il gioco di parole ), e lo coloriamo di bianco. Apriamo lo stile livello del quadrato e vi applichiamo questo stile livello:

Creiamo un nuovo livello di nome “Shadow” da posizionare sotto a quello del box. Utilizzando un pennello morbido di 200 px, creiamo una zona circolare colorata di nero sul livello. Apriamo la modalità trasformazione libera, e diminuiamo l’altezza della nostro cerchio colorato. Si verrà quindi a formare una sorta di ellissi molto schiacciata: la posizioniamo nella parte bassa del box e diminuiamo l’opacità a 70%.

Inseriamo un’immagine a piacere, rinonimiamo il suo livello in “Image example“, e le diminuiamo la grandezza in modo tale che sia più o meno grande quanto il box. Successivamente creiamo una maschera di ritaglio (clipping mask) tra il livello “Box gallery” e “Image example“.

Con lo strumento penna, o con delle forme predefinite, creiamo una freccia da posizionare a sinistra del box. La duplichiamo e la riflettiamo orizzontalmente posizionandola a destra del box. Infine applichiamo a entrambe questo stile livello:

Ecco cosa dovreste aver ottenuto:

Informazioni aggiuntive

Creiamo un nuovo gruppo di nome “Welcome box“. Ora passeremo alla creazione di un piccolo riquadro nel quale poter scrivere qualche breve news o informazione. Creiamo, quindi, con lo strumento rettangolo arrotondato (raggio 10px), un piccolo riquadro bianco. Abbassiamo l’opacità al 15% e applichiamo una traccia di colore nero di 1 px con 70% di opacità. Aggiungiamo sopra al box, un breve testo di colore #89c9d7 e grandezza 25pt.

L’icona del Feed RSS nel vostro blog non vi convince? Siete sempre a cercarne delle nuove?? Allora questo set di icone dedicate a E-mail e Feed RSS farà il caso vostro! Sono state create da Nikko di xyberneticos.com e devo ammettere che sono davvero belle!
Come possiamo vedere, l’icona è coperta da una sorta di tessuto di jeans che rende il tutto al tempo stesso gradevole e diverso dalla classica icona cui siamo abituati a scorgere nei blog!

Adobe Illustrator è il software di casa Adobe specializzato nella creazione di immagini vettoriali. Noi non lo usiamo spesso, però abbiamo voluto proporvi questo set di sfumature create da DezinerFolio. In totale sono 130 e tutte in stile web 2.0.