Blog Request tutorial? klik disini!

  • Gambar Transparan Dengan CSS3

    Ditulis oleh: Aulia Rahmah Alhafidz
    664 kali dibaca
    02 Sep / 2014 13:45

    Hai semua :) Hari ini kita akan mempelajari cara membuat gambar menjadi transparan dengan menggunakan CSS3. Ini akan menjadi pembelajaran yang sangat mudah. Karena kita hanya akan membutuhkan beberapa huruf untuk membuatnya menjadi transparan. Loh? Bagaimana bisa? Langsung saja pelajari ya!

    Untuk membuat sebuah gambar menjadi transparan, kita hanya tinggal menyelipkan kata "opacity" pada cssnya. Hah? Semudah itu? Tentu saja. Lalu, bagaimana caranya? Pertama kita membutuhkan sebuah gambar. Ini contohnya :

    gambar-transparan

    Sekarang kita akan mencoba membuat gambar menjadi transparan. Perhatikan contoh berikut :

    See the Pen Bqoib by Dumet_School (@dumet_school) on CodePen.

    Di sebelah kiri, adalah contoh utamanya, dimana gambar menjadi transparan saat ditampilkan. Sedangkan yang sebelah kanan, adalah contoh bagaimana efek gambar pada saat hover.

    Penjelasan script :

    opacity dan filter: alpha(opacity=...) untuk penggunaannya sama. Yang membedakan adalah, opacity dipakai untuk browser Internet Explorer 9, Firefox,Chrome, Opera dan Safari. Dan value-nya berkisar dari 0.0 - 1.0. Semakin kecil value, maka semakin transparan gambarnya.

    Sedangkan filter: alpha(opacity=...) dipakai untuk browser Internet Explorer 8. Dan value-nya dimulai dari 0 - 100. Semakin kecil value, maka semakin transparan gambarnya.

    Benar-benar mudah kan? Semoga bermanfaat ya :)






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155