[ Desain Web ] Efek Fokus pada Elemen saat disentuh - css box shadow, css focus, css position, css z-index, efek fokus, focus effect, web design, desain web, tutorial, cara membuat, cara agar, tutorial blogger, tutorial wordpress, cara wordpress, tips wordpress, tips blogger, optimasi wordpress, optimasi blogger, blogspot, kekinian, tamvan, sitamvan, si tamvan, milenial
[ Desain Web ] Efek Fokus pada Elemen saat disentuh - css box shadow, css focus, css position, css z-index, efek fokus, focus effect, web design, desain web, tutorial, cara membuat, cara agar, tutorial blogger, tutorial wordpress, cara wordpress, tips wordpress, tips blogger, optimasi wordpress, optimasi blogger, blogspot, kekinian, tamvan, sitamvan, si tamvan, milenial

  26 Desember 2018     993 Orang yang kepo!

SiTamvan.com - Efek Fokus yang akan mimin share kali ini sederhana! tujuan-nya adalah untuk mencuri perhatian pengunjung *ciee perhatian..

Bay De Wey.. ini Postingan tutorial tentang Desain Web pertama sitamvan.com gengss,Β  Semoga kedepan-nya mimin tamvan bisa terus konsisten / untuk berbagi ilmu seputar Belajar Web Design / Desain Web .. do’ain mimin yaa! hehe.

Kenapa postingan pertama-nya soal Efek Fokus min?

Karena efek fokus ini seperti yang sudah mimin jelaskan di atas, guna-nya untuk mencuri perhatian pengunjung, sama hal-nya dengan postingan pertama ini.. tujuan-nya untuk mencuri perhatian pengunjung biar gak gagal fokus perhatian sama mimin. wkkwkw *ngarep ya! πŸ˜€

Oke, sekian dulu basa-basi nya! kita balik lagi ke topikΒ Efek Fokus pada Elemen saat disentuh.

Silahkan sentuh dengan cursor mouse manteman gambar bertulisan “Sentuh Aku Gengs!” dibawah ini untuk melihat Demo-nya :

Berikut adalah Kode CSS Efek Fokus pada Elemen saat di hover :

<style>
.fokus:hover {
position:relative;
z-index:100;
box-shadow:0 0 0 1000vw rgba(0,0,0,0.4);
}
</style>

Penjelasan Kode CSS

Efek Fokus yang mimin gunakan disini yaitu menggunakan properti css box-shadow dengan nilai 0 0 0 1000vw rgba(0,0,0,0.4), dan tambahan properti css z-index dengan nilai 100.

Untuk properti css position itu hanya properti css tambahan agar properti css z-index dapat berfungsi.

Cara Memasang di Blog / Website

  1. Simpan kode CSS Efek Fokus di atas tepat sebelum tag </head>
  2. Tambahkan class fokus pada elemen yang akan kita beri efek fokus! contoh:
    <img class="fokus" src="../url-gambar.jpg"/>
  3. Selamat mencoba! semoga berhasil..

Sekian postingan tentang [ Desain Web ] Efek Fokus pada Elemen saat disentuh, Jika ada pertanyaan jangan sungkan untuk Berkomentar dibawah postingan ini.

Terima kasih & Semoga bermanfaat. πŸ˜…πŸ˜‚

Request Tutorial? atau Pertanyaan diluar Topik? silahkan mampir Disini.
# # # # # #

Kasih komen!