Web Design — 1 aprile 2008, 7:04 — 2 Commenti

Una progress bar di puro CSS

Fino a qualche anno fa una progress bar era possibile farla solamente in Flash. Ora con l’avvento dei framework Javascript e con l’uso sistematico dei fogli di stile il Flash è passato in secondo piano perchè quasi completamente sostituito.

In questo breve tutorial, Alen Grakalic mostra come creare una progress bar fatta esclusivamente con fogli di stile e immagini. L’idea è di creare un contenitore di dimensione fissa e con overflow=hidden che ha come background la progress bar completa. Un secondo elemento contenente un’immagine bianca, posizionato in maniera assoluta sopra al primo, viene fatto scorrere per creare l’effetto animato finale.

L’idea è semplice ma efficace. Potete vedere l’effetto finale tramite gli esempi nella demo, oppure scaricare direttamente il codice già scritto per voi!

Articolo scritto da Mick martedì 1 aprile 2008 alle 7:04 am. Puoi lasciare il tuo commento, o un trackback dal tuo sito. Questo articolo si trova classificato nella categoria — Web Design

Tag:css, Flash, framework-javascript, progress bar css

Articoli che potrebbero interessarti...

37 sistemi di navigazione con i css

venerdì 21 aprile 2006, 14:04

Interessantissima carrellata di sistemi di navigazione per siti web fatti con i fogli di stile. Vitaly Friedman ha raccolto ben 37 modi per creare il proprio "menu" con i css e li…
fogli-di-stile, menu, navigazione

Vademecum CSS

martedì 31 maggio 2005, 14:50

Fogli di stile? Questi sconosciuti. Per chi è alla ricerca di qualche utile informazione su come funzionano i fogli di stile, ecco un ottimo documento. Lo consiglio anche ai più esperti, rinfrescare queste…

blueprint, framework css, guida fogli di stile, pagina griglia, ruby-on-rails, struttura css

Blueprint: arriva il framework CSS

lunedì 25 febbraio 2008, 7:31

Sono capitato per sbaglio sull'homepage di Bluprint e fin dall'inizio mi ha interessanto l'argomento: un framework per CSS. Non ne avevo mai sentito parlare e allora ho speso un paio d'ore a capire cosa fosse di preciso. Ora cerco di spiegarvelo.
blueprint, framework css, guida fogli di stile, pagina griglia, ruby-on-rails, struttura css

client email html, compatibilitÃ client email, email css, email fogli di stile, email html

Spedire un’email HTML/CSS? Lascia perdere…

lunedì 14 aprile 2008, 10:07

Siete avviliti per non riuscire a creare un'email HTML usando i fogli di stile? Bhe... lasciate stare, l'impresa è impossibile. Alcuni client email la leggeranno bene, altri invece no e per sensibilità democratica non ci si può permettere che una fetta di lettori non la riescano a leggere.
client email html, compatibilità client email, email css, email fogli di stile, email html

Modello a Box dei CSS

mercoledì 26 maggio 2004, 0:43

Ecco un diagramma chiarificatore del “modello a box” imposto dai fogli di stile (css) sugli oggetti html (Jon Hicks). Una versione animata (flash) la si può vedere invece su redmelon.net . Grazie a Forgetfoo

Scrivere e ripulire un foglio di stile: due strumenti per CSS

lunedì 10 novembre 2008, 7:15

Ora vi presento due strumenti utili per chi deve lavorare con i fogli di stile. Sono entrambi gratuiti e di di facile utilizzo.

2 Commenti

Insel der Engelâ€™ scrive:

12 apr 08 alle 22:00

Adobe si avvicina a Linux nel nome di Air Google lancia App Engine, la soluzione integrata per le applicazioni web Adobe Media Player, Flash contro tutti Files audio 1000 volte pÃ¹ piccoli di un Mp3Una progress bar di puro CSS10 Effetti Javascript per migliorare il vostro sito Paginazione perfetta con i css Il Framework CSS ideale Indicatori di attivitÃ con i CSS Ajaxian Featured Tutorial: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery
bishop scrive:

09 giu 08 alle 11:44

In che modo è possibile associarla all’upload di un file?
C’è qualche script gia pronto!
Cmq complimenti per la progress bar!è veramente carina