flash 2

31 Maret 2012

membuat back ground transparan

Membuat background yang transparan dalam HTML dapat kita lakukan dengan menggunakan CSS maupun gambar.
Membuat background transparan dengan CSS.
Untuk membuat background transparan dengan CSS dapat menggunakan style CSS dengan properti opacity dan background dengan nilai rgba. Kedua properti tersebut merupakan properti dari CSS3.
Kekurangan dari kedua properti diatas adalah tidak mendukung Internet Explorer 8. Untuk properti opacity W3school memberikan solusinya dengan menggunakan filter:alpha.
filter:alpha(opacity=nilai dalam %);
Untuk properti background dengan nilai rgba belum bisa jalan di IE. Dan perlu diperhatikan juga, bila menggunakan filter diatas maka dokumen CSS kita tidak akan memenuhi standar CSS3 alias tidak valid.
Ikuti link berikut ini untuk melihat contoh-contoh dan untuk mengetahui lebih lanjut tentang membuat background transparan dengan CSS.
Membuat background transparan dengan gambar.
Untuk gambar yang transparan dengan pengaturan opacity dapat di buat di program grafik seperti Photoshop atau Firework dalam format PNG.
Menggunakan gambar yang transparan ini lebih baik karena mendukung CSS2.1 dan dapat dijalankan di berbagai browser modern saat ini termasuk juga di IE7.
Problemnya adalah untuk IE6 dan versi dibawahnya belum mendukung penggunaan gambar PNG yang transparan ini.
Jika anda perduli dengan IE6 bisa mencari solusinya dengan menggunakan javascript atau jquery yang tidak akan di bahas dalam modul ini.
Klik link berikut untuk melihat langsung contoh dari membuat background transparan dengan gambar.
Bonus bagi pengguna Firework,
Berikut adalah cara membuat gambar transparan untuk background dengan Firework CS3, untuk Photoshop silahkan cari sendiri tutornya. ;)
Membuat gambar transparan dengan Firework CS3.
Pertama buat Dokumen baru dengan ukuran 100pxX100px, pada Canvas color pilih transparent.
Background Transparan PNG 01
Selanjutnya dari Vector pilih "Rectangle Tool" dan gambar sebuah kotak pada Canvas.
ackground Transparan PNG 02
Pada Properties set width dan height = 100 kemudian X,Y = 0. Untuk warna terserah mau warna apa.
ackground Transparan PNG 03
Klik gambar untuk mengaktifkan maka pada jendela Properties sebelah kanan akan muncul pengaturan opacity tepat diatas Filters, atur posisinya sekitar 50.
ackground Transparan PNG 04
Dari menu "File" pilih "Save As", kemudian untuk File name masukkan nama filenya pada "Save as type" pilih "Flattenet PNG". Sebelum di simpan tekan tombol Option maka akan muncul jendela seperti berikut.
ackground Transparan PNG 05
Untuk "type of transparency" pilih "Alpha Transparency", tekan "Ok" baru disimpan (Save).
Sekarang gambar tesebut sudah dapat digunakan sebagai contoh untuk membuat background transparan dengan gambar.
Selamat mencoba.

Tidak ada komentar:

Posting Komentar