CSS3 Button Maker, per pochi e non per tutti
Martedì 31 Agosto 2010 - 08:44
di Giuseppe Caruso
Le meraviglie del CSS3 stanno ormai impazzendo a destra e a manca sulla rete. E, grazie alle infinite risorse di internet, abbiamo a disposizione strumenti che ci permettono di goderne (con supporto limitatissimo ad alcuni browser…) fin da subito, in attesa di specifiche ufficiali. Oggi vi segnalo CSS3 Button Maker
Come sapete, le tecniche utilizzate non sono visibili sui browser che non supportano gli angoli arrotondati, i gradient, e le ombre degli elementi. In questi browser verranno visualizzati solo angoli squadrati, background ad un colore e senza ombra ma, a seconda del progetto, potrebbero ritornarvi utili. Per esempio, ultimamente abbiamo realizzato due siti che, essendo legati alla piattaforma Mac per audience ci hanno permesso abbuffate di border-radius, box-sadow e gradient. Aldilà di questi limiti, la sola pagina è utile di per se anche solo come creatore di codice “on the fly” se proprio non vi ricordate come scrivere le dichiarazioni di bordi e gradient. ;)
Molto interessante, infine, il metodo utilizzato per applicare al volo le selezioni applicate alle opzioni del pulsante. In pratica l’autore non ha fatto altro che cambiare le dichiarazioni CSS direttamente nell’<head> tramite Javascript. Trovate la spiegazione dettagliata sulla pagina di presentazione di CSS3 Button Maker con il relativo codice da scaricare.
Sono molto curioso a proposito dell’uso di queste nuove proprietà? Le avete già utilizzate in qualche progetto? Vi va di postare nei commenti i relativi link? Quale condizione vi ha permesso di utilizzarle non ostante le incompatibilità con alcuni browser?
Categoria: Software e Servizi | Permalink
Commenti
1
Sto iniziando anche io ad utilizzare le nuove regole CSS3, penso che il miglior modo per imparare sia la pratica! Infatti mi sono dato da fare con qualche esperimento…Quello che vi voglio mostrare è un piccolo esperimento CSS3 che cerca di emulare l’effetto di un testo in rilievo grazie alla proprietà text-shadow
in combinazione con le regole rotate e translate di CSS3 date un occhiata: Effetto testo in rilievo Che ne dite?# - postato da Riccardo Tartaglia - 31 Agosto 2010 - 14:38
2
Le specifiche CSS3 sono una vera mannna.. E anch’io le uso, stando attento al supporto da parte dei browser standard-compliant più comuni: Firefox, Chrome, Safari e Opera.
Per quando riguarda Explorer ho trovato uno script che mi permette di applicare i principali effetti (ombre, gradienti e angoli arrotondati) anche a questo browser, e devo dire che funziona abbastanza bene. Le versioni di IE supportate vanno dalla 6 alla 8. Il link è questo:
http://css3pie.com# - postato da Piero Mazzini - 01 Settembre 2010 - 11:03