CSS ^Exp

Spingere i CSS ai limiti

di Mark Schenk

Introduzione

Questa pagina cataloga alcuni dei miei esperimenti di maggior successo con i CSS (CSS/Exp sta per CSS Experiments). Il nome CSS/Exp è modellato sulla grande risorsa sui CSS di Eric Meyer, CSS/edge, che si è dimostrata un'importante risorsa per molti, con alcuni design avanzati con i CSS fra cui in special modo la stupenda pagina Complex Spiral ha influenzato il webdesign di molte persone, compreso il mio. Ecco dunque un piccolo tributo.

Certamente non sono stato l'unico ad aver sperimentato con i CSS in passato, ed ecco un breve elenco di pagine simili.

• CSS Destroy
• Cutting Edge CSS
• Newt Edge
• Design Detector
• Virtuelvis Gallery
• CSS Play

Storia e contesto

La maggior parte dei miei esperimenti con i CSS furono scritti nel 2003, quando iniziai per la prima volta ad esplorare i CSS. Sono stato un utente di Opera per qualche tempo, ed il nuovo motore di rendering di Opera, Presto, era divenuto abbastanza maturo per supportare i vari esperimenti.

Quello che attirò di più il mio interesse fu il contenuto generato dei CSS. Il mio entusiasmo era condiviso dal Literary Moose (ora conosciuto come Lofoten Moose), e parlammo molto dei nostri esperimenti con il contenuto generato. Gran parte del lavoro sul contenuto generato è riassunto nel saggio del Moose sull'argomento. Un interesse successivo venne nella forma dei bordi con i CSS, o più specificamente quelli obliqui. Tantek Celik per primo esplorò questo campo con i suoi fantastici poligoni con i CSS. Ho anche ripreso la tecnica ed ho iniziato a giocarci usandoli per scopi puramente ornamentali, essendo uno dei primi a farlo con i CSS. In seguito ho sviluppato un crescente interesse per Opera Show ed ho realizzato anche alcuni lavori sull'argomento che sono culminati nell'Opera Show Generator.

All'inizio del 2006 ho dato una riveduta a questa sezione ed ho aggiornato gli esperimenti, ed ho cercato di standardizzare la formattazione delle spiegazioni. Ho anche cercato di riportare alla mente la data originale degli esperimenti per un futuro riferimento. Non sono stati aggiunti molti esperimenti in tempi recenti, e non mi aspetto di farlo nel futuro prossimo, dato che i miei interessi si sono spostati altrove. Tuttavia, quando nasce qualcosa...

Esperimenti: Contenuto Generato

Il contenuto generato non è ampiamente supportato dai browser, sebbene consenta all'autore di aggiungere effetti potenti ed interessanti ad una pagina. Attualmente il browser Opera ha il miglior supporto, che include alcuni aspetti dei CSS versione 3.

22 aprile 2003 ⇒ Niente contenuto, solo stile

Portando il contenuto generato agli estremi, questa pagina fornisce il minimo assoluto di marcatura e tutto il contenuto e lo stile e dato dai mezzi dei fogli di stile.

marzo 2004 ⇒ CSS Menu

Puro menu con i CSS con marcatura minimale ed uso interessante dei caratteri Unicode per introdurre un'interruzione di riga.

5 giugno 2003 ⇒ Caption automatiche

I CSS consentono di estrarre informazioni dagli attributi ed usarle nel contenuto generato. Ciò viene usato per creare caption (legende) automatiche per tabelle e immagini.

25 ottobre 2003 ⇒ ID accessibile

Spesso si vuole creare un collegamento ad una specifica sezione di un documento, ma è necessario trovare l'ID dell'intestazione specifica. Questa tecnica mostra l'ID di un'intestazione quando ci si passa sopra con il mouse.

19 maggio 2003 ⇒ Pubblicazioni scientifiche

Mentre scrivevo un articolo sulla pubblicazione di documenti scientifici con XHTML e CSS sviluppai alcune interessanti applicazioni del contenuto generato. Sono tutte visibili nell'articolo: equazioni numeriche, numerazioni annidate della tabella dei contenuti, intestazioni numerate e tabelle/figure.

inizio 2004 ⇒ Matrici con i CSS

Creare l'effetto delle matrici con XHTML e CSS è qui realizzato grazie al contenuto generato posizionato accuratamente.

9 giugno 2003 ⇒ Puri angoli arrotondati con i CSS

Usando nient'altro che i CSS, l'effetto degli angoli arrotondati è possibile (sebbene non utile all'atto pratico).

Esperimenti: Opera Show

Poichè Opera supporta i page-break dei CSS, si può usare questa caratteristica per scrivere slideshow in HTML: Opera Show. Questa caratteristica fu precorsa da Håkon Wium Lie. Questa caratteristica di Opera mi piace davvero e potete leggere di più a riguardo sulla mia pagina di Opera. Ho anche sviluppato alcune tecniche che per Opera Show sono particolarmente utili.

23 dicembre 2003 ⇒ Immagine di background scalare

Le versioni attualmente supportate dei CSS non consentono di scalare un'immagine di background fino alle dimensioni dell'oggetto o della pagina. Ho sviluppato un workaround che simula l'immagine di background scalare nel body del documento.

8 ottobre 2004 ⇒ Slide X di Y

Questo demo dimostra che è possibile creare uno Slide X di Y numerato usando solo i CSS. In precedenza si credeva che fosse necessario Javascript per ottenere l'effetto desiderato.

Esperimenti: Scherzi

Certamente non tutti gli esperimenti con i CSS devono essere utili, e questi scherzi si adattano perfettamente a questa descrizione. Solamente per divertirsi con i CSS.

3 maggio 2003 ⇒ La luce alla fine del tunnel

Il mio primo esperimento usando le "curve" e gli effetti diagonali dei bordi CSS fu scritto in fretta dopo aver decifrato i poligoni con i CSS di Tantek.

1 novembre 2003 ⇒ Rompicapo cinese con i CSS

Usando i bordi dei CSS, e con molto tempo libero a mia disposizione, ho creato un rompicapo cinese con i CSS. Buon divertimento!

30 ottobre 2003 ⇒ Biliardi con i CSS

In un momento di follia ho scritto un semplice tavolo da biliardo con i soli CSS. Per me scrivere un tavolo da snooker (gioco a 6 buche e con 21 palle colorate. N.d.T.) era un pò troppo, ma Claire Campbell raccolse la sfida e realizzò il tavolo da snooker. Presenta su quel sito più esperimenti con i bordi CSS.

⇒ Arte con i CSS (1, 2)

Molte persone hanno familiarità con il pittore olandese Piet Mondriaan. Ho deciso di ricreare alcune delle sue opere con i CSS: la prima "CSS Art"!?

⇒ Bordo-mania (1, 2, 3, 4)

Ho realizzato queste pagine nel tentativo di dare una visione di insieme di come i vari tipi di bordi si combinano. Non sono neppure ben fatti o un esempio d'arte, ma puramente informativi.

27 ottobre 2003 ⇒ Grafici a barre in 3D

Questo demo è stato originato dal grafico-demo con i CSS del Literary Moose. Ho aggiunto gli effetti 3D ai grafici. Ancora una volta si tratta di un gioco di preciso posizionamento.

Esperimenti: Vari

Alcuni esperimenti che non sembrano star bene altrove.

31 ottobre 2003 ⇒ Layout multi-colonna

Nel momento in cui il Literary Moose scrisse il suo esperimento "il mondo secondo la tabella", cominciammo a lavorare su un layout multi-colonna. Questo è il mio ultra-rapido abbozzo di una pagina con intestazione, piè di pagina e quattro colonne.

⇒ Zoomare un'immagine

Mentre stavo scrivendo il mio Tutorial M2 avevo il problema di molti screenshot che avrebbero disintegrato il layout se visualizzati a risoluzioni basse. Quello che ho fatto è stato ridurre le immagini con i CSS all'ampiezza del testo (usando max-width), e su :active le immagini avrebbero ripreso la loro dimensione originale. Come effetto collaterale il layout della pagina "salterà" a causa del riflusso dopo il ridimensionamento dell'immagine.

Copyright traduzione © 2006 Gabriele Romanato