disign.it | HTML5: video di sfondo con pattern | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 2.954 visualizzazioni

HTML5: video di sfondo con pattern

27/09/2013

Nell'esempio proposto inseriamo un video di background fruendo delle potenzialità dei tag html5 unite all'uso di CSS3.

In un div a z-index negativo posizioniamo quindi il nostro video (attenzione, nell'esempio è inserito solo un formato mp4, nella realizzazione pratica è opportuno fornire almeno un formato alternativo .ogg per garantire una maggiore compatibilità di visualizzazione video rispetto a browser diversi), mentre in un div posizionato a livello superiore inseriamo come background il pattern da noi creato determinandone l'opacità.

Con questa tecnica possiamo altresì creare pattern standard da applicare su immagini del nostro sito senza doverle trattare precedentemente con Photoshop, basta inserire l'immagine in sostituzione del video!

Qui trovate l'esempio da cui poter anche accedere alla visualizzazione del codice sorgente.

 

← Whatsapp: come apparire offline Jvascript: effetto pioggia su immagine →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.