Insel der Engel' » (x)HTML http://engelium.netsons.org/blog Il mio piccolo pezzo di Paradiso Thu, 05 Nov 2009 13:14:06 +0000 en hourly 1 Filmati Flash in background con i CSS http://engelium.netsons.org/blog/2008/03/20/filmati-flash-in-background-con-i-css.html http://engelium.netsons.org/blog/2008/03/20/filmati-flash-in-background-con-i-css.html#comments Wed, 19 Mar 2008 23:14:11 +0000 Engelium http://engelium.netsons.org/blog/2008/03/20/filmati-flash-in-background-con-i-css.html L'articolo Filmati Flash in background con i CSS è stato pubblicato su Insel der Engel', a cura di Engelium.

]]> Ed iniziamo con questo articolo una serie di guide e di tips & tricks per eventuali webmasters alle prime armi che passassero da queste parti. Onestamente non so bene neanche io come (e se) si svilupperà la cosa. Ma come sempre l’importante è iniziare no?

L’idea mi è venuta grazie ad una domanda posta da un utente sul forum di MegaLab.it. Vedendo come operazioni apparentemente molto semplici possano sembrare dei problemi insormontabili ad un neofita mi ha spinto a cominciare questa nuova “rubrica”.

Ed adesso andiamo al tema di oggi: “Come creare in modo semplice e veloce una pagina web in cui un filmato flash farà da cornice alla nostra pagina vera e propria”.

Il trucchetto si rivela utile soprattutto per chi il Flash non lo conosce proprio al meglio, visto che la soluzione migliore sarebbe sviluppare tutto direttamente con questo programma sfruttandone le pressochè illimitate possibilità.

Per realizzare il nostro progetto ci limiteremo dunque al solo uso di codice (x)HTML e CSS e, in particolare, alle specifiche XHTML 1.0 Strict e CSS 2.1 così da garantire un’ottima compatibilità cross-browser e cross-platform (nonostante quell’ XHTML 1.0 Strict possa far pensare diversamente qualche profano :wink: ).

Per ottenere l’effetto desiderato, ovvero avere due livelli sovrapposti in vario modo esattamente come siamo abituati a vedere in programmi di grafica come Photoshop, la specifica CSS2 infatti ci mette a disposizione la proprietà z-index.

Tutto quello che dobbiamo fare è quindi creare due box posizionati assolutamente ed ai quali attribuire dei valori diversi per lo z-index (maggiore per quello che deve essere visualizzato sopra). Tuttavia questo non è ancora sufficiente in quanto limitandovi ad inserire il vostro file .swf tramite il codice standard (in genere fornito dalla routine di esportazione stessa) noterete che invece di fare da sfondo al livello superiore verrà visualizzato in primo piano coprendo la vostra pagina.

Questo comportamento, apparentemente inspiegabile, è in realtà normale in quanto, affinchè il plugin flash del vostro browser posizioni e visualizzi il filmato nel modo desiderato, è necessario che aggiungiate al codice fornito per il suo inserimento (ammesso che si tratti di codice XHTML valido) la seguente stringa:

[sourcecode language='xhtml'][/sourcecode]

ottenendo quindi un codice di questo tipo:

[sourcecode language='xhtml'][/sourcecode]

A questo punto avrete ottenuto l’effetto desiderato senza dovervi scervellare a gestire il tutto tramite il ben più complicato Flash. Comodo no? :wink:

Ed ecco infine il codice completo di una pagina di esempio in cui un filmato preso da YouTube farà da sfondo al testo:

[sourcecode language='xhtml']< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Come volevasi dimostrare questo testo viene visualizzato sopra il filmato



[/sourcecode]

L'articolo Filmati Flash in background con i CSS è stato pubblicato su Insel der Engel', a cura di Engelium.

Perchè non leggi anche:

]]> http://engelium.netsons.org/blog/2008/03/20/filmati-flash-in-background-con-i-css.html/feed 5