Membuat Efek Transparan dengan CSS3

Tutorial CSS3 kali ini saya ingin membahas mengenai membuat efek transparan dengan css3. Dalam postingan saya yang berjudul "Multi-colum layout Menggunakan CSS3" saya menggunakan box-box yang bersifat transparan. Untuk membuat efek transparan sendiri sebenarnya ada banyak cara, salah satunya adalah penggunaan image ber ekstensi .png. tapi kali ini saya akan mencoba berbagi mengenai bagaimana membuat efek transparan dengan menggunakan css3.

Jika kita ingin membuat efek transparan dengan menggunakan css3, ada dua cara/kode yang bisa digunakan. Yang pertama adalah opacity dan yang kedua menggunakan rgba. Sedangkan nilai transparansi ditentukan dengan menggunakan angka 0 sampai 1. Artinya jika kita memberikan nilai 0 pada opacity sebuah box maka box tersebut akan benar-benar transparan, dan jika kita memberikan nilai 1 pada opacity sebuah box maka box tersebut tidak akan memiliki transparansi sama sekali.

  1. Efek transparansi menggunakan kode opacity
    Kode opacity bersifat merubah semua yang ada didalam box tersebut. Jadi, jika kita meletakan sebuah text pada suatu box yang kita beri kode opasity : 0.5;  maka text tersebut akan ikut transparan.

    Penerapan kode opacity pada css :

    .contoh {
       background: #2867A5;
       opacity: 0.2;
       float: left;
       height: 130px;
       width: 180px;
       margin: 5px 5px;
       padding: 10px;
       background-color:rgb(255, 255, 255,);
       -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
       -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
       -webkit-transition: all 0.6s ease-in-out;
    }

    Hasilnya akan terlihat seperti ini :

    Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl.
    Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl.
    Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl.
    Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl.
    Efek animasi hanya terlihat menggunakan
    Google Chrome dan Safari terbaru
    Image courtesy of qvectors.net
  2. Efek transparansi menggunakan kode rgba.
    Kode rgba relatif lebih mudah penggunaanya karena sifatnya yang tidak merubah apa-apa dalam child-nya. Jadi, jika kita meletakan sebuah text pada suatu box yang kita beri kode background-color: rgba(0,0,255,0.5);  maka text tersebut tidak akan ikut transparan.

    Penerapan kode background-color: rgba(0,0,255,0.5); pada css :

    .contoh {
       background: #2867A5;
       float: left;
       height: 130px;
       width: 180px;
       margin: 5px 5px;
       padding: 10px;
       background-color:rgba(255, 255, 255, 0.5);
       -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
       -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
       -webkit-transition: all 0.6s ease-in-out;
    }

    Hasilnya akan terlihat seperti ini :

    Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl.
    Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl.
    Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl.
    Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl.
    Efek animasi hanya terlihat menggunakan
    Google Chrome dan Safari terbaru
    Image courtesy of qvectors.net

Semoga bermanfaat...

Untuk berlangganan
Masukan alamat email anda:

Delivered by FeedBurner

  1. wah mantab infonya
    Thanks infonya
    Kursus internet secara online yang di jamin bisa belajar internet secara cepat
    dan dijamin pintar menguasai internet untuk pemula dan pendaftaran member memakai pulsa 25rb .
    Buruan Daftar!!! http://dijaminpintar.totalh.com
    thanks to this blog

  2. waaaahhh aku suka tuh di bagian pasa krusor mouse di atasnya bisa gerak gitu..
    txs ya boss
    oya kunjungi juga blog aku yaa

    kumpulan artikel

  3. mantab sudah saya coba dan hasilmna..
    mak nyos..
    salam kenal

  4. wah makasih jika memang blog ini berguna...

    terimakasih sudah datang ke blog aku ini...

    salam kenal balik...

Posting Komentar