CSS  »  Articoli  »  Effetti con CSS 

CSS3 a piccoli passi: questo il titolo di un articolo di Alessandro Fulciniti uscito in questa sezione nel 2007. Si trattava di una panoramica sulle caratteristiche fondamentali della nuova specifica e sulle strategie per implementare sin da ora alcune delle interessanti funzionalità proposte.

E a piccoli passi tali funzionalità stanno guadagnando il supporto su alcuni dei browser più diffusi, soprattutto Safari e Chrome (basati sul rendering engine WebKit) e Firefox.

"Troppo poco..." commenterà qualcuno. E non è un'obiezione trascurabile. Come non tenere conto, infatti, degli altri browser, a partire da quell'Internet Explorer che ancora oggi detiene le quote di mercato più alte?

A prima vista, insomma, potrebbe sembrare che lo sviluppatore desideroso di sfruttare quanto di nuovo e buono viene proposto nei CSS3 debba attendere un'altra era geologica in attesa, intanto, che il W3C porti a termine il lavoro sulle specifiche ufficializzandole ma soprattutto che tutti i produttori di browser estendano il supporto alle nuove funzionalità.

Se ne può uscire? Qualche mese fa uno dei massimi esperti ed evangelizzatori mondiali in fatto di CSS, Eric Meyer, ha pubblicato sul suo blog un intervento il cui titolo tradotto in italiano suona più o meno così: Javascript salverà tutti noi. Cosa intendeva? Semplice: grazie allo sviluppo di framework sempre più performanti e ricchi di opzioni possiamo contare sulla disponibilità di uno strumento in grado di garantirci sin da ora l'estensione del supporto delle parti più interessanti dei CSS3 su tutti i browser.

Nello specifico Meyer pensava soprattutto ai selettori CSS3, ma tanti sono i casi che possono essere citati. Quello forse più eclatante riguarda la proprietà border-radius, quella, per intenderci, che consente di ottenere elementi con angoli arrotondati con pochissime righe di codice CSS senza dove ricorrere ad immagini ed elementi HTML aggiuntivi. Le soluzioni Javascript per ottenere tale effetto con tutti i framework più diffusi non si contano.

In questo articolo parleremo proprio di questo, proponendo tre soluzioni basate su jQuery per implementare in maniera cross-browser tre proprietà/funzionalità dei CSS3: gli sfondi multipli, l'ombreggiatura sugli elementi HTML e i layout multi-colonna.

Prima di iniziare vi segnalo questa pagina del sito CSS3.info che sintetizza le proprietà CSS3 ad oggi supportate nei vari browser fornendo per ciascuna una piccola guida all'uso e degli esempi.

Sfondi multipli

La specifica CSS3 prevede la possibilità di indicare per un dato elemento più di un'immagine di sfondo.

Si tratta di un'estensione della proprietà background-image già prevista nelle specifiche precedenti. La differenza di fondo consiste nel fatto che nei CSS3 è possibile definire più di un'immagine attraverso il rispettivo URL. Si può passare dunque da

body { background-image: url("sfondo.jpg") }

a

body { background-image: url(sfondo.jpg), url(sfondo2.jpg) }

Altri articoli

Altre guide

Altre newsletter