MoebiusMania

Sono 3 piccoli argomenti strettamente connessi per ottenere un'effetto interessante: fissare immagini in layout su vari "livelli". Per intenderci, ricreare l'effetto della banda "Too Cool for IE" che vedete su questo sito e degli elementi del mio [download id="1" format="1"]. Non è un argomento particolarmente nuovo, né rivelo arcane verità, è un'argomento che teoricamente un webdesigner di medio livello dovrebbe conoscere, tuttavia quando ero agli inizi ho avuto non poche difficoltà a capire come ricreare questo effetto e ora che ho maggiore dimistichezza voglio dare una piccola mano a chi ora è nella mia stessa situazione di allora :) .

Il formato PNG

Il PNG (Portable Network Graphics - per chi non lo sapesse :P) è un formato nato apposta per il veicolamento delle immagini su Internet, apposta per questo non supporta altri spazi di colore al di fuori di RGB, ha un'ottimo supporto per la trasparenza e non genera artefatti di disturbo come il Jpg (le macchioline spixellate che capita abbastanza spesso di vedere in un'immagine di quel formato).  Nonstante questo è un formato che sta trovando solo negli ultimi anni il suo giusto impiego, in quanto l'allora predominante Internet Explorer 6 aveva un scarso (se non nullo) supporto di questi tipi di file. Tenicamente il Png dovrebbe sostituire il formato Gif, ma essendo il primo sprovvisto di supporto per l'animazione (per ora) sta a lasciando al secondo una maggiore longevità, dove tuttavia il nuovo formato sta avendo successo sul vecchio sta nella gestione delle trasparenze e dei colori, un file Png ben realizzato vi consente di ottenere una qualità molto simile al Jpg (senza disturbi come dicevo prima) con trasparenze migliori del Gif, e dove ci sono immagini con parti trasparenti ci sono design veramente accattivanti e versatili! In Photoshop (e molti programmi di grafica come Gimp e Illustrator) abbiamo la possibilità di salvare in due tipi di Png: Png-8 e Png24, il primo vi darà poco di più di una normale Gif in cambio di una maggiore versatilità di utilizzo con browser "vecchi", il secondo invece sprigiona al 100% il potenziale di questo formato, tuttavia Internet Explorer 6 non visualizzerà affatto queste immagini... a questo punto le opinioni si dividono, c'è chi cerca di aggirare il problema con script e altro ancora (potete trovare maggiori informazioni qui - in inglese!) e chi semplicemente lo ignora. Io personalmente lo ignoro, Internet Explorer 6 (che ricordo, è un browser datato 2001!) attualmente è una minoranza e con l'imminente uscita della versione 10 la sua discesa si fa sempre più ripida.

Posizionamento

Premetto che in queste poche righe non spiegherò la varie modalità di posizionamento nei CSS. La proprietà CSS più importante per creare elementi decorativi che restino in un punto fisso del layout è quella del posizionamento (incredibile vero?), nel nostro caso utilizzermo come valore "fixed" che come si può intuire fissa l'immagine nella parte da noi indicata dello schermo, lasciando però scorrere il resto della pagina al di sotto di essa. Aggiungendo a questo le informazioni necessarie per determinare dimensione e colore (o immagine di sfondo) dell'oggetto potremmo scrivere qualcosa di questo tipo:

#oggetto1 {
background-color: #000000;
position:fixed;
top: 0;
right: 0;
width: 100px;
height: 100px;
}

Con queste poche righe determiniamo un oggetto di colore nero, con una posizione fissa nell'angolo in alto a destra del browser, delle dimensioni di 100x100 pixel.

Z-Index

E qui è dove il design in CSS si fa interessante: questa proprietà determina in che livello (si avete capito bene: LIVELLO, come quelli che utilizzate nei software di grafica) viene posizionato l'oggetto, dove in un range da 0 a 99 il valore più alto sarà quello che sovrasterà tutti gli altri. La semplice sintassi è questa:

...
z-index: 15; /* Valore a scopo di esempio! */
...

Teoricamente se volete realizzare un effetto sipario con 2 elementi ai lati e uno posizionato in alto, sarebbe preferibile dare z-index: 1 agli elementi laterali e z-index: 2 a quello superiore per far si che copra la cima dei due laterali restandoci "sopra". Se a z-index unite un file png-24 con un'immagine che abbia un'ombra ben dosata potete creare interessanti effetti di rilievo per i vostri design, potete sempre rifarvi al mio [download id="9" format="1"] per esempi pratici di queste proprietà.

in conclusione...

Png e Z-index sono argomenti molto allettanti nel webdesign, tuttavia invito sempre a utilizzare queste conoscenze con parsimonia... il fatto che Z-index supporta fino a 100 livelli non vuol dire che ogni vostro design deve averne 70/80 occupati :) , lo stesso vale per i file Png, non è un formato "assoluto" dove vedete che ottenete migliori risultati per quello che vi serve con i classi Gif e Jpg... utilizzate quelli!