Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Realizzare pulsanti con i CSS3
Scritto da Davide Panceri il 02-02-2012 ore 16:22
Seminario Intel
Sfogliando la rete in modo abbastanza casuale, ho trovato un tutorial piuttosto interessante, ben strutturato, con un approccio graduale, che spiega come disegnare pulsanti, arrotondati e non, senza l'ausilio di immagini, ma con i CSS3.

Si parte con le semplici istruzioni HTML per la creazione di pulsanti, che già lasciano intravedere i futuri sviluppi, prevedendo tre classi chiamate grosso modo come i colori verde, blu e grigio. A questo punto, abbiamo vi è una pagina con tre collegamenti ipertestuali, alla quale vengono aggiunte poche righe CSS per stabilire la struttura generale dei pulsanti, e distinguere le tre classi corrispondenti ai colori.

Lo stile si può implementare attraverso un file separato oppure con le istruzioni nel tag della stessa pagina, soluzione più breve e magari più adatta per chi intende concludere l'esercitazione in breve tempo. La terza passata prevede di arricchire un po' la grafica dei pulsanti smussandone gli angoli, aggiungendo qualche ombra, e creando qualche effetto di animazione. In questa fase è obbligatorio precisare tramite opportuni prefissi istruzioni specifiche a seconda dei browser.

Seguono ulteriori modifiche ai gradienti di colore e una versione più grande dei pulsanti. A questo punto il lavoro è finito ed è possibile confrontare il risultato ottenuto con questa tecnica a casa propria, e quello previsto e pubblicato dagli autori di questo articolo. Naturalmente, la consultazione dei sorgenti, opportunamente scaricabili, potrebbe aiutare a comprendere ancora meglio i passaggi effettuati via via. Purtroppo non si possom l'autore richiede il tweet del tutorial è necessario effettuare un tweet, opzione che vedrei come ringraziamento più che ricatto (anche perché non tutti usano Twitter). Un escamotage è quello di copiare il codice un po' alla volta grazie ai pulsanti che si attivano passando il mouse nella zona in alto e alla destra dei frammenti di codice.
Precedente: Concurrent Programming in Mac OS X and iOS
Successiva: Problemi e soluzioni con Excel (seconda edizione)
Copyright Programmazione.it™ 1999-2014. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.188 secondi.