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.
Leave a Reply