Skip to content

Instantly share code, notes, and snippets.

  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save hyperabsolute/c308dca30d4e5652121a0d7a64fea60c to your computer and use it in GitHub Desktop.
Funky Pure CSS Category Shuffler Control (Sander Nizni)

Funky Pure CSS Category Shuffler Control (Sander Nizni)

Use this Pure CSS control to manage and sort several groups or categories of information, such as images, data blocks, photos, etc. Mark or flag each item on a page as one of the four categories and then display only one category at a time or display them all with a reset button. Enjoy and share | Sander Nizni

A Pen by Sander Nizni on CodePen.

License.

<h1>CATEGORY SHUFFLER IN PURE CSS | SANDER NIZNI</h1>
<div class="container"> <strong>
<input type="radio" id="blue" name="color" />
<label for="blue">purple (as deep)</label>
<input type="radio" id="red" name="color"/>
<label for="red">orange as the sun</label>
<input type="radio" id="green" name="color"/>
<label for="green">green as grass (ha!)</label>
<input type="radio" id="reset" name="color"/>
<label for="reset">show them all</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 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>
</strong>
</div>
/*NO JS OR BS HERE - PURE CSS CODE
ENJOY*/
/*
SANDER SAYS:
NO WARRANTIES EXPRESSED OR IMPLIED
FOR USING THIS CODE. ALL THIS HAS
HAPPENED BEFORE, AND IT WILL HAPPEN
AGAIN... BUT IT DOESN'T MATTER...
BECAUSE WE ARE IN THIS TOGETHER.
C'EST LA VIE. EVERYTHING COULD
HAVE BEEN ANYTHING ELSE, AND IT
WOULD HAVE JUST AS MUCH MEANING.
ENJOY. COMPLIMENTS? PARTY
INVITATIONS? RIGHT ON! CONTACT
@HYPERABSOLUTE ON TWITTER OR ON
UXRIG.COM
STAY AWESOME | HYPERABSOLUTE
*/
body{
margin:0;
text-align:center;
font-family: Verdana;
background:#f5f5f5;
}
h1 {
text-align:left;
padding-left: 25px;
color: #999;
}
.container {
width:77%;
margin:0 auto;
}
input[type="radio"] {
display:none;
}
label {
width:22%;
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.2%;
margin:0.2%;
margin-bottom:30px;
cursor:pointer;
}
input[type="radio"][id="blue"]:checked + label {
background:#65378F;
}
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:orange;
}
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:green;
}
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:22%;
height:80px;
float:left;
transition:all 1s;
margin:0.2%;
padding:0.2%;
}
.green {
background:green;
}
.blue {
background:#65378F;
}
.red {
background: orange;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment