ピュアCSSでコンテンツフィルター
Result
クリックすると該当するコンテナを除いて非表示になる、というコンテンツフィルターです。
radioのchecked判定を使用します。
css
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:2% 0.5%;
margin:0.5%;
margin-bottom:30px;
cursor:pointer;
}
input[type="radio"][id="blue"]:checked + label {
background:#0092ff;
}
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:#ea4335;
}
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:#75bd3f;
}
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
width:0;
height:0;
padding:0;
margin:0;
opacity:0;
}
.tile {
width:23%;
height:100px;
float:left;
transition:all 1s;
margin:0.5%;
padding:0.5%;
}
.green {
background:#75bd3f;
}
.blue {
background:#0092ff;
}
.red {
background:#ea4335;
}
|
html
<div class="container">
<input type="radio" id="blue" name="color" />
<label for="blue">青</label>
<input type="radio" id="red" name="color"/>
<label for="red">赤</label>
<input type="radio" id="green" name="color"/>
<label for="green">緑</label>
<input type="radio" id="reset" name="color"/>
<label for="reset">全て</label>
<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>
|
via
Pure CSS content filter
