Davvero simpatico ed utile questo mini-sito dove sono raccolti, in modo sintetico, la maggior parte dei codici che permettono la corretta visualizzazione delle novità CSS3 all’interno dei vari browser. Ne permette anche la modifica e l’anteprima in tempo reale, anche se considero questa, una funzionalità piuttosto superflua.

http://thedesigninspiration.com/articles/best-artwork-of-superheroes-from-the-most-talented-comic-artists/

http://hugsformonsters.com/

http://www.staticmoment.com/

http://ffffound.com/image/e4413d64c7ae1ea6fd0c0d928c09afebb6954d5b

http://www.walee.com/

Ho trovato davvero interessante questo articolo del blog WebDesignerWall riguardante le basi del CSS3. E’ infatti spiegato un semplice trucchetto che ti permette di utilizzare quante ombre vuoi in un solo elemento, settando ad ognuna, i valori che preferisci.
Infatti, un’ombra solitamente è strutturata in questo modo:

/* Per Safari e Chrome */
-webkit-box-shadow: x y s #color;
 
/* Per Firefox */
-moz-box-shadow: x y s #color;

Dove x è la coordinata di angolazione, y la coordinata di distanza, s la grandezza dell’ombra e color è il colore dell’ombra. Per utilizzare più ombre, dovremo semplicemente scrivere qualcosa di simile:

/* Per Safari e Chrome */
-webkit-box-shadow:
x y s #color,
x y s #color,
x y s #color;
 
/* Per Firefox */
-moz-box-shadow:
x y s #color,
x y s #color,
x y s #color;

Cioè posporre ad ogni ombra una virgola ed aggiungerne un’altra. In questo modo, sarà facile ottenere simpatici risultati del genere.

Come abbiamo visto in numerosi tutorial, una delle pecche del CSS3 è che non viene supportato da una buona parte dei browser. Tra questi, naturalmente, è presente  Internet Explorer, un vero flagello per tutti i web designer. Dato, però, che IE rappresenta la più grossa fetta di mercato nel campo dei browser web, si ha la necessità di rendere compatibile ogni sito web anche con quest’ultimo navigatore. Un vero lavoraccio.
Ritornando però al discorso del CSS3, di certo una delle sue novità più apprezzate è stata la funzione border-radius che permette di creare un angolo arrotondato sull’elemento al quale viene applicato facendoci risparmiare parecchio tempo.

Dalla necessità di rendere compatibile questa funzione con IE, ho trovato questa utile risorsa, sviluppata da un ignoto Nick F..

Parlando terra terra, ci basterà scaricare questo file .htc, ed includerlo, tramite la stringa di codice posta in basso, all’interno dell’elemento al quale si vuole applicare lo stile CSS3:

behavior: url(ie-css3.htc);

Molto semplice no? Tramite questo metodo, saranno resi compatibili con IE 6 e superiori, oltre al border-radius, anche il box-shadow e il text-shadow. Per ulteriori informazioni potete consultare la pagina ufficiale.

Questo simpatico mostriciattolo non è il frutto di qualche animazione Flash, bensì, di puro CSS3. L’animazione è visibile solamente tramite Chrome o Safari.

Due dei tanti spettacolari esempi creati da Zurb riguardanti l’utilizzo di CSS3 nei modi più impensabili.

Simpatici effetti animati al passaggio del mouse sulle immagini. Utile spunto per la creazione di gallery semplici e divertenti.

Una lattina di Coca Cola che ruota allo scroll orizzontale del div nel quale è inserita. Un’idea davvero originale!

http://www.vanilabcn.com/

http://www.carlosserrao.com/

http://www.staticmoment.com/

http://www.dailymail.co.uk/news/worldnews/article-1187338/Off-wall-The-astonishing-3D-murals-painted-sides-buildings-trompe-loeil-artist.html

http://www.kallegustafsson.com/

Come forse molti di voi ben sanno, l’avvento di Snow Leopard ha portato un’aggiornamento di Quicktime, denominandolo, Quicktime X, un player dalle funzionalità del tutto più potenti del precedente. Tra le varie feautures, si nota subito un restyling dell’icona; proprio per questo motivo, ho voluto cimentarmi nel creare una sua versione riveduta che spiegherò in questa guida per Photoshop.

Creiamo un nuovo documento 400×400 px con sfondo trasparente. Apriamo le preferenze premendo Ctrl + K e impostiamo la griglia come in figura; successivamente la attiviamo.

Tramite lo strumento selezione ellittica, creiamo un ellisse (ma dai? ) grande quanto il nostro documento e, su un nuovo livello, la riempiamo di colore nero. Successivamente andiamo su Selezione -> Trasforma selezione, ed impostiamo come altezza e larghezza 65%. Infine clicchiamo su canc per cancellare la selezione ridotta. Otterremo una sorta di ciambella!

Tramite lo strumento rettangolo arrotondato (con raggio pari a 30px) creiamo un rettangolo arrotondato (wahh! ) e, tramite la modalità trasformazione libera, lo ruotiamo di 45° posizionandolo come in figura.

Uniamo i livelli creati ed importiamoli in un nuovo documento più grande (nel nostro caso, 1280×800 px). Applichiamo allo sfondo una sfumatura lineare che và dal #110716 al #4d4f54 ed impostiamo questo stile al nostro livello Q (N.B.: bisogna spostare la sfumatura radiale verso la parte alta della nostra forma).

Otterrete qualcosa di simile:

Posizionatevi sotto il livello della nostra Q e create, su un nuovo livello tramite lo strumento ellissi o selezione ellittica, un cerchio grande quanto la zona vuota.

Vi applicate questo stile livello:

Ecco come dovrebbe presentarsi, ora, il nostro logo di Quicktime:

Aggiungiamo, sopra al nostro cerchio, una nuova forma ellittica leggermente schiacciata:

Abbassate l’opacità a 85% ed il riempimento a 0% e vi applicate questo stile livello:

Aggiungete un ombra e la vostra icona è pronta! Volendo, potete facilmente cambiarne anche la colorazione! Per qualsiasi dubbio o domanda vi rimandiamo ai commenti, mentre potete scaricare da qui il PSD del lavoro!

Ma in cosa consiste il dinamismo conferito dal jQuery in questo menu? Semplice, al passaggio su una categoria, questa si allargherà rivelando delle brevi parole di spiegazione. Un effetto molto accattivante a livello visivo!

Per prima cosa, dobbiamo creare la nostra sfumatura lineare in Photoshop.  Create, quindi, un documento (1×50px) e vi applicate un gradiente che và dal #8d8d8d (in alto) al #4a4a4a (in basso). Infine salvatelo con il nome “bg_nav.jpg”.

I file su cui lavoreremo saranno index.html e style.css.. iniziamo a scrivere un pò di html!

<div id="nav">
<ul>
	<li><a href="#">Home</a> <span class="more">Vai alla homepage</span></li>
	<li><a href="#">Tutorials</a> <span class="more">Leggi le nostre guide</span></li>
	<li><a href="#">Ispirations</a> <span class="more">Prendi inspirazione</span></li>
	<li><a href="#">Photography</a> <span class="more">Guarda la nostra galleria fotografica</span></li>
	<li><a href="#">Web design</a> <span class="more">Sfoglia le ultime guide sul web design</span></li>
</ul>
</div>

Naturalmente le varie voci del menu verranno inserite in una lista, ed in ogni voce potrete notare uno span. In questo verrà inserito il contenuto aggiuntivo da mostrare. Senza alcun CSS, ecco come si mostrerà la pagina:

Iniziamo a scrivere qualche riga di convenzione nel CSS in modo tale che tutti i browser vedano allo stesso modo.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}

..impostiamo il colore di sfondo:

body{
background-color:#171717;
}

Ed iniziamo a personalizzare il menu. Il primo passo, consisterà nel creare la barra di sfondo.

#nav{
//Utilizziamo lo sfondo precedentemente creato con repeat-x in modo tale che si ripeta orizzontalmente.
background:transparent url(bg_nav.jpg) repeat-x scroll 0 0;
//Impostiamo l\altezza del menu pari a 50px mentre la larghezza 100%
height:50px;
width:100%;
//Aggiungiamo un margine superiore (opzionale naturalmente)
margin-top:100px;
}

Dovreste ottenere una cosa del genere:

Impostiamo un margine e l’altezza pari a 100% alla lista:

#nav ul{
padding-left:50px;
height:100%;
}

E iniziamo a personalizzare i singoli elementi della lista:

#nav li{
//Tramite questa stringa di codice possiamo modificare tonalità del gradiente rendendolo maggiormente scuro. I primi 3 valori (0, 0, 0) costituiscono il codice RGB del nostro colore (in questo caso nero), mentre l\ultimo l\opacità. Ciò ci permette di creare infinite combinazione di gradienti utilizzando solo una stringa di codice anzichè un\immagine!
background-color:rgba(0, 0, 0, 0.4);
//Rendiamo i vari elementi disposti orizzontalmente
display:inline-block;
//Aggiungiamo dei padding e dei margin per rendere il tutto più gradevole
padding-left:25px;
padding-right:25px;
margin-left:5px;
margin-top:2px;
//Impostiamo l\altezza pari a 90%
height:90%;
//Il line-height serve a posizionare il testo all\interno dell\elemento ad una certa altezza
line-height:40px;
//Impostiamo come cursore la manina
cursor:pointer;
//Utilizziamo le varie potenzialità di CSS3, prima creando i bordi arrotondati, poi, creando 1px di luce dal basso, facendo uso della tecnica del pixel popping
-moz-border-radius:10px;
-webkit-border-radius: 10px;
-moz-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2);
//Formattiamo il testo
font-family:Segoe UI;
color:#fff;
text-shadow:0px 1px 0px #000;
}

Ed ora passiamo a cambiare il colore e ad azzerare le decorazioni dei link all’interno del menu

#nav a{
color:#fff;
text-decoration:none;
}

Impostiamo gli eventi al passaggio del mouse e al click:

#nav li:hover{
//Come detto prima, grazie ad rgba, andremo a schiarire il gradiente al passaggio del mouse..
background-color:rgba(0, 0, 0, 0.3);
}
#nav li:active{
//Mentre a scurirlo al click
background-color:rgba(0, 0, 0, 0.5);
}

Infine impostiamo lo stile per il testo aggiuntivo, rendendolo non visibile:

.more{
display:none;
font-size:8pt;
margin-left:10px;
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.2);
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:rgba(0, 0, 0, 0.2);
padding:5px;
}

Il vostro menu dovrebbe presentarsi così:

Esteticamente è pronto! E’ il momento di passare al jQuery, quindi, lo richiamiamo all’interno dell’html.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

E scriviamo il nostro script:

//Lasciamo caricare tutti gli oggetti della pagina
$(document).ready(function () {
//Al passaggio del mouse su una categoria
	$('#nav li').hover(function(){
//Si cercherà l'elemento con classe more all'interno di questa e verrà fatto comparire
		$(this).find(".more").stop(true).fadeIn("slow");
//Infine, grazie a questo piccolo trucchetto, dopo 750ms (1000 è un secondo) verrà fatto sparire
		$(this).find(".more").fadeTo(750,1).fadeOut(1000);
	});
});

Ed ecco pronta la nostra barra di navigazione! Potete scaricare i file utilizzati cliccando qui, mentre vedere una demo cliccando qui. Per qualsiasi domanda o dubbio vi rimandiamo, come al solito, ai commenti