Nilai opacity sebenarnya merupakan nilai yang menunjukkan tingkat transparansi sebuah object. Setiap browser menggunakan standar nilai serta bentuk KODE yang berbeda. Nilai transparansi untuk IE menggunakan nilai diantara 0 s/d 100, sedang untuk Mozilla, Opera, Safari, Google Chrome, SeaMonkey serta beberapa browser lain menggunakan standar nilai 0 s/d 1.0. Apabila nilai terendah digunakan (0=nol), maka gambar akan ditampilkan dalam bentuk transparan. Jadi semakin kecil nilai opacity, maka gambar menjadi semakin transparan hingga menjadi tak terlihat. Dalam penggunaannya, opacity property dapat di aplikasikan melalui kode css tau langsung dalam tag html. Penempatan yang bersifat permanen dilakukan pada bagian head dalam bentuk kode css, sedang penggunaan pada bagian body bersifat temporer. Sifat opacity yang mampu menciptakan banyak fungsi membuatnya banyak digunakan untuk menciptakan effect-effect yang atraktif dan dinamis sehingga tampilan blog menjadi semakin variatif dan menarik.
Cara membuat background blog sendiri transparan
Untuk membuat background blog sendiri transparan agan hanya perlu sedikit keahlian dalam format code script, namun bagi sobat blogger yang merasa tidak terlalu mengerti tentang code script tidak perlu khawatir karena disini ane akan memberikan code script yang akan membuat background blog sendiri transparan, berikut ini code script-nya :
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.6;
-khtml-opacity: 0.0;
Untuk cara memakainya silahkan ikuti langkah-langkah dibawah ini.
1. Masuk ke akun Blogger agan.
2. Pilih "Template" -> "Edit HTML"
3. Centang "Expand Template Widget"
4. Cari kode #outer-wrapper{ dengan menggunakan Ctrl + F
5. Simpan kode diatas percis seperti penempatannya dibawah ini
#outer-wrapper{
width:980px;
margin:0 auto;
padding:5px;
background:#f2f2f2;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.6;
-khtml-opacity: 0.0;
border:1px solid $bordercolor;
text-align:$startSide;
font:$bodyfont
}
Note:
Silahkan sesuaikan nominal kode yang berwana merah dengan selera agan.
Dasar CSS Transparansi Gambar atau CSS Image Transparency/Opacity
Properti CSS yang digunakan sebagai perintah efek transparansi gambar adalah opacity:x. Properti ini digunakan oleh Mozilla Firefox dan beberapa browser lain. Sedang pada IE (Internet Explorer) digunakan properti filter:alpha(opacity=x). X adalah nilai transparansi, pada Mozilla Firefox dan beberapa browser lain, nilai defaultnya adalah 1.0, sedangkan pada IE adalah 100. Untuk memberikan besaran efek transparan, kecilkan nilai x-nya. Pengurangan dengan value yang sama antara browser lain dengan IE adalah 1/10, jadi kurangi 0.1 pada opacity dan kurang 10 pada filter untuk mendapatkan efek transparansi yang sama. Semakin kecil nilai x semakin besar transparansinya.
Contoh:
img {opacity:0.5;filter:alpha(opacity=50;}
Penggunaan Transparansi Gambar sebagai Efek Hover (Mouse Over)
Seperti yang telah dijelaskan di atas, efek ini sering digunakan dan dipadukan sebagai hover effect. Maka, posting kali ini akan berfokus pada penggunaan transparansi gambar sebagai efek hover.
Sebagaimana pada link (a) dan hover link (a:hover), kita pun dapat menerapkannya pada gambar.
img {opacity:1.0;filter:alpha(opacity=100;}
img:hover {opacity: 0.5;filter:alpha(opacity=50;}
Atau sebaliknya, jika ingin gambar berubah jadi terang (tidak transparan) ketika mouse diarahkan diatasnya, tukar nilai transparansinya:
img {opacity: 0.5;filter:alpha(opacity=50;}
img:hover {opacity:1.0;filter:alpha(opacity=100;}
Membuat Efek Hover Transparan Pada Gambar Secara Individual (tanpa link)
Jika ingin membuat efek transparan gambar yang ingin diberi efek tanpa mengandung link (diapit tag <a> dan </a>):
1. Masukkan script berikut di atas ]]></b:skin>
.fafan-transparan {opacity:1.0;filter:alpha(opacity=100);}
.fafan-transparan:hover {opacity: 0.5;filter:alpha(opacity=50);}
atau sebaliknya,
.fafan-transparan {opacity: 0.5;filter:alpha(opacity=50);}
.fafan-transparan:hover {opacity:1.0;filter:alpha(opacity=100);}
2. Save template.
3. Pada tag gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="fafan-transparan"
Contoh:
<img class="fafan-transparan" border="0" src="http://urlgambar.com/image.jpg" />
Membuat Efek Hover Transparan Pada Gambar yang Mengandung Link
Jika yang ingin diberi efek hover transparan adalah gambar yang mengandung link, maka dibutuhkan deklarator link (a) dan image (img) pada CSSnya:
1. Masukkan script berikut di atas ]]></b:skin>
a.fafan-transparan img {opacity:1.0;filter:alpha(opacity=100);}
a.fafan-transparan:hover img {opacity: 0.5;filter:alpha(opacity=50);}
atau sebaliknya,
a.fafan-transparan img {opacity: 0.5;filter:alpha(opacity=50);}
a.fafan-transparan:hover img {opacity:1.0;filter:alpha(opacity=100);}
2. Save template.
3. Pada tag link gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="fafan-transparan"
Contoh:.
<a class="fafan-transparan" href="http://fafansuka.blogspot.com"><img border="0" src="http://urlgambar.com/image.jpg" /></a>
Bagaimana sobat fafan, apa masih kurang informasi diatas ? baiklah bro ... nih tutorial lanjutannya, monggo disimak .....
KODE-KODE di bawah ini merupakan contoh pemanfaatan opacity untuk menciptakan effect blur pada gambar :
1. Penggunaan opacity di bagian head. KODE ini bisa ditempatkan di atas ]]></b:skin>
Kode CSS :
.FIDOblur img{
filter:alpha(opacity=20);
opacity:0.2;border:0;
}
.FIDOblur:hover img{
filter:alpha(opacity=100);
opacity:1.0;
}
xHTML :
<a href="http://fafansuka.blogspot.com/" class="FIDOblur"><img src="http://3.bp.blogspot.com/-VMDxCth--28/UYMvPxLIXhI/AAAAAAAAB9o/q2AEYfUWYeo/s1600/558471_567678489930975_1798083130_n.jpg" border="0" width="250" height="250"/></a>
Sangat menarik bukan penggunaan efek opacity ?, ikuti tutorial gabungan opacity dengan transition :
Cara Memperbagus Link atau Teks di blog
Memperbagus Link dengan Background
- Masuk ke Blogger
- Klik Template > Edit HTML
- Cari kode "a:link" ( tanpa kutip )
- nanti akan ketemu kurang lebih seperti dibawah ini
a:link {opacity:2;color:red;transition: opacity .35s ease-in-out;-moz-transition: opacity .35s ease-in-out;-webkit-transition: opacity .35s ease-in-out;-o-transition: opacity .35s ease-in-out; }
Nah setelah itu ganti kode diatas dengan kode dibawah
a:link {opacity:2;color:red;transition: opacity .35s ease-in-out;-moz-transition: opacity .35s ease-in-out;-webkit-transition: opacity .35s ease-in-out;-o-transition: opacity .35s ease-in-out; }
a:visited{text-decoration:italic;outline:none;}
a:hover{opacity:.5;color:green;background:url(http://i.imgur.com/Q5arH.gif);text-decoration:none;outline:none;}
Keterangan : Jika sudah ada kode "a:visited / a:hover" ganti keduanya dengan kode diatas
Memperbagus Link dengan Kode Warna - Warni
Masuk ke Blogger
Klik Tata Letak > Add Gadget > HTML Javascript > Masukan kode dibawah
<script src='http://hbhost.googlecode.com/files/rainbow-link.js'/>
Klik "Save" atau "Simpan"
Memperbagus Teks dengan Panggilan CSS
Masuk ke Blogger
Klik Template > Edit HTML
Cari kode "]]></b:skin>" atau "</b:skin>" Masukan kode dibawah diatas kode itu
.link-kelap {
color:red;
opacity:2
}
.link-kelap:active {
color:blue;
opacity:5;
background:url(http://i.imgur.com/Q5arH.gif)
}
.link-kelap:hover {
color:green;
opacity:8;
background:url(http://i.imgur.com/Q5arH.gif)
}
Klik Simpan Template
Untuk Pemanggilannya Cukup taruh kode dibawah di dalam postingan (HTML) atau yang lainnya :
<div class="link-kelap">
Teks, script atau yang lainnya disini
</div>
Sekian dulu ya sobat, bentar lagi insalloh saur buat puasa ramadhan 1434 H , pasang posting ini sambil liat film sejarah nabi Mukhammad SAW dan para Sahabatnya, wow seru buat inspirasi. semoga anda puas dengan artikel diatas dan postingan ini tentang Aneka Ragam Efek Transparan pada Blog
Backlink here..
{ 0 komentar... Views All / Send Comment! }
Posting Komentar