Parlando terra terra, i fogli di stile possono essere considerati una aggiunta ai tag HTML che permettono di avere una maggiore libertà di azione sugli elementi che costituiscono le vostre pagine in HTML.
In tutte le altre pagine di questa sezione sul web design si fanno molti riferimenti più o meno espliciti ai fogli di stile, ma in questa pagina voglio raccogliere tutti quegli attributi dei css che possono tornarci utili per rendere le nostre pagine più accattivanti senza ricorrere a costosi programmi oppure senza essere costretti a usare questi stessi, che solitamente offrono periodi di prova di circa un mese, di rincorsa e facendo previsioni su quello che potrà servirci sperando di fare tutto prima che scadano.
Certo non sarà possibile fare cose eccezionali sotto il punto di vista puramente grafico, ma per quanto riguarda una buona interattività ed una buona grafica, state sicuri che si riesce a fare qualcosa di interessante. (Ricordatevi che spesso l'inventiva conta molto in questo genere di cose!)
Finita la presentazione di questo utile strumento, passiamo ora in rassegna alcuni attributi css che possono tornarci comodi.
Attenzione! Ci sono almeno quattro modi di usare i fogli di stile:
Localmente, direttamente sull'elemento che ci interessa modificare.
All'inizio del documento, per definire caratteristiche comuni a un certo tipo di elementi della pagina.
Esternamente alle pagine, per definire stili comuni a tutte le pagine (vanno importati con un tag "link").
Attraverso script javascript (in un modo leggermente dfferente).
Ogni oggetto descritto da un foglio di stile è come se fosse un oggetto a se stante, contenuto in un rettangolo (trasparente per default). Questo oggetto ha però un bordo e un possibile riempimento.
Come avrete visto nella pagina precedente, le tabelle sono un ottimo elemento per vedere come dare un tocco di originalità alle vostre pagine. Vi rimando quindi a quella pagina per avere degli esempi specifici sulle tabelle.
Qui invece vi riassumo gli attributi necessari per specificare un bordo:
Tipo del bordo
solid
double
groove
ridge
inset
outset
Ecco un esempio di come potrebbe essere definito un bordo doppio di 5 pixel color verde:
style="border:5px double green"
Questa parte di codice è da inserire all'interno del tag riferito all'oggetto preso in considerazione, come, ad esempio, del semplice testo con un "Header 3" come
Testo bordato
Come potete notare il bordo non si estende per tutta la pagina, ma questo accade perché è stato specificato l'attributo width:400px. Il testo è poi allineato al centro dell' "oggetto css", e questo è dato dal fatto che dentro al tag H3 è stato specificato l'attributo align="center". Come avrete notato questa volta l'attibuto non serve a centrare il testo nella pagina, ma a centrare il testo all'interno dell' "oggetto css". La centratura di pagina è stata fatta con il tag CENTER.
Ecco tutto insieme il codice che ha generato il testo bordato:
<center>
<h3 align="center" style="border:5px double green;width:400px;">Testo bordato</h3></center>
</center>
Altro spunto di approfondimento arriva dalla grandezza del bordo: questo è espresso in pixel (px), ma può essere espresso anche in centimetri
(cm), punti (pt), pollici (in) e infine in unità (em), anche se personalmente ritengo la misura in pixel la più adatta.
Queste misure fanno subito pensare ad un altro attributo utile per posizionare il testo dove meglio si vuole: position.
L'attributo in questione può assumere due valori, absolute o relative. Con il primo si indica il punto specifico della finestra dove si deve posizionare l'elemento (dopo aver dichiarato absoulute il posizionamento si usano gli attributi top, bottom, right e left per specificare le distanze).
Con il secondo valore si specifica sempre attraverso i quattro attributi per l'orientamento le distanze, questa volta, dall'oggetto più vicino.
Adesso ci rimane un altro "simpatico" attributo da vedere: visibility. Può assumere i valori visible oppure hidden e serve pre mostrare o nascondere l'oggetto a cui sono associati. Questo può essere interessante se si vuol fare apparire o scomparire a comando un testo (mmm...mi viene già in mente un javascript per fare uno di quei menù di scelta di oggetti...vediamo se poi ne faccio un esempio pratico...).
Collegato poi al posizionamento e alla visibilità è l'attributo z-index, che definisce su quale "livello" devono stare gli oggetti. Infatti con il posizionamento assoluto può accadere che due oggetti o due parti di essi occupino una stessa area dello schermo. Normalmente quello scritto per primo è quello che sta più in basso (come una pila di fogli). Specificando invece questo attributo (seguito da un numero) si sceglie su quale "livello" deve stare un oggetto, senza essere costretti a dichiararli in ordine.
Adesso che abbiamo parlato di posizionamento e di nascondere/rendere visibile il testo mi viene in mente i menù a scomparsa che ho messo in alcune di queste pagine. Per non farli sembrare semplice testo ho fatto in modo che al passaggio sopra le parole che indicano una sezione, il cursore del mouse cambi forma: beninteso, non si può fargli assumere qualsiasi forma vogliamo, ma solo quelle consentite dal sistema operativo in uso. Comunque sono già abbastanza per fare qualcosa di divertente (o utile a seconda dei casi).
Per modificare il cursore l'attributo da usare è (quasi ovviamente) cursor, che può assumere questi valori (passateci sopra per vedere cosa succede):
hand
help
crosshair
move
n-resize
s-resize
e-resize
w-resize
ne-resize
se-resize
nw-resize
sw-resize
text
wait
auto
default
Per finire, una possibilità offerta solo a chi ha Internet Explorer, è quella di poter impostare degli effetti all'entrata o all'uscita da una pagina. I css offrono ben 23 modi di passaggio, con effetti simili a quelli cinematografici, quando viene cambiata scena.
Per poter usare questi effetti bisogna includerli in un meta tag, da inserire all'interno del tag <head> e </head>.
Il codice generale per inserire una transizione di pagina è il seguente:
QUANDO: indica quando deve avvenire la transizione e prende valore Page-enter, Page-exit, Site-enter oppure Site-exit.
QUANTO: è la durata dell'effetto, espressa con un numero.
QUALE: è la transizione scelta, espressa con un numero che va da 1 a 23. Qui sotto trovate la spiegazione di ogni transizione (il primo è il numero da mettere al posto di QUALE, la seconda è la descrizione di ciò che fa).
0 - Box In
1 - Box Out
2 - Circle In
3 - Circle Out
4 - Wipe Up
5 - Wipe Down
6 - Wipe Right
7 - Wipe Left
8 - Vertical Blinds
9 - Horizontal Blinds
10 - Checkerboard Across
11 - Checkerboard Down
12 - Random Dissolve
13 - Split Vertical In
14 - Split Vertical Out
15 - Split Orizontal In
16 - Split Orizontal Out
17 - Strips Left Down
18 - Strips Left Up
19 - Strips Right Down
20 - Strips Right Up
21 - Random Bars Horizontal
22 - Random Bars Vertical
Queste sono le 23 transizioni effettive, ma c'è anche:
23 - Random
Che ne mette una casuale.
Questo è tutto quello che ritengo utile per dare un po' di vita alle pagine, ci sarebbero anche altre cosette, ma ritengo che queste siano quelle essenziali per non rendere sovraccariche le pagine (poi sta anche a chi progetta le pagine non riempirle di effetti che la rendano illeggibile!). Se volete saperne di più potete consultare le pagine a cui si può accedere dalla pagina pricipale sul web design, sotto la voce "Risorse".