Ci siamo lasciati molto tempo fa con un articolo della serie riguardante la strada dalla proposta grafica alla pagina finita. Eravamo arrivati a strutturare la pagina web completa senza immagini di sfondo applicate.
Definiti gli elementi HTML, ora però dobbiamo vestirli. Come già abbiamo visto si tratta di ritagliare con l’ausilio delle slices di Photoshop tutti gli elementi grafici da applicare alle porzioni della pagina tramite CSS. Oggi analizziamo la creazione dell’header che comprende un breve testo di introduzione e solo ed esclusivamente elementi grafici.
Ora gli approcci alla “vestizione” possono essere di due tipi:
Facciamo un po’ di patchwork
Per prima cosa possiamo creare un elemento grafico tramite lo sfondo del tag HTML definito nella struttura. Questo è stato l’approccio classico nello sviluppo di una pagina web senza l’ausilio delle proprietà CSS3 e che tuttora viene utilizzato per quegli elementi che hanno come sfondo una texture complessa o un elemento disegnato.
Lo svantaggio di questo approccio è il fatto di trovarsi spesso nella inevitabile situazione di dover inserire markup aggiuntivo per ottenere certi effetti grafici ottimizzando allo stesso tempo gli elementi HTML.
Un esempio. Se dovessi ricreare lo sfondo qui sotto solo con le immagini dovrei, nel caso più semplice, tagliare l’intera immagine. In questo caso, se per qualsiasi motivo la pagina dovesse diventare fluida, ovvero aumentare o diminuire la sua larghezza a secondo delle dimensioni del browser, la tecnica non sarebbe applicabile.
Nel secondo caso allora potrei dividere l’immagine in 3 pezzi, il blocco iniziale, con il bordo stondato, il blocco finale, con quell’effettino di luce e la parte centrale, con il pattern a righe. Ora il problema sta sul come applicarle all’HTML che è un semplice H2 con all’interno uno span. Una soluzione potrebbe essere applicare lo sfondo a righe all’H2, il primo bordo stondato allo span ed il terzo elemento?
Bhè non mi resta che aggiungere un elemento HTML di appoggio, inutile ai fini del significato semantico per risolvere il problema (mai aggiungere un elemento inutile… perchè?… sarebbe male!). Fortunatamente possiamo risolverla oggi tramite l’ausilio di qualche proprietà CSS3
Invece ora disegnamo
L’approccio con i CSS3 è molto più semplice, con l’enorme svantaggio che ancora tutte le proprietà non sono disponibili su tutti i browser. Chrome ad occhio mi sembra il più avanzato nell’utilizzo delle nuove regole.
Questo implica di dover scendere a dei compromessi sull’adattamento della visualizzazione di un elemento su vari browser e quindi mitigare il loro utilizzo ai soli aspetti grafici che non distruggono l’esperienza utente nel caso non fossero capiti dal browser (parole chiave per approfondimento sono progressive enhancemente e graceful degradation). Gli esempi utilizzati sono stati testati in Firefox 3.6 e Chrome.
Riprendendo la nostra barra possiamo risolvere quasi tutto senza l’utilizzo delle immagini usando solo proprietà CSS.
Nel caso specifico andiamo ad usare dei background multipli per inserire le immagini nello sfondo senza aggiungere markup, minimizzare le dimensioni delle immagini, in più utilizzeremo una text.shadow per aggiungere l’ombra del testo inserito nell’header in modo dinamico (se cambia il testo, non dobbiamo fare nulla).
Come è subito visibile lo svantaggio è quello di dover tradurre le regole nelle corrispettive regole di ogni browser almeno fino a quando esse non saranno approvate come standard CSS.
.logo h2 {
/* ... ometto parte non utile all'esempio */
border-bottom:1px solid #7c0000;
background-color:#b80000;
background-image:url("../images/higlight.png"), url("../images/stripes.png");
background-position: right, top left;
background-repeat: no-repeat, repeat;
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-left-radius:9px;
}
.logo h2 span {
/* ... ometto parte non utile all'esempio */
background:url("../images/gloss-top.png") top left no-repeat;
text-shadow:1px 1px 0 #620000;
}
Il secondo problema in questo caso è come tradurre quello che vedo nel file PSD in una regola CSS. Questo lo vedremo nella prossima puntata analizzando le ombre del testo e le sfumature tramite CSS andando così a terminare i pulsanti di login e la barra nel footer.
Ricordo di nuovo che non tutti i browser vedranno lo stesso risultato e che sta a noi compensare lo scarsa implementazione dei browser con scelte magari meno tecnologiche ma disponibili a tutti.
Per concludere, potete scaricare l’esempio completo, il PSD e godervi la nuova versione della pagina.
