Membuat Filter Warna dengan CSS

Membuat Filter Warna dengan CSS – Filter Warna ini memang dibuat hanya menggunakan CSS tanpa JavaScript dan kode skrip ini dibuat oleh Sam Gordon. Yang dipakai adalah elemen input dengan type diset radio dan name diset color. Seperti yang ditampilkan di atas.

Untuk HTML cukup memakai satu div saja dengan selektor class diberi nilai container. Kita buat empat buah elemen input dengan masing-masing diberi selektor id dengan tiga selektor untuk warna dan satu selektor untuk reset. Kita beri judul Filter Warna dengan CSS dengan set heading h1.

<h1>Filter Warna dengan CSS</h1>
<div class="container"> 
     <input type="radio" id="blue" name="color" />
     <label for="blue">BLUE</label>
     <input type="radio" id="red" name="color"/>
     <label for="red">RED</label>
     <input type="radio" id="green" name="color"/>
     <label for="green">GREEN</label>
     <input type="radio" id="reset" name="color"/>
     <label for="reset">RESET</label>

Untuk menampilkan kotak warna dengan tiga warna yang berbeda. Buat selektor class dengan memasukan dua nama yang berbeda di dalam selektor tersebut. Pertama diset default beri nama tile dan yang kedua beri nama (red, blue, dan green) seperti kode yang di bawah ini.

     <div class="tile blue">1</div>
     <div class="tile red">2</div>
     <div class="tile blue">3</div>
     <div class="tile green">4</div>
     <div class="tile blue">5</div>
     <div class="tile red">6</div>
     <div class="tile red">7</div>
     <div class="tile green">8</div>
     <div class="tile blue">9</div>
     <div class="tile green">10</div>
     <div class="tile red">11</div>
     <div class="tile green">12</div>
     <div class="tile blue">13</div>
     <div class="tile blue">14</div>
     <div class="tile green">15</div>
     <div class="tile red">16</div>
</div>

Berikutnya pengaturan CSS untuk menampilkan filter warna ini, kita masukkan dulu untuk style general. Silahkan Anda bisa masukkan kode di bawah ini.

body{
  margin:0;
  text-align:center;
  font-family: Verdana;
  background:#f5f5f5;
}
h1 {
  text-align:center;
}
.container {
  width:90%;
  margin:0 auto;
}

Selanjutnya untuk empat elemen input dengan type dengan nilai radio masukan properti display pada nilai none. Kita akan menyembunyikan selektor dari input ini lebih terfokus pada selektor label nya. Anda tetapkan kode seperti ini:

input[type="radio"] {
    display:none;
}
label {
  width:23%;
  float:left;
  text-align:center;
  background:#ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  color:#222222;
  padding:0.5%;
  margin:0.5%;
  margin-bottom:30px;
  cursor:pointer;
}

Nah, untuk label setiap selektor id telah ditetapkan sama yaitu untuk red, green, blue dan reset. Berikutnya kita aktikan setiap selektor input tadi supaya bisa bergantian sesuai dengan filter warnanya. Ketika kita memilih label red maka yang tampil adalah kotak warna merah saja begitupula untuk label blue dan green yang tampil sesuai dengan warna yang dipilih. Namun untuk label reset berarti akan tampil semua filter warna. Kode CSS nya sebagai berikut.

input[type="radio"][id="blue"]:checked + label {
  background:#6666ff;
}
input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="red"]:checked + label {
  background:#ff4466;
}
input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="green"]:checked + label {
  background:#66dd99;
}
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

Belum sampai disitu karena tampilan kotak warna seperti gambar yang diinginkan belum sempurna, jika Anda refresh di browser yang tampil hanya berupa angka-angka saja. Sekarang kita tetapkan warna untuk setiap selektor red, green dan blue.

.tile {
  width:23%;
  height:100px;
  float:left;
  transition:all 1s;
  margin:0.5%;
  padding:0.5%;
}
.green {
  background:#66dd99;
}
.blue {
  background:#6666ff;
}
.red {
  background:#ff4466;
}

Sekarang Anda bisa kembali lihat perbedaannya, jika Anda mengikuti semua kode HTML dan CSS seperti yang di atas yang akan ditampilkan seperti berikut ini.

See the Pen Pure CSS content filter by Sam Gordon (@samgordon) on CodePen.