Gambar situs efek video dengan CSS

OLEH MATTHEW JAMES TAYLOR PADA 15 JULI 2009

Saya sering mendengarkan last.fm , ini merupakan stasiun radio internet yang luar biasa tetapi mereka juga memiliki sebuah website baik. Satu hal yang saya temukan benar-benar menarik adalah flash pemutar audio mereka. Sementara itu bermain musik itu siklus melalui gambar artis. Tidak hanya itu, tetapi menambahkan filter untuk gambar sehingga mereka terlihat seperti fuzzy, layar video CRT pixelated tua - inilah contoh:

Efek ini dicapai dengan menambahkan lapisan transparan sebagian di atas gambar di flash, tapi kita bisa mencapai gaya yang sama dengan HTML dasar dan CSS. Inilah yang saya siapkan sebelumnya:

Dan di sini adalah gambar yang sama tanpa filter video untuk perbandingan:

Bagaimana menambahkan filter video

Ini sangat mudah, semua yang perlu Anda lakukan adalah membungkus gambar Anda di div dan termasuk tiga bentang setelah gambar. Berikut adalah apa yang tampak HTML seperti: (Catatan I given div kelas 'crt' - tabung sinar katoda)

<div class="crt"> <img src="image.jpg" width="300" height="400" alt="Video Image!" /> <span class="screen"></span> <span class="top"></span> <span class="bottom"></span> </div> 

CSS ini sedikit lebih rumit tetapi Anda dapat men-download gambar saya CSS Video untuk menghemat waktu.

 .crt { float:left; position:relative; overflow:hidden; } .crt img { display:block; float:left; } .crt span.screen { display:block; position:absolute; top:0; left:0; width:1000px; height:1000px; background:transparent url(crt-screen.gif) top left repeat; } .crt span.top { display:block; position:absolute; top:0; left:0; width:1000px; height:70px; background:transparent url(crt-top.png) top left repeat-x; } .crt span.bottom { display:block; position:absolute; left:0; bottom:0; width:1000px; height:110px; background:transparent url(crt-bottom.png) bottom left repeat-x; } 

Anda juga perlu men-download tiga gambar, crt-screen.gif , crt-top.png , dan crt-bottom.png .Gambar-gambar ini membentuk pola pixel ditambah bayangan atas dan bawah.

Dukungan untuk IE 6 dan di bawah

Kau tidak berpikir itu akan mudah kan? Kami memiliki versi lama Internet explorer untuk menangani! IE6 dan versi yang lebih tua tidak mendukung transparansi alpha dalam gambar png jadi kita akan menonaktifkan bayangan atas dan bawah bagi para pengguna miskin. Untuk melakukan itu, kami akan mengekspos IE-satunya stylesheet menggunakan IE komentar bersyarat. Pastikan Anda memasukkannya setelah stylesheet utama. Berikut HTML:

 <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="crt-ie.css" media="screen" /> <![endif]--> 

Download IE-satunya stylesheet di sini , itu sangat sederhana:

 .crt span.top, .crt span.bottom { display:none; } 

Mari kita lebih lanjut dan mengurangi kualitas ;)

Jika kabur pixelation tidak cukup untuk Anda, maka mari kita tambahkan beberapa penerimaan yang buruk hanya untuk bersenang-senang. Untuk melakukan itu saya akan menambah rentang lagi dengan animasi bersalju crt-snow.gif . Saya juga akan menggunakan link bukan div dan memungkinkan salju yang akan dimatikan ketika Anda membawa lebih dari gambar. Sayangnya bagi pengguna IE6 hover tidak akan bekerja, sehingga Anda akan terjebak dengan penerimaan yang buruk selamanya, kecuali tentu saja Anda meng-upgrade browser Anda. Di sini adalah dalam semua kemuliaan kabur:

Nice! Itu benar-benar berkualitas buruk sekarang. Berikut HTML diubah dengan rentang ekstra:

 <div class="crt"> <img src="image.jpg" width="300" height="400" alt="Video Image!" /> <span class="snow"></span> <span class="screen"></span> <span class="top"></span> <span class="bottom"></span> </div> 

Dan di sini adalah file CSS lengkap dengan bit ekstra untuk lapisan salju animasi:

 .crt { float:left; position:relative; overflow:hidden; } .crt img { display:block; float:left; } .crt span.screen , .crt span.snow { display:block; position:absolute; top:0; left:0; width:1000px; height:1000px; background:transparent url(crt-screen.gif) top left repeat; } .crt span.snow { background:transparent url(crt-snow.gif) top left repeat; } .crt:hover span.snow { display:none; } .crt span.top { display:block; position:absolute; top:0; left:0; width:1000px; height:70px; background:transparent url(crt-top.png) top left repeat-x; } .crt span.bottom { display:block; position:absolute; left:0; bottom:0; width:1000px; height:110px; background:transparent url(crt-bottom.png) bottom left repeat-x; } 

Itu saja untuk saat ini. Anda dapat men-download efek video saya demo (crt.zip) yang mencakup semua file yang disebutkan di atas jika Anda ingin bereksperimen dengan itu.Bersenang-senang. - Matt =)

Ikuti saya di Twitter @ mattjamestaylor