Membuat Efek Hover Background tag UL Menggunakan CSS - Tempat Blogging

Membuat Efek Hover Background tag UL Menggunakan CSS

Membuat Efek Hover Background tag UL Menggunakan CSS - Daftar CSS3 ul nya menunjukkan menghidupkan properti lebar minimum elemen yang untuk menciptakan efek latar belakang merenggang dengan CSS3.
Di sini kita menggunakan teknik ini untuk menambahkan efek Hover ke daftar UL, sehingga pengguna dapat dengan mudah menavigasi dalam pada item daftar tertentu hanya dengan mengarahkan mouse di atasnya.

Daftar animasi UL menggunakan CSS3, yang bekerja dengan mozilla Firefox, google Chrome, IE10 +, Safari dan browser.



Copy Kode Berikut : 

Pergi Ke > Edit Template > Tekan Ctrl + F dan mencari [[> </ b: skin>

dan paste kode dibawah ini di atas kode [[> </ b: skin>


.post ul{
 margin: 0;
 padding: 0;
 list-style: none;
}
.post ul li{
 width: 100%;
 clear:left;
 overflow: hidden;
}
.post ul li:hover{
 color: #fff;
 background: #ce3e3e;
 border-left: 8px solid darkred;
 min-width: 450px;
 -webkit-box-shadow: 0 0 5px gray;
 -moz-box-shadow: 0 0 5px gray;
 box-shadow: 0 0 5px gray;
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}

Lalu Simpan Template Anda.

Pergi ke Post dan menambahkan daftar ul li untuk mengirim bagian .

Kode HML :


<ul>
<li>List Test 1</li>
<li>List Test 2</li>
<li>List Test 3</li>
<li>List Test 4</li>
</ul>
Catatan :


  • Untuk mengubah warna teks Ganti kode berwarna.
  • Ganti warna perubahan warna latar belakang.
  • Untuk mengubah warna sideborder ganti kode berwarna.
  • Ganti berwarna untuk mengubah lebar.


Sekian dulu Artikel tentang Membuat Efek Hover Background tag UL Menggunakan CSS  semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.
Show comments
Hide comments

0 Response to "Membuat Efek Hover Background tag UL Menggunakan CSS"

Post a Comment

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close