I css (Cascading Style Sheet) hanno un ruolo fondamentale nel campo del web design, viene considerato il linguaggio di stile che ha trasformato l’HTML in qualcosa di veramente straordinario, infatti, i CSS Sono stati progettati per facilitarci e migliorarci la vita, per quanto riguarda lo sviluppo del codice HTML perchè consentono di gestire i contenuti in modo più semplice. Il codice della pagina risulta più leggero, pulito e leggibile e offre un maggiore controllo su ciò che andiamo a realizzare, anche se tutto ciò potrebbe spaventare un principiante CSS.
Ecco una selezione dei più importanti trucchi, suggerimenti, scorciatoie e risorse!
1= Immagini di sfondo
Nei progetti di web design le immagini di sfondo sono fondamentali e l’aggiunta al tag body è una passeggiata, basta indicare nel Css un selettore (ad Es. il tag Body) e al suo interno inserire la seguente sintassi ricordandoci che possiamo decidere di inserire un colore di sfondo, un’immagine, dichiarare se lo sfondo si deve ripetere o meno ed eventualmente la posizione dello sfondo all’interno dell’elemento:
body { background-color: #000; background-image: url (“posizione-dell-immagine/nome-immagine.jpg”); background-repeat: no-repeat; background-position: 0 0; }
oppure utilizzando la sintassi compressa:
body { background: #000 url (“posizione-dell-immagine/nome-immagine.jpg”) no-repeat 0 0; }
2= Stile del testo
I CSS vengono spesso sfruttati per applicare lo stile al testo, basta quindi creare una nuova classe, assegnarle un nome, scegliere un font, uno stile, un’interlinea, un colore e il gioco è fatto.
Consiglio ovviamente di pianificare in anticipo la scelta dei font e assicuratevi di scegliere un font presente tra quelli predefiniti nei vari sistemi operativi, per esempio Georgia, Verdana, Arial, così da evitare che venga sostituito.
.font-titolo { font-family: Georgia, Verdana, Arial, Helvetica, “Times New Roman”;
color: #000;
font-size: 15px;
line-height: 20px;
font-weight: normal;
font-style:normal; }
3= Hyperlink personalizzati
Per favorire la navigazione è fondamentale aggiungere a tutti i collegamenti del nostro sito uno stile che li differenzia dal resto del testo ed è consigliabile applicare lo stesso stile a tutti i collegamenti differenziandoli nei diversi stati, ossia lo stato “normale” e lo stato di “hover” dichiarando la relativa sintassi:
a { color: #ff0000; text-decoration:none; }
a:hover { color: #ff00ff; text-decoration:underline; }
4= Stile dei titoli
Per controllare i titoli potete usare i CSS per stabilire lo stile di ciascun tag.
Il tag h1 deve avere una dimensione di font maggiore rispetto a h2, h3, h4, le cui dimensioni decrescono man mano.
Basta determinare la dimensione del font cosi: h1 { font-size: 25px; }, h2 { font-size: 22px; } e così via. Per un titolo in grassetto con il font “Georgia” dovete aggiungere font-family: Georgia; font-weight: bold; e se tutti i titoli hanno lo stesso font potete raggrupparli in questo modo:
h1, h2, h3, h4, h5, h6 { font-family: Georgia; }
h1 { font-size: 25px; font-weight: bold; }
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
5= Scorciatoie CSS
Spesso, sopratutto all’inizio della propria carriera di web designer si utilizzano programmi di editing tipo: Adobe Dreamweaver (Ottimo strumento da cui partire) ma che come impostazione predefinita quando si crea un nuovo documento aggiunge il ‘Layout CSS’ di un nuovo documento alla sezione head della pagina.
Questo significa che il CSS è relativo solo alla pagina corrente e non all’intero sito, percui è assolutamente cosigliato creare un foglio di stile esterno ad esempio “style.css” ed incorporatelo all’interno di tutte le nostre pagine HTML.
Il nostro foglio di style esterno dovrà essere incorporato all’interno dei tag <head> </head> con la seguente sintassi:
<link rel= “stylesheet” href= “percorso-del-file/style.css” type= “text/css” />
6= Gestire i bordi
L’aggiunta di un bordo ad un DIV aumenterà la larghezza e altezza del DIV associato.
Se ad esempio usate un bordo di 1pixel, l’altezza e la larghezza del DIV aumenteranno di 2 pixel ciascuna perchè il bordo sarà esteso sul 4 lati. Poiché questo influisce sul layout della pagina, la dimensione del DIV deve essere regolata di conseguenza per assicurarsi che la sua dimensione originale non cambi.
Per esempio, se il DIV originale è largo 100 pixel e alto 50 pixel, l’aggiunta di un bordo di 1 pixel lo porterà a 102 x 52.
Per fare in modo che conservi la dimensione originale dovete ridimensionarlo a 98 x 48 che con l’aggiunta di 1px di bordo otterrete la dimensione iniziale.
7= Scrittura stenografica CSS
I CSS standard hanno diversi aspetti positivi, tra cui aggiornamenti rapidi e codice leggero, tuttavia, l’uso della scrittura del codice CSS può migliorare ulteriormente adottando alcune accortezze.
Normalmente il codice CSS siamo sempre stati abituati a scriverlo in questo modo:
#header { background-color: #FFFFFF; background-image: url (“background.gif”); background-repeat: no-repeat; }
ma se utilizziamo la sintassi abbreviata come riportato sotto risulterebbe più semplice, veloce e leggero:
#header { background: #FFF url (“background.gif”) no-repeat; }
8= Effetto fotografico
Una semplice tecnica CSS che applica a un’immagine, con ad esempio la classe .photo-border, lo stile di una fotografia con un bordo bianco.
.photoborder {
padding: 4px; /*Applica all’elemento una spazio compreso tra l’elemento e il bordo di 4px su tutti i lati */
boder: 1px solid #ff0000; /*Dichiaro la dimensione, lo stile ed il colore del bordo */
}
9= Padding e Margin
Se qualcuno non avesse ancora chiaro la differenza tra padding e margin andiamo subito a chiarire ogni dubbio.
Il Padding è la distanza che separa l’elemento dal suo bordo, mentre il margin è la distanza che separa il bordo dell’elemento dall’esterno.
Supponendo di avere un’immagine con un bordo distante dall’immagine di 2pixel andremo a scrivere:
.img-border { border: 1px solid #ff0000; padding: 2px; }
Ma se le immagini fossero due, una accanto all’altra, in questo modo i bordi sarebbero perfettamente attaccati, mentre se noi andiamo ad aggiungere anche un margin di 15px allora i bordi delle immagini sarebbero distanziati del valore che gli abbiamo assegnato. Scriveremo così una sintassi di questo tipo:
.img-border {
border: 1px solid #ff0000; /* Il bordo sarà applicato su tutti e 4 i lati */
padding: 2px; /* Il padding sarà applicato su tutti e 4 i lati */
margin: 15px; /* Il margin sarà applicato su tutti e 4 i lati */
}
A questo punto la domanda che sorge spontanea porsi è: Come è possibile applicare un bordo, un padding o un margin ad un singolo lato?
Prendendo come esempio il padding se si desidera che venga applicato a tutti e 4 i lati possiamo utilizzare la seguente sintassi nella forma contratta o standard:
.img-border { padding: 4px; } /* Forma contratta */
oppure
.img-border { padding: 4px 4px 4px 4px; } /* Forma standard */
altrimenti è possibile specificare la dimensione di ogni singolo lato sempre nelle due forme:
.img-border { padding: 4px 10px 3px 2px; } /* Forma contratta */
oppure
.img-border { padding-top: 4px; padding-right:10px; padding-bottom:3px; padding-left:2px; } /* Forma standard */
Ovviamente questa tipologia di sintassi è applicabile per tutte le regole
10= Compatibilità con l’iPhone
Quando realizzate un progetto specifico per l’iPhone, dovete prendere in considerazione alcuni fatti.
Lo schermo di un iPhone è largo 320 pixel e alto 356 pixel, ma il browser Safari di Apple ha una finestra predefinita di 980 pixel. Questo significa che Safari non visualizzerà la pagina nel modo corretto, ma la ridurne a circa un terzo dello schermo dell’iPhone, rendendola praticamente illeggibile.
Per non avere problemi con l’iPhone, aggiungete alla sezione head della pagina il seguente codice:
<meta-name=”viewport” content=”width=320″>
11= Immagini scalabili
Esiste una tecnica CSS che permette di scalare le immagini. Create una classe nel nostro file.css,
Aggiungete le dimensioni dell’immagine, espresse in em ( un em sono circa 16 px, quindi 10 em sono 160 px). Le misure scelte determinano la dimensione predefinita.
Selezionate un’immagine, applicate la classe, visualizzate anteprima nel browser e regolate la dimensione del testo principale così che l’immagine venga scalata in proporzione perchè appunto se viene dichiarata una dimensione di partenza in em è relativa alla dimensione principale del testo del sito.
.scale-img { height: 8em; width: 12em; }
12= Angoli arrotondati
Nell’era del Web 2,0 gli angoli arrotondati sono diventati una moda perchè è sufficiente applicare la smussatura direttamente via codice senza dover creare tutte le immagini ad hoc che rallentano il caricamento, e CSS3 include la proprietà border-radius che consente la loro creazione.
Attualmente però la proprietà è supportata solo da Mozilla Firefox e Safari.
Per il supporto in Firefox viene aggiunto il prefisso -moz, mentre per Safari si usa il prefisso -webkit. Per aggiungere gli angoli arrotondati a un tag div, assegnate la classe e inserite quanto segue:
.angoli-arrotondati { -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; }
Per ottenere angoli più acuti o più arrotondati, cambiate il raggio.
13= Famiglia di font
Come si pèuò creare una famiglia di font?
Viene spesso consigliato di creare un’unica famiglia di font ed applicarla all’intero sito dichiarandola nel nostro css al tag body con il vantaggio di dichiararli una volta per tutte, eventualmente se abbiamo bisogno di usare qualche altro font in alcuni elementi particolari come ad esempio il menu possiamo creare una regola apposita nel menu.
body{ font-family: Georgia, “Times New Roman”, Times, serif; /*questo è il set di font usato, dove Georgia è la prima scelta. Se non è disponibile, entra in azione Times New Roman, che è molto simile */
font-size: 24px; /*questa è la dimensione del font*/
color: #996600; /*questo è il colore del font*/
}
14= Giocare con le percentuali
Esistono diverse risoluzioni per gli schermi: dalla normale larghezza di 1.024 pixel fino ai widescreen che possono superare i 1.900 pixel. Una soluzione semplice e indolore consiste nell’usare le percentuali al posto della larghezza fissa.
Se cercate un tag header che occupi tutto lo schermo, impostate la larghezza su 100%. Per compensare un header cosi esteso, usate un’immagine di sfondo e ripetetela orizzontalmente per tutto l’header.
In alternativa, sfruttate un colore di sfondo a tinta unita.
.header { width: 100%; background: #ff0000 url(“percorso-dell-immagine/nome-dell-immagine.jpg” ); }
15= Effetti di rollover
La creazione di un effetto di rollover consente di mettere in risalto il collegamento corrente. Un effetto web molto popolare consiste nel realizzare un rollover che cambia il colore del testo e aggiunge un colore di sfondo. Questo lavoro viene svolto dal tag a.
a {color: #999999;}
e potrete così determinare il colore del testo del collegamento, in questo esempio grigio scuro.
Inserite a:hover (v. sotto) e il colore del testo diventerà bianco con uno sfondo grigio scuro, invertendo i colori del collegamento quando il cursore viene posizionato sul testo, ovviamente potete scegliere i colori che più si adattano al design della pagina.
a:hover {color: #FFFFFF; background-color: #999999; }
16= Pagine centrate
Le pagine web centrate consentono di assicurarsi che una pagina sia perfetta per tutte le risoluzioni, e fortunatamente è un obiettivo semplice da raggiungere.
Usate ad esempio un div con id #wrapper e impostate i margini sinistro e destro su automatico.
Il div #wrapper può avere una larghezza fissa o variabile (percentuale).
#wrapper { width: 500px; height: 300px; margin:auto; background:#ff0000; }
17= Colori CSS
I colori CSS vengono comunemente definiti dal codice esadecimale, per esempio #336699, tuttavia, tutti i principali browser supportano anche un elenco di nomi di colori.
Tale elenco è reperibile all’indirizzo http://riemann.unica.it/studenti/guida/colori.html
Invece di inserire il codice esadecimale, basta aggiungere il nome, per esempio:
body { font-family: Georgia, “Times New Roman”, Times, serif; font-size: 16px; color: orange; }
18= Valori predefiniti
Come valore di default di pagina web la maggior parte degli elementi assumono una formattazione standard imposta dal browser come ad esempio i titoli (hanno un padding, un margin, una dimensione e uno stile del testo prestabilito), ma anche i paragrafi, i link, le liste ecc ecc, quindi se dobbiamo creare un template ad hoc è cosa importante andare ad azzerare questo tipo di formattazione standard per poi andarla a dichiarare secondo le nostre necessità (tecnica CSS molto semplice e usata regolarmente da molti designer).
Prendendo in esempio il titolo h1, andiamo ad eliminare la formattazione standard intervenendo su: padding, margin, interlinea , dimensione del font ( possiamo poi ripetere la stessa cosa per tutti gli altri titoli h2, h3, h4, h5, h6 ricordandoci però che le dimensioni dei titoli devono essere progressive in base all’importanza, quindi, se il tag h1 ha una dimensione di 20px il tag h2 deve avere una dimensione inferiore e così via per questioni di correttezza di scrittura del codice)
h1 { font-size: 24px; line-height:28px; padding:0; margin:0; font-weight: normal; font-style: normal; }
h2 { font-size: 22px; line-height:26px; padding:0; margin:0; font-weight: normal; font-style: normal; }
h3 { font-size: 20px; line-height:24px; padding:0; margin:0; font-weight: normal; font-style: normal; }
h4 { font-size: 18px; line-height:22px; padding:0; margin:0; font-weight: normal; font-style: normal; }
h5 { font-size: 16px; line-height:20px; padding:0; margin:0; font-weight: normal; font-style: normal; }
h6 { font-size: 14px; line-height:18px; padding:0; margin:0; font-weight: normal; font-style: normal; }
Ecco, in questo modo abbiamo eliminato la formattazione dei titoli imposta dal browser, azzerando tutti i valori di default per dichiararli a nostro piacimento, ma possiamo fare la stessa cosa per i paragrafi, le liste, ecc.
Possiamo inoltre fare una cosa molto più intelligente che ci semplicifa la vita e rende il codice più leggero, ossia, nel linguaggio CSS è presente un selettore che si riferisce a qualsiasi elemento del nostro sito, ossia il catarrere “*”
Infatti se noi inseriamo la suguente sintassi:
*{ margin:0; padding:0; }
dichiariamo che a qualsiasi elemento del nostro sito verrà elimanata la formattazione standard di margin e padding perchè appunto abbiamo dichiarato che corrispondono a “0″ per poi dichiararle altrove a nostro piacimento.
19= Lettura a “Cascata”
il codice Css ha la particolarità che viene letto a “cascata” dall’alto verso il basso e una regola dichiarata può essere tranquillamente sovrascritta se la stessa viene dichiarata in una posizione inferiore (Scoprirete col tempo che questa cosa potrebbe tornarvi molto utile).
Supponiamo quindi che il tag h1 viene specificato alla riga n. 1 dichiarando che il font è grande 24px e il suo colore è arancione:
h1{ font-size: 24px; color: orange; }
questa regola è relativa a tutti gli h1 presenti nel nostro sito web, ma se alla riga 10 dichiariamo che lo stesso h1 è di colore rosa:
h1{ color: pink; }
noteremo infatti che il valore font-size verrà preso in considerazione mentre il colore verrà sovrascritto con l’ultimo perchè si trova in una posizione inferiore.
20= Giocare col testo
Grazie a line-height e letter-spacing potete modificare il testo in diversi modi.
Line-height stabilisce la distanza tra le righe, letter-spacing imposta lo spazio vuoto tra i caratteri.
Usate un numero in pixel (es. 15px) per impostare un’interlinea con altezza fissa o em (es. 1em) per una maggiore flessibilità perchè variabile dalla dimensione generale espressa ad esempio nel tag body.
E’ possibbile effettuare la stessa identica cosa per stabilire la distanza tra i caratteri di una singola parola usando la sintassi letter-spacing. Guardiamo un esempio riassuntivo:
.testo { line-height:15px; letter-spacing: 1px; }
oppure
.testo { line-height: 1em; letter-spacing: 0,6em; }
21= Dimensioni fisse
A volte un contenuto troppo grande, per esempio un’immagine, viene inserito in un contenitore a larghezza fìssa con dimensioni inferiori e in questo modo il contenuto verrà visualizzato esternamente al contenitore, rovinando così il layout della pagina.
Per impedire che questo accada, aggiungete la riga di codice sottostante, che nasconde qualsiasi contenuto eccedente i limiti e preserva il layout della pagina.
.nascondi-contenuto { overflow: hidden; }
22= Addio barre di scorrimento { Overflow:auto; }
Questo suggerimento è specifico per Internet Explorer e il tag textarea. Il browser di Microsoft aggiunge automaticamente una barra di scorrimento verticale a destra che viene costantemente mostrata.
Per eliminare lo scorrimento e ripulire l’area di testo, aggiungete al CSS il codice sottostante così la barra di scorrimento apparirà solo quando il testo eccede l’area di testo definita.
textarea { width: 400px; height:100px; overflow:auto; }
23= Cursori intelligenti
Il cursore standard di una pagina web è stato progettato in modo da cambiare quando posizionato sopra determinati elementi, come per esempio un link.
Per definire un cursore standard, per esempio a croce, aggiungete cursor: crosshair ma potete utilizzarne di svariati tipi.
Vediamo le diverse opzioni di puntatore che possiamo assegnare per esempio ad un link con classe cursore:
a.cursore { cursor: default; } /* visualizza semplicemente la classica freccia */
a.cursore { cursor: pointer; } /* visualizza la “manina” (che già troviamo di default nei link) */
a.cursore { cursor: crosshair; } /* visualizza una croce “+” */
a.cursore { cursor: text; } /* visualizza il simbolo di scrittura */
24= Allineamento immagine a sinistra con spaziatura
Spesso capita di inserire un’immagine allineata a sinistra con a fianco del testo che continua sotto, ma se non utilizziamo la sintassi corretta da applicare all’immagine l’effetto non sarà come ce lo aspettiamo.
Supponendo di creare lo stesso effetto ottenuto nell’esempio occorre applicare all’immagine una classe con un’allineamento a sinistra e un margin che servirà a distanziare l’immagine dal testo:
.immagine { float: left; margin: 0 15px 15px 0; }
oppure
.immagine { flota:left; margin-top: 0; margin-right: 15px; margin-bottom:15px; margin-left:15px; }
25= Media type
Spesso ci capita la necessità di inserire un foglio di stile ulteriore per la stampa oltre a quello per il web, questa è un operazione semplicissima da eseguire, basta specificare al momento dell’inclusione del nostro foglio di stile nella pagine HTML all’interno dei tag <head> </head> il parametro Media (media=”screen” per il web e media=”print” per la stampa). Ma vediamo subito come includerli correttamente:
<head>
<link type=”text/css” href=”percorso-del-file/style.css” rel=”stylesheet” media=”screen” />
<link type=”text/css” href=”percorso-del-file/print.css” rel=”stylesheet” media=”print” />
</head>
26= Eliminare i bordi delle immagini collegate
L’aggiunta di un collegamento a un’immagine implica di default (v.sopra) l’inserimento di un bordo indesiderato del colore del collegamento che è tranquillamente possibile eliminare, facendo in modo che i collegamenti delle immagini non avranno bordi. Per eliminarlo aggiungere il codice:
img { border: none; }
27= Ombreggiatura
Con i CSS3 è stata introdotta la possibilità di attribuire ad un qualsiasi elemento come un’immagine o un DIV un’ombra sfumata (supportata da tutti i browser ad eslusione dell’odioso Internet Explorer) con la possibilità di impostarne i parametri.
Occorre speficare un’unica proprietà (in due versioni per la compatibilità con i vari browser) impostando i parametri di ombreggiatura verticale ed orizzontale, il raggio di sfocatura e il colore dell’ombra.
img-sfumata { -moz-box-shadow: 5px 5px 7px #888; -webkit-box-shadow: 5px 5px 7px #888; }
Impostate e cambiate i parametri facendo varie prove di dimensione, colore e raggio di sfocatura dell’ombra per ottenere l’effetto che più vi piace.
28= Commenti CSS
L’aggiunta di commenti al codice CSS è un’operazione molto semplice ma che si può rivelare estremamente utile. La sintassi per inserire un commento è: /* Inserisci qui il tuo commento */ può essere inserito prima di una regola, all’interno di una regola e può anche occupare più righe. Ma vediamo subito come sfruttare al meglio i commenti:
Inserire i commenti per suddividere le sezioni (molto utile quando avremo a che fare con svariare regole)
/* Area Header */
#header { background-color:#00233f; position:relative; }
#header h1 { display:block; padding:3px; margin:26px; width:132px; height:48px; }
/* Area Content */
#content { background-color:#ff0000; position:relative; }
#content a { display:block; padding:10px; margin:6px; width:32px; height:48px; color:#000; }
Inserire un commento per rendere invisibile una regola senza cancellarla (molto utile in fase di test)
#header { background-color:#00233f; position:relative; /* margin: 15px; padding: 5px; */ }
Inserire un commento per lasciare un appunto
#header { background-color:#00233f; position:relative; } /* Regola valida solo per IE6 */
30= Testo accessibile
I pixel sono spesso la scelta preferita perché offrono una larghezza fissa. Tuttavia, per una maggiore flessibilità, l’unità di misura em è una valida alternativa.
Per impostare la dimensione di testo predefinita, aggiungete il seguente codice:
body { font-size:100%; }
In questo modo impostate la dimensione predefinita su 16px, quindi per fare in modo che la dimensione predefinita sia di 12 px dovete inserire 75%.
Ora il testo impostato su 1 em rappresenterà la dimensione predefinita.
31= Elenchi stravaganti
Per impostazione predefinita, agli elenchi non ordinati viene aggiunto di default un puntino per ogni voce, che, può assumere varie forme come un cerchio, un quadrato e così via.
Tali puntini possono essere sostituiti con un’immagine personalizzata a piacere eliminando il carattere inserito di default e aggiungendo al tag li il seguente codice:
li { list-style: none; background-image: url (“percorso-dell-immagine/file.jpg”); background-repeat: no-repeat ;
Usate il padding e il background-position per regolare la posizione dell’immagine personalizzata.
32= Siti di riferimento
Voglio infine mettere a disposizione una libreria di siti esterni dove potere approfondire, esplorare e condividere tutto quello che può offrire il magico mondo dei CSS
CSS Zen Garden
Non posso non citare questo straordinario sito che altro non è che una galleria CSS.
Il suo funzionamento è molto semplice: i designer vengono invitati a scaricare un modello HTML standard che possono riprogettare con il proprio codice CSS e inviare a Zen Garden.
Se accettato (anche se il giudizio è molto severo), il vostro design verrà aggiunto all’illustre archivio! www.csszengarden.com
CSS3.info
CSS3 sta lentamente muovendo i primi passi nella comunità degli standard, e sta ricevendo un grande supporto dai principali browser di prossima generazione.
Se volete portarvi avanti e iniziare a scoprire nuovi elementi, attributi e proprietà, questo sito è il posto perfetto.
Non solo offre ai visitatori la possibilità di visualizzare il codice, ma fornisce anche alcune implementazioni visionabili nei browser compatibili, mentre un pratico CSS Selecton Test vi permette di stabilire il livello di compatibilità. www.css3.info/preview/ 
CSS Drive
Ciò che rende questo sito particolarmente interessante è che tutte le voci sono divise per categoria. Quindi, se volete trovare esempi di straordinari layout a due e tre colonne, progetti di impatto, menu di navigazione e modelli sperimentali, non dovete fare altro che cercare la corrispondente. www.cssdrive.com
An Event Apart
Il sito è una celebrazione di straordinari progetti realizzati secondo gli standard, ed è stato creato dal padrino dei CSS Eric Meyer e dal fondatore di A List Apart, Jeffrey Zeldman, che hanno scritto importanti libri e diffuso “il verbo” nella comunità.
Purtroppo le prossime date sono tutte negli Stati Uniti (Seattle, Boston e San Francisco), ma siete ancora in tempo per iscrivervi. http://aneventapart.com
CSS Play
CSS Play, Il cui scopo è quello di promuovere esperimenti con i cascading style sheet, ha una sezione straordinaria. Demos, in cui sono presenti numerosi collegamenti a idee di design di cui è possibile consultare e studiare il codice sorgente. Se il vostro desiderio è quello di realizzare semplici animazioni, gallerie fotografiche, puzzle game e altre creazioni basate sui CSS, questo è il sito che fa per voi. www.cssplay.co.uk
Carbonica
Questo sito basato sui CSS è stato progettato da Creative Jar, e ho scelto di inserirlo come esempio di stile in voga di questi tempi. Carta strappata, texture di tipo tessuto, colori terra, dettagli grafici fatti a mano e immagini vettoriali a tinta unita sono assolutamente di moda, e questo sito è perfetto per rendere l’idea. www.carbonica.org 
Design Disease
Questo sito mostra in modo elegante tutto ciò che si può realizzare con i CSS.
Schemi di colore armoniosi, layout semplici, immagini ben posizionate, rollover perfetti, per non parlare dell’integrazione con WordPress, tutto in un unico sito. Questo e altri siti simili aiuteranno a ricordarvi che quando si tratta di realizzare un progetto attraente e basato sugli standard. Flash non è l’unica soluzione. http://designdisease.com
Le grande guida all’utilizzo delle migliori tecniche Css
I css (Cascading Style Sheet) hanno un ruolo fondamentale nel campo del web design, viene considerato il linguaggio di stile che ha trasformato l’HTML in qualcosa di veramente straordinario, infatti, i CSS Sono stati progettati per facilitarci e migliorarci la vita, per quanto riguarda lo sviluppo del codice HTML perchè consentono di gestire i contenuti in modo più semplice. Il codice della pagina risulta più leggero, pulito e leggibile e offre un maggiore controllo su ciò che andiamo a realizzare, anche se tutto ciò potrebbe spaventare un principiante CSS.
Ecco una selezione dei più importanti trucchi, suggerimenti, scorciatoie e risorse!
1= Immagini di sfondo
Nei progetti di web design le immagini di sfondo sono fondamentali e l’aggiunta al tag body è una passeggiata, basta indicare nel Css un selettore (ad Es. il tag Body) e al suo interno inserire la seguente sintassi ricordandoci che possiamo decidere di inserire un colore di sfondo, un’immagine, dichiarare se lo sfondo si deve ripetere o meno ed eventualmente la posizione dello sfondo all’interno dell’elemento:
oppure utilizzando la sintassi compressa:
2= Stile del testo
I CSS vengono spesso sfruttati per applicare lo stile al testo, basta quindi creare una nuova classe, assegnarle un nome, scegliere un font, uno stile, un’interlinea, un colore e il gioco è fatto.
Consiglio ovviamente di pianificare in anticipo la scelta dei font e assicuratevi di scegliere un font presente tra quelli predefiniti nei vari sistemi operativi, per esempio Georgia, Verdana, Arial, così da evitare che venga sostituito.
3= Hyperlink personalizzati
Per favorire la navigazione è fondamentale aggiungere a tutti i collegamenti del nostro sito uno stile che li differenzia dal resto del testo ed è consigliabile applicare lo stesso stile a tutti i collegamenti differenziandoli nei diversi stati, ossia lo stato “normale” e lo stato di “hover” dichiarando la relativa sintassi:
4= Stile dei titoli
Per controllare i titoli potete usare i CSS per stabilire lo stile di ciascun tag.
Il tag h1 deve avere una dimensione di font maggiore rispetto a h2, h3, h4, le cui dimensioni decrescono man mano.
Basta determinare la dimensione del font cosi: h1 { font-size: 25px; }, h2 { font-size: 22px; } e così via. Per un titolo in grassetto con il font “Georgia” dovete aggiungere font-family: Georgia; font-weight: bold; e se tutti i titoli hanno lo stesso font potete raggrupparli in questo modo:
5= Scorciatoie CSS
Spesso, sopratutto all’inizio della propria carriera di web designer si utilizzano programmi di editing tipo: Adobe Dreamweaver (Ottimo strumento da cui partire) ma che come impostazione predefinita quando si crea un nuovo documento aggiunge il ‘Layout CSS’ di un nuovo documento alla sezione head della pagina.
Questo significa che il CSS è relativo solo alla pagina corrente e non all’intero sito, percui è assolutamente cosigliato creare un foglio di stile esterno ad esempio “style.css” ed incorporatelo all’interno di tutte le nostre pagine HTML.
Il nostro foglio di style esterno dovrà essere incorporato all’interno dei tag <head> </head> con la seguente sintassi:
6= Gestire i bordi
Se ad esempio usate un bordo di 1pixel, l’altezza e la larghezza del DIV aumenteranno di 2 pixel ciascuna perchè il bordo sarà esteso sul 4 lati. Poiché questo influisce sul layout della pagina, la dimensione del DIV deve essere regolata di conseguenza per assicurarsi che la sua dimensione originale non cambi.
Per esempio, se il DIV originale è largo 100 pixel e alto 50 pixel, l’aggiunta di un bordo di 1 pixel lo porterà a 102 x 52.
Per fare in modo che conservi la dimensione originale dovete ridimensionarlo a 98 x 48 che con l’aggiunta di 1px di bordo otterrete la dimensione iniziale.
7= Scrittura stenografica CSS
I CSS standard hanno diversi aspetti positivi, tra cui aggiornamenti rapidi e codice leggero, tuttavia, l’uso della scrittura del codice CSS può migliorare ulteriormente adottando alcune accortezze.
Normalmente il codice CSS siamo sempre stati abituati a scriverlo in questo modo:
ma se utilizziamo la sintassi abbreviata come riportato sotto risulterebbe più semplice, veloce e leggero:
8= Effetto fotografico
Una semplice tecnica CSS che applica a un’immagine, con ad esempio la classe .photo-border, lo stile di una fotografia con un bordo bianco.
9= Padding e Margin
Il Padding è la distanza che separa l’elemento dal suo bordo, mentre il margin è la distanza che separa il bordo dell’elemento dall’esterno.
Supponendo di avere un’immagine con un bordo distante dall’immagine di 2pixel andremo a scrivere:
Ma se le immagini fossero due, una accanto all’altra, in questo modo i bordi sarebbero perfettamente attaccati, mentre se noi andiamo ad aggiungere anche un margin di 15px allora i bordi delle immagini sarebbero distanziati del valore che gli abbiamo assegnato. Scriveremo così una sintassi di questo tipo:
A questo punto la domanda che sorge spontanea porsi è: Come è possibile applicare un bordo, un padding o un margin ad un singolo lato?
Prendendo come esempio il padding se si desidera che venga applicato a tutti e 4 i lati possiamo utilizzare la seguente sintassi nella forma contratta o standard:
altrimenti è possibile specificare la dimensione di ogni singolo lato sempre nelle due forme:
Ovviamente questa tipologia di sintassi è applicabile per tutte le regole
10= Compatibilità con l’iPhone
Quando realizzate un progetto specifico per l’iPhone, dovete prendere in considerazione alcuni fatti.
Lo schermo di un iPhone è largo 320 pixel e alto 356 pixel, ma il browser Safari di Apple ha una finestra predefinita di 980 pixel. Questo significa che Safari non visualizzerà la pagina nel modo corretto, ma la ridurne a circa un terzo dello schermo dell’iPhone, rendendola praticamente illeggibile.
Per non avere problemi con l’iPhone, aggiungete alla sezione head della pagina il seguente codice:
11= Immagini scalabili
Esiste una tecnica CSS che permette di scalare le immagini. Create una classe nel nostro file.css,
Aggiungete le dimensioni dell’immagine, espresse in em ( un em sono circa 16 px, quindi 10 em sono 160 px). Le misure scelte determinano la dimensione predefinita.
Selezionate un’immagine, applicate la classe, visualizzate anteprima nel browser e regolate la dimensione del testo principale così che l’immagine venga scalata in proporzione perchè appunto se viene dichiarata una dimensione di partenza in em è relativa alla dimensione principale del testo del sito.
12= Angoli arrotondati
Nell’era del Web 2,0 gli angoli arrotondati sono diventati una moda perchè è sufficiente applicare la smussatura direttamente via codice senza dover creare tutte le immagini ad hoc che rallentano il caricamento, e CSS3 include la proprietà border-radius che consente la loro creazione.
Attualmente però la proprietà è supportata solo da Mozilla Firefox e Safari.
Per il supporto in Firefox viene aggiunto il prefisso -moz, mentre per Safari si usa il prefisso -webkit. Per aggiungere gli angoli arrotondati a un tag div, assegnate la classe e inserite quanto segue:
Per ottenere angoli più acuti o più arrotondati, cambiate il raggio.
13= Famiglia di font
Come si pèuò creare una famiglia di font?
Viene spesso consigliato di creare un’unica famiglia di font ed applicarla all’intero sito dichiarandola nel nostro css al tag body con il vantaggio di dichiararli una volta per tutte, eventualmente se abbiamo bisogno di usare qualche altro font in alcuni elementi particolari come ad esempio il menu possiamo creare una regola apposita nel menu.
14= Giocare con le percentuali
Esistono diverse risoluzioni per gli schermi: dalla normale larghezza di 1.024 pixel fino ai widescreen che possono superare i 1.900 pixel. Una soluzione semplice e indolore consiste nell’usare le percentuali al posto della larghezza fissa.
Se cercate un tag header che occupi tutto lo schermo, impostate la larghezza su 100%. Per compensare un header cosi esteso, usate un’immagine di sfondo e ripetetela orizzontalmente per tutto l’header.
In alternativa, sfruttate un colore di sfondo a tinta unita.
15= Effetti di rollover
La creazione di un effetto di rollover consente di mettere in risalto il collegamento corrente. Un effetto web molto popolare consiste nel realizzare un rollover che cambia il colore del testo e aggiunge un colore di sfondo. Questo lavoro viene svolto dal tag a.
e potrete così determinare il colore del testo del collegamento, in questo esempio grigio scuro.
Inserite a:hover (v. sotto) e il colore del testo diventerà bianco con uno sfondo grigio scuro, invertendo i colori del collegamento quando il cursore viene posizionato sul testo, ovviamente potete scegliere i colori che più si adattano al design della pagina.
16= Pagine centrate
Le pagine web centrate consentono di assicurarsi che una pagina sia perfetta per tutte le risoluzioni, e fortunatamente è un obiettivo semplice da raggiungere.
Usate ad esempio un div con id #wrapper e impostate i margini sinistro e destro su automatico.
Il div #wrapper può avere una larghezza fissa o variabile (percentuale).
17= Colori CSS
I colori CSS vengono comunemente definiti dal codice esadecimale, per esempio #336699, tuttavia, tutti i principali browser supportano anche un elenco di nomi di colori.
Tale elenco è reperibile all’indirizzo http://riemann.unica.it/studenti/guida/colori.html
Invece di inserire il codice esadecimale, basta aggiungere il nome, per esempio:
18= Valori predefiniti
Come valore di default di pagina web la maggior parte degli elementi assumono una formattazione standard imposta dal browser come ad esempio i titoli (hanno un padding, un margin, una dimensione e uno stile del testo prestabilito), ma anche i paragrafi, i link, le liste ecc ecc, quindi se dobbiamo creare un template ad hoc è cosa importante andare ad azzerare questo tipo di formattazione standard per poi andarla a dichiarare secondo le nostre necessità (tecnica CSS molto semplice e usata regolarmente da molti designer).
Prendendo in esempio il titolo h1, andiamo ad eliminare la formattazione standard intervenendo su: padding, margin, interlinea , dimensione del font ( possiamo poi ripetere la stessa cosa per tutti gli altri titoli h2, h3, h4, h5, h6 ricordandoci però che le dimensioni dei titoli devono essere progressive in base all’importanza, quindi, se il tag h1 ha una dimensione di 20px il tag h2 deve avere una dimensione inferiore e così via per questioni di correttezza di scrittura del codice)
Ecco, in questo modo abbiamo eliminato la formattazione dei titoli imposta dal browser, azzerando tutti i valori di default per dichiararli a nostro piacimento, ma possiamo fare la stessa cosa per i paragrafi, le liste, ecc.
Possiamo inoltre fare una cosa molto più intelligente che ci semplicifa la vita e rende il codice più leggero, ossia, nel linguaggio CSS è presente un selettore che si riferisce a qualsiasi elemento del nostro sito, ossia il catarrere “*”
Infatti se noi inseriamo la suguente sintassi:
dichiariamo che a qualsiasi elemento del nostro sito verrà elimanata la formattazione standard di margin e padding perchè appunto abbiamo dichiarato che corrispondono a “0″ per poi dichiararle altrove a nostro piacimento.
19= Lettura a “Cascata”
il codice Css ha la particolarità che viene letto a “cascata” dall’alto verso il basso e una regola dichiarata può essere tranquillamente sovrascritta se la stessa viene dichiarata in una posizione inferiore (Scoprirete col tempo che questa cosa potrebbe tornarvi molto utile).
Supponiamo quindi che il tag h1 viene specificato alla riga n. 1 dichiarando che il font è grande 24px e il suo colore è arancione:
questa regola è relativa a tutti gli h1 presenti nel nostro sito web, ma se alla riga 10 dichiariamo che lo stesso h1 è di colore rosa:
noteremo infatti che il valore font-size verrà preso in considerazione mentre il colore verrà sovrascritto con l’ultimo perchè si trova in una posizione inferiore.
20= Giocare col testo
Grazie a line-height e letter-spacing potete modificare il testo in diversi modi.
Line-height stabilisce la distanza tra le righe, letter-spacing imposta lo spazio vuoto tra i caratteri.
Usate un numero in pixel (es. 15px) per impostare un’interlinea con altezza fissa o em (es. 1em) per una maggiore flessibilità perchè variabile dalla dimensione generale espressa ad esempio nel tag body.
E’ possibbile effettuare la stessa identica cosa per stabilire la distanza tra i caratteri di una singola parola usando la sintassi letter-spacing. Guardiamo un esempio riassuntivo:
21= Dimensioni fisse
A volte un contenuto troppo grande, per esempio un’immagine, viene inserito in un contenitore a larghezza fìssa con dimensioni inferiori e in questo modo il contenuto verrà visualizzato esternamente al contenitore, rovinando così il layout della pagina.
Per impedire che questo accada, aggiungete la riga di codice sottostante, che nasconde qualsiasi contenuto eccedente i limiti e preserva il layout della pagina.
22= Addio barre di scorrimento { Overflow:auto; }
Questo suggerimento è specifico per Internet Explorer e il tag textarea. Il browser di Microsoft aggiunge automaticamente una barra di scorrimento verticale a destra che viene costantemente mostrata.
Per eliminare lo scorrimento e ripulire l’area di testo, aggiungete al CSS il codice sottostante così la barra di scorrimento apparirà solo quando il testo eccede l’area di testo definita.
23= Cursori intelligenti
Il cursore standard di una pagina web è stato progettato in modo da cambiare quando posizionato sopra determinati elementi, come per esempio un link.
Per definire un cursore standard, per esempio a croce, aggiungete cursor: crosshair ma potete utilizzarne di svariati tipi.
Vediamo le diverse opzioni di puntatore che possiamo assegnare per esempio ad un link con classe cursore:
24= Allineamento immagine a sinistra con spaziatura
Spesso capita di inserire un’immagine allineata a sinistra con a fianco del testo che continua sotto, ma se non utilizziamo la sintassi corretta da applicare all’immagine l’effetto non sarà come ce lo aspettiamo.
Supponendo di creare lo stesso effetto ottenuto nell’esempio occorre applicare all’immagine una classe con un’allineamento a sinistra e un margin che servirà a distanziare l’immagine dal testo:
25= Media type
Spesso ci capita la necessità di inserire un foglio di stile ulteriore per la stampa oltre a quello per il web, questa è un operazione semplicissima da eseguire, basta specificare al momento dell’inclusione del nostro foglio di stile nella pagine HTML all’interno dei tag <head> </head> il parametro Media (media=”screen” per il web e media=”print” per la stampa). Ma vediamo subito come includerli correttamente:
26= Eliminare i bordi delle immagini collegate
L’aggiunta di un collegamento a un’immagine implica di default (v.sopra) l’inserimento di un bordo indesiderato del colore del collegamento che è tranquillamente possibile eliminare, facendo in modo che i collegamenti delle immagini non avranno bordi. Per eliminarlo aggiungere il codice:
27= Ombreggiatura
Con i CSS3 è stata introdotta la possibilità di attribuire ad un qualsiasi elemento come un’immagine o un DIV un’ombra sfumata (supportata da tutti i browser ad eslusione dell’odioso Internet Explorer) con la possibilità di impostarne i parametri.
Occorre speficare un’unica proprietà (in due versioni per la compatibilità con i vari browser) impostando i parametri di ombreggiatura verticale ed orizzontale, il raggio di sfocatura e il colore dell’ombra.
Impostate e cambiate i parametri facendo varie prove di dimensione, colore e raggio di sfocatura dell’ombra per ottenere l’effetto che più vi piace.
28= Commenti CSS
L’aggiunta di commenti al codice CSS è un’operazione molto semplice ma che si può rivelare estremamente utile. La sintassi per inserire un commento è: /* Inserisci qui il tuo commento */ può essere inserito prima di una regola, all’interno di una regola e può anche occupare più righe. Ma vediamo subito come sfruttare al meglio i commenti:
Inserire i commenti per suddividere le sezioni (molto utile quando avremo a che fare con svariare regole)
Inserire un commento per rendere invisibile una regola senza cancellarla (molto utile in fase di test)
Inserire un commento per lasciare un appunto
30= Testo accessibile
I pixel sono spesso la scelta preferita perché offrono una larghezza fissa. Tuttavia, per una maggiore flessibilità, l’unità di misura em è una valida alternativa.
Per impostare la dimensione di testo predefinita, aggiungete il seguente codice:
In questo modo impostate la dimensione predefinita su 16px, quindi per fare in modo che la dimensione predefinita sia di 12 px dovete inserire 75%.
Ora il testo impostato su 1 em rappresenterà la dimensione predefinita.
31= Elenchi stravaganti
Per impostazione predefinita, agli elenchi non ordinati viene aggiunto di default un puntino per ogni voce, che, può assumere varie forme come un cerchio, un quadrato e così via.
Tali puntini possono essere sostituiti con un’immagine personalizzata a piacere eliminando il carattere inserito di default e aggiungendo al tag li il seguente codice:
Usate il padding e il background-position per regolare la posizione dell’immagine personalizzata.
32= Siti di riferimento
Voglio infine mettere a disposizione una libreria di siti esterni dove potere approfondire, esplorare e condividere tutto quello che può offrire il magico mondo dei CSS
Non posso non citare questo straordinario sito che altro non è che una galleria CSS.
Il suo funzionamento è molto semplice: i designer vengono invitati a scaricare un modello HTML standard che possono riprogettare con il proprio codice CSS e inviare a Zen Garden.
Se accettato (anche se il giudizio è molto severo), il vostro design verrà aggiunto all’illustre archivio! www.csszengarden.com
CSS3 sta lentamente muovendo i primi passi nella comunità degli standard, e sta ricevendo un grande supporto dai principali browser di prossima generazione.
Se volete portarvi avanti e iniziare a scoprire nuovi elementi, attributi e proprietà, questo sito è il posto perfetto.
Non solo offre ai visitatori la possibilità di visualizzare il codice, ma fornisce anche alcune implementazioni visionabili nei browser compatibili, mentre un pratico CSS Selecton Test vi permette di stabilire il livello di compatibilità. www.css3.info/preview/
Ciò che rende questo sito particolarmente interessante è che tutte le voci sono divise per categoria. Quindi, se volete trovare esempi di straordinari layout a due e tre colonne, progetti di impatto, menu di navigazione e modelli sperimentali, non dovete fare altro che cercare la corrispondente. www.cssdrive.com
Il sito è una celebrazione di straordinari progetti realizzati secondo gli standard, ed è stato creato dal padrino dei CSS Eric Meyer e dal fondatore di A List Apart, Jeffrey Zeldman, che hanno scritto importanti libri e diffuso “il verbo” nella comunità.
Purtroppo le prossime date sono tutte negli Stati Uniti (Seattle, Boston e San Francisco), ma siete ancora in tempo per iscrivervi. http://aneventapart.com
CSS Play, Il cui scopo è quello di promuovere esperimenti con i cascading style sheet, ha una sezione straordinaria. Demos, in cui sono presenti numerosi collegamenti a idee di design di cui è possibile consultare e studiare il codice sorgente. Se il vostro desiderio è quello di realizzare semplici animazioni, gallerie fotografiche, puzzle game e altre creazioni basate sui CSS, questo è il sito che fa per voi. www.cssplay.co.uk
Questo sito basato sui CSS è stato progettato da Creative Jar, e ho scelto di inserirlo come esempio di stile in voga di questi tempi. Carta strappata, texture di tipo tessuto, colori terra, dettagli grafici fatti a mano e immagini vettoriali a tinta unita sono assolutamente di moda, e questo sito è perfetto per rendere l’idea. www.carbonica.org
Questo sito mostra in modo elegante tutto ciò che si può realizzare con i CSS.
Schemi di colore armoniosi, layout semplici, immagini ben posizionate, rollover perfetti, per non parlare dell’integrazione con WordPress, tutto in un unico sito. Questo e altri siti simili aiuteranno a ricordarvi che quando si tratta di realizzare un progetto attraente e basato sugli standard. Flash non è l’unica soluzione. http://designdisease.com
Articoli correlati