Con questa guida semplice e di rapido apprendimento imparerete come creare progetti gradevoli ed efficaci in modo più facile che mai.
Ogni capitolo presenta esercizi indipendenti che potete integrare nei progetti a cui state lavorando o utilizzare secondo la vostra ispirazione. Imparerete tutte le tecniche CSS3 più diffuse, utili e ben supportate, e anche:
L'autore
Zoe Mickley Gillenwater, grafi co, web designer, sviluppatore e consulente esperta, ama creare siti web in grado di raggiungere il pubblico più ampio possibile, utilizzando al tempo stesso tecniche CSS innovative per i browser più recenti. Ha scritto quasi 100 articoli e tutorial per siti come Smashing Magazine e Community MX e su una varietà di argomenti di web design e sviluppo. Zoe è attualmente membro del Web Standards Project (WaSP) Adobe Task Force ed è stata moderatrice della nota mailing list css-discuss. È relatrice in conferenze negli Stati Uniti su CSS, il visual design e l’accessibilità.
Introduzione
CSS3, l'ultima versione del linguaggio per i fogli di stile del web, è meno improntato alla creazione di nuovi effetti e più rivolto alla realizzazione dei gradevoli effetti di web design a cui siete abituati in fantastici nuovi modi, modi che sono più efficienti e generano risultati più utilizzabili e flessibili rispetto alle tecniche che abbiamo impiegato
nell'ultimo decennio.
CSS3 è ancora in fase di cambiamento ed evoluzione, come lo sono il suo supporto da parte dei browser e la capacità dei web designer di utilizzarlo. CSS3 è in grado di creare effetti sorprendenti, come vedrete in questo libro. Ma se questi effetti non sono pratici per i siti reali, qual è la loro utilità? In questo libro intendo insegnarvi le principali tecniche di CSS che possono migliorare i vostri siti e sono pronte per essere utilizzate subito nei vostri lavori.
Il volume non è un'enciclopedia e neppure una guida di riferimento a CSS3, perciò non ha lo scopo di trattare ogni singola proprietà, selettore e valore nuovo di CSS dalla versione 2.1. Vi insegnerò invece le parti di CSS3 più note, utili e ben supportate tramite una serie di progetti pratici ma innovativi.
Ogni capitolo (dopo il capitolo 1) propone uno o più esercizi basati sulle nuove tecniche di CSS3 per produrre una pagina o una sezione di pagina web finita. Potete adattare questi
esercizi ai vostri progetti oppure utilizzarli come ispirazione per modi completamente diversi in cui usare creativamente le nuove proprietà, selettori e valori che avete imparato.
In un certo senso CSS3 rappresenta un nuovo modo di pensare oltre che un nuovo modo di sviluppare le vostre pagine.
Può essere difficile per esempio pensare a come utilizzare la nuova proprietà borderimage quando realizzate siti web da anni a non siete abituati ad avere l'opzione di utilizzare un'immagine per il bordo di una casella. A questo proposito ho incluso un elenco di idee su come utilizzare ogni proprietà, selettore e valore CSS3 che ho trattato, oltre al modo in cui sono stati utilizzati nell'esercizio. Spero di darvi tutti i necessari spunti su come sfruttare nei vostri progetti le tecniche CSS3 che avete appreso e di trasmettervi il know-how tecnico che vi permette di utilizzare CSS3 con sicurezza ed efficienza.
A chi è rivolto il libro
Questo libro è rivolto a chiunque abbia già esperienza nell'utilizzo di CSS ma desideri migliorare ulteriormente i suoi siti e le sue capacità. Mi baso sul presupposto che conosciate l'HTML e la sintassi e terminologia di CSS, ma non occorre che siate esperti di CSS e certamente non occorre che abbiate alcuna esperienza nell'utilizzo delle funzionalità nuove di CSS3. Sia che abbiate appena iniziato a utilizzare CSS o che sviluppiate siti con CSS da anni, questo libro vi insegnerà nuove e potenti tecniche.
Sommario
Introduzione xiii
A chi è rivolto il libro . . XIV
I file degli esercizi . . . . XIV
Collegamenti XIV
I browser XV
Convenzioni utilizzate nel libro XVI
Nota sulle fonti di informazioni citate XVII
CAPITOLO 1 Panoramica di CSS3 1
Cos'è CSS3? 2
Le novità 2
Il posto di CSS3 4
Utilizzare CSS3 ora 5
Lo stato del supporto dei browser . . . . . . . 6
Quote di mercato dei browser 7
Valutazione del supporto dei principali browser 8
Miglioramento progressivo 11
Vantaggi 11
Mettiamola così... 13
Vantaggi di CSS3 15
Tempi di sviluppo e mantenimento inferiori 16
Migliori prestazioni delle pagine 16
Posizionamento più favorevole nei motori di ricerca . 18
Usabilità e accessibilità migliorate 19
All'avanguardia fra i web designer 19
Caso di studio: Highway Safety Research Center . . . . . . . . 19
Prima di CSS3 20
Dopo CSS3 . . . . 22
VIII Sommario
Utilizzo saggio di CSS3 25
Prefissi indicanti i browser 25
Trattare con i browser privi di supporto 30
Filtrare IE con commenti condizionali 36
Trattare con clienti e capi titubanti . . . . . . . . . . . . . . . . . 41
Non dite tutto . . . . . . . . . . . . . . . . . . . . . 41
Educateli subito al miglioramento progressivo 42
Gestite le aspettative generate dal modello 43
CAPITOLO 2 Testo in stile fumetto 47
La pagina di base . . . . . . . . . . . . . . . . . . . . . . 48
Mandare a capo il testo lungo . . . . . . . . . . 49
Effetti grafici senza grafica 51
Arrotondare gli angoli . . . . . . . . . . . . . . . . . . . . . . 51
Aggiungere la coda del fumetto 55
Sfondi semitrasparenti con RGBA o HSLA 62
Sfumature senza immagini . 72
Ombre riflesse senza immagini 81
Ombre del testo senza immagini . . . . . . . . . . . . . . . 85
Trasformare i personaggi . . . . . . . . . . . . . . 89
Cosa sono le trasformazioni? 89
Rotazione dei personaggi . . . 92
La pagina terminata 96
CAPITOLO 3 Effetto blocco note 99
La pagina di base . . . . . . 100
Oltre lo sfondo di base 101
Scalare l’immagine di sfondo 101
Più immagini di sfondo in un solo elemento . . . . . . . 109
Aggiungere un bordo grafico 114
Aggiungere un’ombra riflessa 125
Incorporare font esclusivi 126
Cos’è @font-face? 127
Scegliere font accettabili 128
Supporto dei browser . . . . . . . . . . . . . . . . . 134
Convertire i font 135
Utilizzare @font-face 137
CAPITOLO 4 Stilizzare le immagini e i collegamenti
in base al tipo 149
La pagina di base . . . . . . . . 150
Cosa sono i selettori di attributo? 151
Indicare i tipi di file con icone aggiunte dinamicamente 153
Idee alternative per le icone 156
Correggere IE 6 157
Stilizzare in modo diverso le foto
a dimensioni piene e le miniature 160
Il problema delle classi 160
Utilizzare i selettori di attributo
per selezionare il tipo 164
La pagina terminata 165
CAPITOLO 5 Migliorare l'efficienza utilizzando
le pseudo-classi 167
Selezionare elementi specifici senza utilizzare ID o classi 168
Nuove pseudo-classi strutturali . . 169
Nuovi interventi sui fumetti: colori alterni . . . . . . . . . . 171
Nuovi interventi sulle foto: rotazione casuale 176
Evidenziare dinamicamente le sezioni di pagina 180
La pseudo-classe :target 181
Aggiungere il sommario . . . . . 182
Cambiare il colore di sfondo della sezione di arrivo 188
Animare il cambiamento con puro CSS . 191
CAPITOLO 6 Design diversi per varie dimensioni di schermo 205
La pagina di base . . 206
Cosa sono le media query? 208
Cambiare il layout per gli schermi di grandi dimensioni . . . 209
Dalla barra di navigazione orizzontale al menu verticale 213
Testo su più colonne 214
Cambiare il layout per gli schermi di piccole dimensioni 220
Cambiare il layout per i dispositivi mobili . . . . . . . . . . . . 226
Cos'è la larghezza di dispositivo? 227
La terza media query 228
Migliorare l'aspetto sugli schermi ad alta risoluzione . . 233
Il tag meta del viewport 235
Soluzioni ad hoc per i browser privi di supporto 240
La pagina terminata 241
CAPITOLO 7 Layout 243
Cambiamenti all'orizzonte 244
Creare layout a più colonne senza float
o posizionamento 245
Rendere flessibili i blocchi 248
Aggiungere colonne 253
Riordinare le colonne 255
Colonne della stessa altezza . . . . . . . . . . . . . . . . . 258
Centrare verticalmente e orizzontalmente 261
Confronto con la realtà: cosa funziona adesso 266
Layout a form flessibili 268
Piè di pagina "adesivi" . . . . . . . . . . . . . . . . . . . . . 272
Alternative al modello dei box flessibili 277
La proprietà box-sizing . 277
Futuri sistemi di layout 284
APPENDICE A Support dei browser 287
Conclusioni 289
Indice analitico 291
Crediti 301
