Coding HTML CSS Web Desain

Membuat Efek Blur pada Table

Membuat Efek Blur pada Table Juli 22, 20151 Comment

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

hover efek blur

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:

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

One comment

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *