<h1>FILTER BY COLOR</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> <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>
body{ margin:0; text-align:center; font-family: Verdana; background:#f5f5f5; } h1 { text-align:center; } .container { width:90%; margin:0 auto; } 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; } 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; } .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; }
实例:
http://codepen.io/samgordon/pen/jPqqWB
例子:
http://codyhouse.co/demo/content-filter/index.html
下载:
相关推荐
雅虎的pure css免费响应式前端框架
Pure是一个简单、实用的CSS框架,鉴于目前网上对pure的资料比较少,所以我想把使用pure的一些经验介绍给大家,相信你看完本文后也会爱上pure。 Pure包含多个模块:Base(基本样式)、Grids(网格系统)、Forms(表单)、...
利用jQuery与PureCSS实现的可编辑表格源码.zip 利用jQuery与PureCSS实现的可编辑表格源码.zip 利用jQuery与PureCSS实现的可编辑表格源码.zip
仿支付宝橙色导航菜单,可再开发,二次开发。
Pure css implemented menu, add .html subfix.
这是一款十分简单的jQuery+PureCSS实现的可编辑表格插件,点击table表格的单元格对文字内容进行修改,再在单元格外随意点击一下即可保存。
使用purecss制作的一个基本的admin后台模板。支持IE8+、chrome、firefox等主流浏览器
今天要介绍的一款jQuery是一个可编辑的表格,它的实现非常简单,主要利用了jQuery插件和PureCSS插件,简单的引用和初始化JavaScript语句即可让网页上的table表格可以自定义编辑,非常实用。
NULL 博文链接:https://justcoding.iteye.com/blog/1103120
纯 CSS 您可以在每个 Web 项目中使用的一组小型响应式 CSS 模块。 使用 Atmospherejs 安装 流星安装 flaviocopes:purecss 变更日志 2015.05.08:第一个版本,PureCSS 0.6.0
Sass的纯CSS purecss-sass是适用于您的应用程序的Sass支持的版本,允许同时包含Pure的所有组件或单独加载它们。 原始的纯CSS文件是使用sass-convert ,否则将保持不变并保持不变。npm和纱线要安装purecss-sass npm...
纯洁Pure 是一组小型的响应式 CSS 模块,您可以在雅虎开发团队实现的每个 Web 项目中使用它们。 这个 gem 将 Pure CSS 0.5.0 添加到 Rails 3.2 的资产管道中。 此外,它还提供一个 jQuery 函数,可以自动启用下拉...
用CSS制作TabMenu. 不过是英文的.
Nice template for contact forms using pure CSS
具体效果查看该https://www.html5tricks.com/demo/pure-css3-lighter/index.html
纯CSS网站展示的网站。从本地运行分支这是一个使用Express.js的node.js网站,这意味着在本地运行非常容易。 $ npm install$ npm start自动构建浏览器资产该站点使用集成的构建过程。 当网站以开发模式运行时,...
纯成分 使用React组件 文件 使用: 工作正在进行中 原料药 helpers, Button, ButtonGroup, Cell, Checkbox, ControlGroup, Controls, Form, FormGroup, FormMessage, FormMessageInline, ... Table,
响应式 purecss Meteor 包这个 Meteor 包添加了带有响应式网格模块的 purecss。文档: 您可以在每个 Web 项目中使用的一组小型响应式 CSS 模块。 安装$ meteor add agustino:purecss