Skip to main content

Membuat Contrast Efect Pada Gambar Dengan Css

Image Hover Contrast - Jika sebelumnya kita telah membahas wacana cara menciptakan efect hover zoom image dengan css, maka kini kita membahas wacana image contrast efect dan tentu nya masih dengan menggunkan css. Apa manfaat image contrast efect pada atikel blogger? manfaat-nya yaitu untuk memanjakan para pembaca (pengunjung) dengan hal-hal kecil namun menarik untuk di nikmati.

Contrast efect secara umum sanggup diartikan sebagai gradasi,kecerahan, atau nada (warna) antara bidang gelap (shadow) dengan bidang terang. Nah itulah yang akan kita buat kini ini dengan memakai css. Supaya ada seni dari sebuah gambar yang ditampilkan pada sebuah artikel, dikala gambar di hover atau dilalui oleh mouse maka otomatis gambar akan memancarkan cahaya lebih terang (cahaya yang berwarna).

Cara Menerapkan Css Image Hover Dengan Contarst Efect

Simpan Css Image Hover (Image Contrast) berikut ini kedalam template blog kamu, dan letakkan sempurna di atas kode ]]></b:skin>.
.imgscontras1:hover{transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-webkit-filter:contrast(130%);}
Keterangan:
.imgscontras1 merupakan "id" sasaran yang ingin di beri imbas contrast (cahaya), id tersebut sanggup kau ganti dengan apa saja asalkan di awali dengan titik dan tidak memakai spasi, kemudian
Nilai 150% merupakan level kecerahan atau contrast, semakin besar nilai contras nya akan semakin terang pula imbas yang ditampilkan pada gambar, sebaliknya semakin kecil nilai contras nya maka semakin redup efect cahaya "contrast" pada gambar.

Penerapan Tag Image Untuk Memanggil Css Image Contras

Saya telah menyediakan tiga type tag image, kau tinggal menentukan nya saja mana yang cocok buat kamu, dan yang lebih gampang berdasarkan kamu, namun disarankan pilih yang nomer 2 atau nomer 3.
<img class="imgscontras1" src="url_gambar" width="100%"  height="auto"/></img>
<a  class="imgscontras1"   href="url_tujuan"><img  border="0" src="url_gambar" width="100%" height="auto"/></a>
Image (Gambar) disertai link target
<center><a title="Membuat Contrast Efect Pada Gambar Dengan Css" href="http://tukanglistrikpulaubatam.blogspot.com"target="_blank"><img class="imgscontras1" alt=" Jika sebelumnya kita telah membahas wacana Membuat Contrast Efect Pada Gambar Dengan Css" src="url_gambar" width="100%" height="auto"/></a></center>
Ganti url_gambar dengan url gambar yang ingin kau tampilakan
Pada tag image nomer 3 ganti juga ulr blog ini (url_tujuan) dengan url yang kau targetkan.

Demikian klarifikasi dan cara menciptakan imbas cahaya "contrast" pada gambar postingan blog memakai Css, kalimat epilog nya masih sama yaitu "semoga bermanfaat dan selamat mencoba" selesai...! Demo nya lihat dan arahkan mouse kau pada gambar di bawah ini.
Labels:

Comments

Post a Comment

Popular posts from this blog

Widget Contact Form Responsive

Widget Contact Form Responsive - Contact Form atau Contact Us merupakan satu dari beberapa widget penting yang harus ada di setiap laman website termasuk situs blogger, widget contact form merupakan mediator yang menghubungkan antara visitor dengan pengelola situs, Contact form (formulir kontak) biasanya dipakai untuk mengirim pesan berupa kritik, saran, pemesanan pemasangan iklan dan lain-lain. selain itu contact form juga berfungsi sebagai penyaring spam atau malware yang kemungkinan dikirim oleh visitor badung ke e-mail pengelola situs. Platform blogger bekerjsama sudah menyediakan widget contact form untuk situs-situs blog, namun tampilan contact form yang disediakan masih sangat sederhana "default" pengelola situs harus menyesuikan style contact form nya sendiri dengan sedikit penambahan css untuk menciptakan tampilan contact form menjadi lebih elegant. Widget Contact Form Responsive Cara Membuat Laman Contact Form Blogger Login ke Blogger dan buat satu laman ...
Post a Comment
Read more

Cara Buat Tombol Share Sticky Bottom (Melayang Dibawah)

Cara Membuat Share Button Sticky Bottom Blogger - Akhir-akhir ini berbagai variasi tombol share muncul ke pasaran dunia cyber " website & blog " tentunya, dan yang paling terkenal ialah tombol share sticky bottom dan sidebar . Gaya yang lainnya tombol share drop-down. Pada artikel ini aku akan membahas Cara menciptakan tombol share sticky bottom (melayang di bawah) pada perangkat mobile (Handphone) dan tombol share sticky sidebar "melayang di samping jikalau di lihat melalui PC. Adapun tombol share yang akan kita buat merupakan tombol share (share button) yang ringan "sticky bottom" dengan sedikit script namun sangat responsive pada perangkat seluler. Sehingga tidak memberi efek jelek pada loading situs anda. Langsung saja simak langkah-langkah cara menciptakan tombol share sticky bottom berikut ini. Kunjungi laman penyedia tombol share yaitu www.addthis.com Silahkan login dengan dengan e-mail atau facebook anda untuk masuk ke dashboard add...
Post a Comment
Read more

Cara Paralel Exhaust Dengan Lampu

Paralel Hexos Dengan Lampu Paralel Exhaust Dengan Lampu maksudnya yaitu menggabungkan antara exhaust atau fan dengan lampu ke satu switch. Umumnya pada benda electronic menyerupai exhaust memakai jenis kabel NYY isi 3 yaitu Phase, Netral dan Ground sebagai penghubung. Sedangkan Pada instalasi listrik fitting lampu hanya memnggunakan kabel Jenis NYA sebanyak 2 kabel saja yaitu kabel Phase dan Netral saja. Lalu bagaimana " cara memparalel exhaust dengan lampu? " Bahasa singkat dalam teori instalasi listrik " Gabungkan antara netaral exhaust ke netral lampu dan phase ke phase sedangkan kabel ground hubungkan dengan kabel ground pada sumber ground ". Bagaimana mengetahui kabel phase, netral dan ground pada benda electronic menyerupai exhaust? simak panduan instalasi listrik di bawah ini. Warna Kabel NYY Pada barang electronic menyerupai exhaust umumnya ada tiga warna yaitu Biru, Coklat, Dan Kuning atau Coklat, Hitam dan putih.  Biru sebagai kabel Phase ...
Post a Comment
Read more