In questo video sfrutteremo l'aiuto di tre siti in cui abbiamo recuperato altre caratteristiche comuni ai CSS piu' diffusi nel web 2.0. Gli esempi che analizzeremo riguardano un altro modo per creare box dai bordi arrotondati, anche se non si sanno utilizzare programmi di grafica; come esporre una lista di link con un effetto on mouseover su tutto il blocco che contiene il link; e un elegante box con effetti d'ombra sullo sfondo.

Il sito Spiffy Box ci offre un valido esempio di web application in completo stile web 2.0. Ora è possibile anche per gli sviluppatori piu' inesperti incontrare applicazioni online di questo tipo che creano sofisticate immagini e il codice necessario ad utilizzarlo. Basta quindi seguire le istruzioni che troviamo sul sito per poter creare il nostro box, centrato nella pagina, con uno sfondo dagli angoli arrotondati. Anche questo esempio, come quello della scorsa puntata usa un box dalle dimensioni limitate. Questi layout sono utili per presentare diverse zone che introducono ad altre pagine. Utilizzando la stessa classe di stile per i nostri elementi è possibile predisporre rapidamente una pagina con diverse zone dagli angoli arrotondati.

L'effetto che vediamo applicato, è possibile grazie alle direttive che posizionano le immagini in un determinato punto del div. In questo modo è possibile allungare e allargare il nostro box rimanendo nei limiti dell'immagine che viene creata da Spiffy Box.

Un codice di sicuro interesse è quello del secondo esempio. Quando mostriamo una web application o la home di un sito, o il menu della nostra pagina, è utile poter creare un effetto crossbrowser che permetta alla pagina di essere leggera e di distinguere rapidamente tra loro i diversi blocchi delle nostre liste . Tutto il lavoro di questo esempio è svolto all'interno del CSS.

#links ul {
        list-style-type: none;
        width: 400px;
} 

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a { 
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
}

#links li a:hover {
        background: #ffffcc;
}

#links a em { 
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%; 
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

Quando si descrive in un foglio di stile un link, ci si riferisce a questo utilizzando il nome del tag con cui viene rappresentato nella pagina ovvero con la lettera "a" di anchor. Nel descrivere i diversi blocchi della nostra pagina si procede con una tecnica che viene chiamata a cascata. I box e gli elementi che si trovano uno dentro all'altro vengono raggiunti dai selettori css attraverso un elenco che va dalle componenti piu' grandi a quelle piu' piccole. Pertanto, nel nostro esempio, viene descritta la lista con id uguale a links, successivamente si descrivono tutti gli elementi "li" contenuti in links, e tutte le ancore contenute nel "li". Alle ancore viene poi applicato il selettore speciale hover. Questo descrive il comportamento del browser quando il mouse va sopra a un link. Nel nostro caso viene cambiato lo sfondo del link.

Grazie all'attributo padding che abbiamo inserito nel css delle ancore, riusciamo a far combaciare le nostre ancore con gli elementi "li" della lista links. Infine ponendo l'attributo text-decoration uguale a none, evitiamo la classica sottolineatura dei link nel browser ed il gioco è fatto.

Anche il terzo e ultimo esempio ha il suo cuore nel foglio di stile. Applicare un pulito effetto d'ombra che faccia da cornice ai nostri box è un'altra delle prerogative dei layout tipici del 2.0.

.dropshadow2{
	float:left;
	clear:left;
	background: url(shadowAlpha.png) no-repeat bottom right !important;
	background: url(shadow.gif) no-repeat bottom right;
	margin: 10px 0 10px 10px !important;
	margin: 10px 0 10px 5px;
	width: 500px;
	padding: 0px;
}
.innerbox{
	position:relative;
	bottom:6px;
	right: 6px;
	border: 1px solid #999999;
	padding:4px;
	margin: 0px 0px 0px 0px;
}
.innerbox{
	/* IE5 hack */
	\margin: 0px 0px -3px 0px;
	ma\rgin:  0px 0px 0px 0px;
}
.innerbox p{		
	font-size:14px;
	margin: 3px;
}

Dopo aver salvato le immagini messe a disposizione dal sito, possiamo gia' fare la nostra prima considerazione. Notiamo infatti che le immagini sono identiche tra loro, una è una gif, e una png con sfondo trasparente. Il motivo dell'esistenza di queste due immagini è dovuto ad Explorer 6 che non supporta la trasparenza delle immagini. Essendo le png di piu' alta' qualita', possiamo comunque inserirle nel nostro foglio di stile e utilizzare la clausola punto esclamativo important. Questa parola chiave speciale ci permette di dare istruzioni a firefox, safari e altri, ma viene ignorata da explorer che prende in considerazione quindi l'altra immagine descritta subito dopo.

Anche questo effetto, come il primo, è possibile grazie alle keyword che vengono scritte subito dopo al nome dell'immagine di sfondo. Scrivendo "no-repeat bottom left" istruiamo infatti il browser a non ripetere l'immagine di sfondo, a collocarla in fondo a destra ai nostri box.

In questo sito possiamo trovare diversi effetti grafici di questo tipo da associare anche alle immagini. In questa maniera potremo costruire delle gallerie eleganti, dando a tutte le foto la stessa classe di appartenenza per ottenere la cornice d'ombra intorno.

Oltre ai framework javascript, i css hanno fatto la parte del leone nella rivoluzione del web degli ultimi anni. Layout puliti, leggeri e con effetti accattivanti sono ormai un must per le nostre applicazioni e siti. Come abbiamo dimostrato in questo video, pero', esistono migliaia di siti che possono venirci in soccorso fornendoci piccoli sorgenti di codice che possiamo personalizzare come meglio riteniamo.