Filtro de contenido HTML/CSS Smooth Pure

Vista prévia

Descripción

Un filtro de contenido HTML/CSS suave y puro, para un efecto más simple con menos líneas de CSS, intercambia las propiedades de ancho, alto, relleno, margen y opacidad en cada estilo de entrada comprobado para "display: None;" — estos estilos estaban configurados para tener un buen tranisición entre filtros.

Funcionamiento

Cree bloques de contenido que desee filtrar.

<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>

Cree botones de filtro basados en etiquetas de & de radio para filtrar bloques de contenido.

<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>

Estilo los bloques & filtros.

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;
}

.tile {

width: 23%;

height: 100px;

float: left;

transition: all 1s;

margin: 0.5%;

padding: 0.5%;
}

.green { background: #1ABC9C; }

.blue { background: #3498DB; }

.red { background: #ED5565; }

Habilite los filtros.

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;
}