Efek Transparan Blog Dengan CSS3

Oke, kali ini saya akan mengajarkan kepada anda semua yang tidak tau tentang cara membuat efek transparan di blog dengan CSS3. Seperti apakah efek transparan itu? seperti yang akan saya ajarkan sekarang.

Ada 2 cara pembuatan efek transparan, 1 dengan opacity dan 1 lagi dengan rgba. Mari kita bahas satu per satu


1. Efek transparan dengan opacity . Efek ini cenderung membuat semua objek yang ada di dalamnya menjadi transparan. Jadi jika kita membuat sebuah objek yang terkandung text di dalamnya transparan dengan opacity, maka text tersebut akan ikut transparan juga. Berikut penerapan opacity dalam CSS

contoh {
   background: #2867A5;
   opacity: 0.2;
   float: left;
   height: 130px;
   width: 180px;
   margin: 5px 5px;
   padding: 10px;
}

Maka hasil yang di dapat adalah seperti ini

Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et,

Tulisannya tidak begitu terlihat karena tulisannya di buat transparan juga, itulah kekurangannya.

2. Efek transparan dengan rgba . Cara ini lebih mudah dan tidak akan membuat text transparan, yang dibuat transparan hanyalah background/latar belakangnya saja. Berikut ini bentuk susunan kode dalam CSS

contoh {
   background: #2867A5;
   background-color:rgba(255, 255, 255, 0.5);
   float: left;
   height: 130px;
   width: 180px;
   margin: 5px 5px;
   padding: 10px;
}

Hasil yang di dapat seperti ini

Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et,

Terlihat jauh berbeda dengan yang pertama iyakan?

Penjelasan rgba : background-color:rgba(red, greed, blue, alpha); . Seperti yang anda tahu red green blue adalah 3 warna pokok yang membuat semua warna dan alpha adalah tingkat transparannya. Untuk melihat susuanan warna RGB bisa di lihat dengan menggunakan photoshop.

Sekian pembelajaran kita, semoga bermanfaat dan jangan lupa commentnya oke