CSS  »  Articoli  »  Effetti con CSS 

In questo articolo vedremo come un markup semplice e una piccola immagine di sfondo siano in grado di rendere visivamente degli indicatori di percentuali che potranno essere utilizzati per mostrare progress bar, percentuali di utilizzo, risultati sondaggi e quant'altro. Vediamo subito l'esempio di base che accompagna l'articolo.

Il markup

Il markup dell'esempio è piuttosto semplice. Ciascuna barra è infatti identificata e individuata da un div class="progress" con al suo interno uno span:

La particolarità è che nel markup viene usato per comodità uno stile CSS inline, che ha lo scopo di dare la misura all'indicatore; torneremo sul dettaglio in seguito. Basti sapere per ora che nel modificare le percentuali nell'HTML sarà necessario modificare anche lo stile inline.

Prima di procedere con il CSS, vediamo l'unica immagine utilizzata nell'esempio. È una semplice PNG larga 200px e alta 30px, in cui la metà è la parte "piena" e l'altra metà è grigia, ad indicare la parte mancante:

Figura 1 - Immagine .png usata nell'esempio

Da notare che i nostri indicatori, usando un'immagine simile, dovranno essere esattamente larghi 100 pixel, ovvero la met‡ dell'immagine.

Il CSS

Ora passiamo al CSS dell'esempio. Per prima cosa gli stili sul div:

Altri articoli

Altre guide

Altre newsletter