CSS  »  Articoli  »  Effetti con CSS 

Con Ajax e il Web 2.0 l'uso di indicatori di attività per evidenziare transizioni di stato o effetti grafici è sempre più presente.

Gli indicatori di attività, ovvero delle piccole GIF animate, possono essere usati anche con i CSS, ad esempio come sfondi alle immagini in attesa del loro caricamento. È quello di cui parleremo in questo appuntamento.

Vediamo subito l'esempio che accompagna l'articolo, e come viene mostrata un'immagine in fase di caricamento:

Figura 1 - Esempio di indicatore di attività

La tecnica è decisamente semplice. Cominciamo dal markup dell'esempio:

Il div class="pic" è in realtà superfluo ai fini della tecnica ed è usato principalmente per rendere float l'immagine e aggiungere una piccola cornice. Costituisce però un buon aggancio grafico e consente un buon livello di personalizzazione, potremo ad esempio aggiungere una drop-shadow o un effetto ombra particolare.

Quello su cui vale la pena soffermarsi è il fatto che nell'immmagine vengano specificate le dimensioni attraverso gli attributi width e height nel markup. Si tratta, è vero, di attributi presentazionali ma comunque e sempre vincolati alle immagini a cui sono assegnati.

Attribuire dimensioni alle immagini è importante non solo se vorremo usare gli indicatori di attività, ma più in generale per prevenire "salti di pagina" fintanto che queste sono caricate. Si può fare in diversi modi, ovvero con gli attributi nell'HTML, oppure tramite stile in linea (<img style="width:256px;height:192px">), oppure ancora tramite CSS esterni assegnando classi e/o ID alle singole immagini. Personalmente, ritengo più pratico e leggero l'uso di attributi nell'HTML.

Procediamo ora con il CSS dell'esempio. Per quanto riguarda il div esterno, questo viene reso float e gli viene attribuita una cornice e dei margini per distanziare il testo:

Ora la parte più importante, ovvero l'indicatore di attività. Basterà rendere l'immagine block-level, assegnarle un colore di sfondo e centrare la piccola GIF animata:

Con due semplici regole abbiamo ottenuto immagini con indicatori di attività, una tecnica che si presta bene soprattutto in siti con immagini di dimensioni medio-grandi (fotografie ad esempio) oppure con molte miniature. La compatibilità è estesa a tutti i browser con un supporto anche minimo dei CSS. Da evidenziare che l'indicatore di attività resterà visibile nel caso in cui l'immagine non sia disponibile (come nella seconda immagine dell'esempio).

Per quanto riguarda gli indicatori di attività, segnalo in conclusione alcuni siti in cui si possono reperire e/o personalizzare: AjaxLoad, Ajax Loading GIF Generator, Load Info e Ajax Activity Indicators. Alla prossima!

Altri articoli

Altre guide

Altre newsletter