Vogliamo ottenere tutto questo con l’utilizzo dei soli CSS: in particolare degli pseudo-elementi :before e :after. L’effetto finale risulta molto ben fatto e sicuramente subito utilizzabile per tutti i browser (mediante l’utilizzo dei tag proprietari dei vari browser), escluse però tutte le versioni di Internet Explorer!

CSS3: Galleria di immagini con ombre e effetto foto piegata!

Dobbiamo realizzare una galleria di immagini per un portfolio online? Ecco di seguito una pagina di esempio e il codice che ci serve:

Per cominciare, organizziamo le illustrazioni in una semplice lista non ordinata di elementi:

<ul class="box">
<li><img src="monster-03.png" width="250" height="150" alt="Monster" /></li>
<li><img src="monster-04.png" width="250" height="150" alt="Monster" /></li>
<li><img src="monster-02.png" width="250" height="150" alt="Monster" /></li>
<li><img src="monster-01.png" width="250" height="150" alt="Monster" /></li>
<li><img src="monster-05.png" width="250" height="150" alt="Monster" /></li>
<li><img src="monster-06.png" width="250" height="150" alt="Monster" /></li>
</ul>

Applichiamo gli stili CSS (nell’ordine che vedete sotto) in modo tale che le immagini si dispongano una a fianco all’altra, e che abbiano un effetto di ombra interna ed esterna, ottenuta rispettivamente con le propietà CSS3 rgba() e rgba() inset:

ul.box li {
	list-style-type: none;	margin: 0 30px 30px 0;
	padding: 0;	width: 250px;	height: 150px;
	border: 1px solid #efefef;	position: relative;
	float: left;
	background: #ffffff; /* per i vecchi browser */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

Fatto questo, trasformiamo gli oggetti con i CSS3: ecco come applicare gli stili per ottenere l’ombra esterna "piegata"!
Inseriamo due elementi posizionati absolute dietro ogni elemento della lista (con il corretto z-index), con gli pseudo-elementi :after e :before. Essi vengono poi ruotati con la proprietà transform:rotate, e deformati con la proprietà skew, che applica una inclinazione lungo gli assi X e Y.
Ecco cosa inserire:

ul.box li:after {
	z-index: -1;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	right: 10px;
	bottom: 10px;
	transform: skew(15deg) rotate(6deg);
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);  }
ul.box li:before {
	z-index: -2;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	left: 10px;
	bottom: 10px;
	transform: skew(-15deg) rotate(-6deg);
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }

Articoli correlati:

1. CSS3: compatibilità cross-browser…da oggi!
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

La compatibilità con i browser sembra non essere più un grosso problema, da quando hanno iniziato a circolare risorse come Modernizr, ExplorerCanvas o IE7.js, per "modernizzare" i browser non compatibili con le nuove tecnologie, oppure per attivare i tag HTML5 su tutti i browser.

Dopo aver dato una occhiata alle maggiori novità di HTML5, e dopo aver dato uno sguardo alle tecniche per utilizzare già oggi i CSS3, ecco più di 10 template HTML5-CSS3 tutti da testare, con cui iniziare a progettare per il web di domani. Se li hai gà testati, dimmi cosa ne pensi nei commenti in fondo al post!

HTML5 Starter Pack

HTML5 Starter Kit è un template che non costringe a costruire un particolare tipo di sito web, ma si adatta a seconda delle esigenze.
Ecco le sue caratteristiche: gratuito, HTML5 cross-browser (compreso IE6), possibilità di utilizzare immediatamente Cufón @font-face, disponibilità di alcune classi strutturali riutilizzabili.
Infine, viene offerto il file .PSD per aggiornare il layout.

Gotta’ love HTML5 & CSS3

Template per le gallerie di immagini, sviluppato con HTML5-CSS3, che comprende:
transizioni animate (come l'hover animato per la descrizione delle immagini) e un’interfaccia a schede per diverse gallerie con CSS3 (che usa solo il selettore :target).

A Free HTML5 and CSS3 Theme

Il template permette di creare sotto-pagine funzionanti, tra cui un modulo di contatto con validazione lato server, e codice PHP per l’invio della posta elettronica.
Utilizza la griglia 960.gs, e ha un font personalizzato chiamato Chunkfive che fa uso di @font-face.

Coding A HTML 5 Layout From Scratch

Tutorial da Smashing Magazine: il template proposto è una vetrina per la maggior parte dei nuovi elementi di intestazione, piè di pagina, sezione, ecc.
Nelle strutture CSS3, c’è il popolare text-shadow e altri selettori come last-child o selection.

52framework

52framework è uno strumento completo per iniziare a progettare con HTML5 e CSS3 con l’uso dei nuovi tag, campi di input, angoli arrotondati, text-shadows, ecc…
Include un sistema di layout a griglia e un CSS-reset (modificato per HTML5).

iPhone App. Website With HTML5

Un tutorial molto dettagliato sulla creazione di una applicazione web per iPhone che utilizza HTML5 e CSS3.

Creare un sito elegante con HTML 5 e CSS3

Questo tutorial pemette di creare pagine web con HTML5 e CSS3, e di condividere il risultato sotto forma di download gratuito.
Molti nuovi elementi HTML5 vengono qui utilizzati e viene integrato Modernizr per la compatibilità di IE.

Free HTML5 Template

Template per layout HTML a 2 o 3 colonne, compreso il file .PSD per gli elementi di layout.

HTML5 & CSS3 Vertical One-Page Template

Un template per siti one-page a svluppo verticale, che utilizza jQuery per lo scorrimento del contenuto in verticale per la visualizzazione dei link.

OWMX 1 HTML5-CSS3 Template

Template per blog a 2 colonne che utilizza molte delle nuove caratteristiche CSS3 e dei tag HTML5.
Utilizza il microformato: hCalendar microformat.

FlipThru HTML5 and CSS3 Template

Il template è piuttosto semplice ma utilizza le maggiori funzionalità di HTML5-CSS3.
Tuttavia, è da notare la disponibilità di un accordion che fa solo uso di CSS3.

HTML5-CSS3 Starting Template

Questo template offre una struttura completa per siti web HTML5 costruiti con PHP.
Comprende inoltre gli stili CSS per il layout, per la tipografia, per la stampa e il CSS reset.
Sono già disponibili nel modello le funzioni include PHP per header, footer, ecc

Articoli correlati:

1. HTML5: tavola degli elementi interattiva!
2. CSS3: compatibilità cross-browser…da oggi!
3. CSS3: effetto foto piegata!

Purtroppo, anche se alcune di esse appartengono già alle specifiche CSS 2.1, non sono supportate da nesusn browser IE. Ecco allora che ci vengono in aiuto alcune librerie JavaScript che uniformano il comportamento di IE ai browser più recenti.

IE7.js è una libreria JavaScript (100kb) per far sì che Internet Explorer 6+ si comporti come un browser standard-compliant. Essa risolve molti problemi legati a HTML, CSS e fa funzionare correttamente con IE5 e IE6 le PNG trasparenti.
Scarichiamola e scegliamo di includere il JavaScript che ci permette di aggiornare tutti gli IE alla versione 9, così:

<!--[if lt IE 9]>
  <script src="IE9.js"></script>
<![endif]-->

Pseudoclassi: sintassi

Tutte le pseudo-classi seguono questa sintassi:

elemento:pseudoClasse {
...
}

Alcune pseudo-classi fanno uso anche delle parentesi. Per esempio, la pseudo-classe :not() dichiara quale regola CSS non applicare. Ciò è utile quando si desidera applicare qualcosa a tutto tranne a un certa classe/ID. Per esempio, questa dichiarazione:

.miaClasse:not(div) {
 background:#CCC;
}  

imposta uno sfondo di colore #CCC per tutti gli elementi che non siano div.

Utilizzo delle pseudo-classi

Pseudo-classi correlate ai link

Queste pseudo-classi applicano degli stili ai diversi stati di un link. Ecco di seguito la lista completa e cosa possiamo ottenere:

• :link applica uno stile a un link non visitato
• :visited applica uno stile a un link visitato
• :hover applica uno stile su un elemento al passaggio del mouse
• :active applica uno stile a un elemento attivo. Per esempio, un link è attivo da quando ci si clicca a quando si rilascia il click

A questo riguardo occorre ricordare che l’ordine sopra indicato non è casuale: in fatti, ogni pseudo-classe link-related ha una sua specificità.
Esiste una sorta di short-hand per ricordarsi la corretta successione: prendendo la lettera iniziale di ogni stato si ottiene "LVHA", che può essere ampliato a "LoVe HAte".

Pseudo-classi correlate a Input & link

• :focus applica uno stile a un elemento in uso. Per esempio, quando si scrive dentro una textarea, in quel momento essa è in uso
• :target se si dispone di un URL tipo index.html#about, questo permetterà di applicare i CSS per l’elemento con id="about"
• :enabled seleziona tutti gli elementi input in stato enable
• :disabled seleziona tutti gli elementi input in stato disabled
• :checked controllato nelle caselle di immissione selezionate
• :indeterminate seleziona i radio e i check-box, quando essi non sono né selezionata né non selezionata
• :required seleziona gli elementi input che sono required
• :optional seleziona gli elementi input che sono optional
• :invalid seleziona input non validi
• :in-range selziona elementi che sono in un range (da utilizzare con input type="range" in HTML5)
• :out-of-range seleziona elementi fuori dal range
• :default seleziona l’elemento di default, per esempio, in un form il bottone submit
• :valid seleziona un campo input valido (HTML5)

Pseudo-classi correlate alla posizione/numero

Ecco un esempio:

• :root applica uno stile CSS all’elemento radice, ossia il tag <html> in un documento HTML
• :first-child applica uno stile al primo figlio di un elemento
• :last-childapplica i CSS all’ultimo elemento contenuto. Esempio div p:last-child seleziona l’ultimo paragrafo d un div
• :nth-child(N) seleziona elementi numerati, su base 1. Per esempio, p:nth-child(3) seleziona l’elemento p che è il terzo figlio. Si possono anche aggiungere regole, per esempio p:nth-child(2n+1), dove n è il numero di partenza partendo da 0 e viene incrementato di 1. Perciò, questa regola seleziona tutti gli elementi pari (odd): in questo caso è equivalente a scrivere nth-child(odd), così come per i dispari si scrive nth-child(even)
• :nth-of-type(N) applicare i CSS a un elemento numerato di un certo tipo. Per esempio: div:nth-of-type(2) seleziona il secondo di quel tipo
• :nth-last-of-type(N) seleziona un elemento in base alla sua posizione, per esempio nth-last-of-type(4)
• :first-of-type applica i CSS solo al primo alemento di quel genere. Per esempio, se ci sono due div consecutivi, applica la regola solo al primo
• :last-of-type Seleziona l’utlimo elemento di un genere
• :only-child seleziona un elemento solo se è l’unico figlio del contenitore padre
• :only-of-type seleziona un elemento solo se esso è l’unico nel suo genere contenuto nell’elemento padre

Pseudo-classi relazionali

• :not(elemento | classe) applica una regola CSS solo agli elementi che non sono specificati tra le parentesi
• :empty applica i CSS a un elemento solo se è vuoto

Pseudo classi e paseudo elementi legati al testo

Pseudo-elementi

• :first-line definisce lo stile CSS della prima riga di un elemento
• :first-letter definisce lo stile CSS del primo carattere di un elemento

Pseudo-classi

• :lang() applica uno stile a un elemento che usa una lingua specifica, per esempio :lang(en) per l’inglese. È quindi possibile mettere lang = "en" in un tag HTML e impostare gli stili solo per esso
• ::selection permette di cambiare lo stile del testo selezionato nel browser
• :read-only seleziona gli elementi che sono read-only
• :read-write seleziona la parte editabile in un elemento

Content-related pseudo-elementi

• :before è in grado di aggiungere contenuti prima di un certo elemento
• :after è in grado di aggiungere contenuti, dopo un certo elemento

jQuery: pseudo-selettori CSS3

jQuery permette di usare tutti questi selettori, per esempio:

• :first funziona come :nth-child(1)
• :eq(X) è uguale a :nth-child(X)
• :contains('text')
• :lt(X)come :nth-child(-n+X), seleziona “i primi X elementi”
• :gt(X) è come :nth-child(n+X), seleziona tutto tranne “i primi (X-1) elementi”
• :even è come :nth-child(even) o :nth-child(2n)
• :odd è uguale a :nth-child(odd) o :nth-child(2n+1)
• :has(S) controlla se l’elemento contiene un certo discendente

Oltre a questi ve ne sono molti altri.

Selettori di discendenza

C’è una differenza tra figli e discendenti?

Vediamo come impostare degli stili CSS per capire come funzionano il combinatore figlio diretto, il combinatore fratello adiacente, e il combinatore fratello di pari livello.

Child: combinatore "figlio diretto"

Nel codice sottostante, dichiariamo una discendenza generica (Combinatore del discendente – Descendant), e di seguito, una diretta.

#child  p { color: #000;font-weight:normal; }
#child > p { color: #F00;font-weight:bold; }  

Adjacent sibling: combinatore "fratello adiacente"

Ecco come funziona adjacent sibling: in pratica appica lo stile all’elemento, se e solo se, esso è immediatamente successivo altro elemento indicato.

p + p { font-size: smaller; }
/* Applica lo stile solo al paragrafo che ne segue un altro (adiacente) */
#intro + ul { margin-top: 0; }
/* Applica lo stile solo alla lista che segue direttamente un elemento con  ID intro */

General sibling: combinatore "fratello generico"

General sibling è molto simile ad adiacent sibling: la differenza è che l’elemento che viene selezionato non ha bisogno di essere immediatamente successivo al primo elemento, ma può apparire ovunque dopo di esso. Ecco un esempio di general sibling:

p ~ p { background-color:#0F0; color:#FFF; padding:10px; }

Articoli correlati:

1. CSS3: effetto foto piegata!
2. Tabelle HTML: come usarle, quando usarle
3. CSS3: compatibilità cross-browser…da oggi!

Novità in HTML5

HTML5 introduce nuove caratteristiche per uno sviluppo più facile delle applicazioni web improntate alla multimedialità e una gestione più sofisticata dei form, assieme a una presentazione più semantica del codice: nuovi elementi tag, nuovi input type, nuovi attributi ed eventi, nuove API.
Ecco di seguito una lista di tutte le principali novità e le anteprime:

1. Nuovi elementi HTML5

Elementi strutturali più semantici

• article contrassegna gli articoli di una sezione
• aside delimita informazioni aggiuntive
• footer rappresenta la sezione conclusiva della pagina
• header contiene i contenuti principali eventualmente raggruppati con hgroup
• nav raggruppa gli elementi di navigazione principale
• section distingue le sezioni di un documento, come se fossero capitoli di un libro

e torna nell’HTML, dopo essere stato deprecato dalla versione 4.01, il tag

• menu usato per una specifica lista di comandi

Interattività

• canvas permette il rendering dinamico delle bitmap
• command definisce un command button
• details rappresenta informazioni aggiuntive

Maggiore semantica in pagina e lingue asiatiche

• figure raggruppa elementi multimediali e le loro didascalie
• mark mette in risalto una porzione di testo rilevante
• rp, rt e ruby sono usati per le parentesi e per le annotazioni di Ruby

Multimedialità nativa

• audio consente la riproduzione audio nativa nel browser
• embed inserisce una applicazione esterna
• source specifica più sorgenti di un video o di un audio
• video definisce un video

Form migliorati

• datalist fornisce una sorta di auto-complete
• keygen definisce una coppia di keygen generate
• output rappresenta il risultato di un calcolo

Tempo e unità di misura

• meter definisce le unità di misura
• progress indica lo stato di avanzamento di un compito
• time specifica il formato di una data

Alcuni tag già definiti nella versione 4.01, in HTML5 assumono nuove proprietà. Ecco i principali nel dettaglio:

• il tag a potrà contenere elementi a livello di blocco, è potrà essere privo dell’attributo href, per essere usato come "link placeholder"
• l’elemento address potrà essere applicato a una specifica sezione section o articolo article
• l’elemento b verrà utilizzato solo per rendere il testo più marcato, senza particolari valenze keyword-SEO
• blockquote diventa un elemento sectioning root
• l’elemento dl rappresenta un elenco di associazioni composto da zero o più coppie nome-valore
• i tag h1, h2… possono essere ripetuti all’interno di ogni sezione della pagina
• l’elemento html potrà avere un proprio id
• il tag i verrà usato per indicare il testo da pronunciare con un particolare tono di voce, o testo che appartiene a un linguaggio tecnico, o una frase che nel contesto da cui è presa viene rappresentata con testo "italic"

2. Nuovi input type

Ecco la lista dei campi input si potranno utilizzare con HTML5:

• color
• date
• datetime
• datetime-local
• email
• number
• range
• search
• tel
• time
• url
• week

Articoli correlati:

1. HTML5: tavola degli elementi interattiva!
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. Cosa è HTML5? Ecco una infografica che lo spiega!