Pada tutorial desain web ini akan dibahas efek blur saat ada event hover pada tabel, dimana baris yang fokus tidak di blur, sedangkan content table yang lain blur.

Struktur table
Untuk membuat efek blur, buat table dengan struktur / coding sebagai berikut:

<table>
  <tbody>
    <tr>
      <th>Baris</th>
      <th>Kolom 1</th>
      <th>Kolom 2</th>
      <th>Kolom 3</th>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
  </tbody>
</table>

Kemudian buat CSS sebagai berikut:

table th,table td{
  border:1px solid #eee;
  padding:5px 10px;
  text-align:center;
}
/* Efek Zebra */
table tr:nth-child(odd){
  background:#e0e0e0;
}
table tr:nth-child(even){
  background:#f0f0f0;
}
/* Blur seluruh table saat hover */
table tbody:hover td{
  color:transparent;
  text-shadow:0 0 2px #555;
}
/* baris yang ditunjuk mouse jgn diblur*/
table tbody tr:hover td{
  color:#000;
  text-shadow:none;
}

HASIL

See the Pen Efek Blur pada tabel by HUMAYRAA (@humayraadotcom) on CodePen.0

Incoming search terms:

(Visited 316 times, 2 visits today)