Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
KianHome - Bagi sebagian blogger, display atau tampilan blog itu memang jadi hal yang utama, meskipun tidak terlepas dari tema yang dianut oleh blog itu sendiri. Salah satu hal yang paling ditekankan adalah tampilan dengan background sebagai penghias dari design blog tersebut.

Salah satu dari format yang digunakan dalam membuat background itu adalah dengan gambar atau cukup dengan kode warna saja. Pernahkah kalian mengetahui bahwa tampilan background itu bisa kita buat transparant hanya dengan menggunakan kode CSS saja..??? kalau kamu belum tahu kita akan mulai tipsnya.

Hal pertama yang perlu dicermati adalah : kode yang kita gunakan adalah kode CSS, maka kita akan meletakkannya pada format kode CSS juga.
1. Copy kode dibawah ini
filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; -khtml-opacity:0.70;

2. Letakkan pada kode CSS pada background blog kamu, contoh dibawah ini:
#wrapper{backgound:#000;filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; -khtml-opacity:0.70;....}
maka hasilnya akan terlihat sebagai berikut:
lihat contoh berikut

3. Simpan.

Penerapan untuk gambar postingan,
1. Tambahkan kode dibawah ini pada style kode image,
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"

Contohnya :
<img src="Url Gambar" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
Jika penerapan kode pada setiap gambar dirasa sulit, kita bisa menambahkan kode CSSnya saja kedalam kode gambar. Copy kode dibawah ini, dan letakkan sebelum kode ]]></b:skin>
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
Jika sudah simpan.

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

2 Response to "Cara pasang kode background transparant dengan kode CSS3"

  1. Rizkyzone Said,

    dulu aq juga suka blog yang tansparan, keren kalau blog tembus pandang, kalau untuk gambart blogq pakai sistem upload saja bawaan editor ...Replay

     

  2. Kian Coi Said,

    @Rizkyzone : oke deh sob..!!! salam sukses terus yach..!! thank's da comment ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |