图片/图形

纯CSS3图片分类过滤效果

阿里云


这是一款使用纯 css3 制作的图片分类过滤效果插件。该插件可以过滤出所有图片中的某一类图片。该图片分类过滤共有三种效果:图片模糊效果,图片缩小模糊效果和放大缩小效果。通过使用兄弟选择器和:checked 伪元素,我们能够轻易的切换 checkbox 或 radio 的状态。这个插件就是使用它们来实现的。这个插件的灵感来自于 Filtering elements without JS 。

html 结构

html 结构中需要 4 个用于分类的按钮,我们使用 radio 和 label 来制作这些按钮。在默认状态下,所有的图片都被显示。使用 Label 是为了只显示文本而隐藏 radio 按钮。

也想出现在这里?联系我们
创客主机
  1. <section class="ff-container">
  2.     <input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />
  3.     <label for="select-type-all" class="ff-label-type-all">All</label>
  4.     <input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
  5.     <label for="select-type-1" class="ff-label-type-1">Web Design</label> 
  6.     <input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
  7.     <label for="select-type-2" class="ff-label-type-2">Illustration</label> 
  8.     <input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
  9.     <label for="select-type-3" class="ff-label-type-3">Icon Design</label>   
  10.     <div class="clr"></div>
  11.     <ul class="ff-items">
  12.         <li class="ff-item-type-1">
  13.             <a href="http://dribbble.com/shots/366400-Chameleon">
  14.                 <span>Chameleon</span>
  15.                 <img src="images/1.jpg" />
  16.             </a>
  17.         </li>
  18.         <li class="ff-item-type-2">
  19.             <!-- ... -->
  20.         </li>
  21.         <li class="ff-item-type-3">
  22.             <!-- ... -->
  23.         </li>
  24.         <!-- ... -->
  25.     </ul>  
  26. </section>

无序列表中包含了所有的图片,每一个列表项的 class 各不相同,插件通过这个 class 来对图片进行过滤分类。

CSS 样式

首先来看通用样式,主容器要有一个宽度:

  1. .ff-container{
  2.     width: 564px;
  3.     margin: 10px auto 30px auto;
  4. }

label 要遮盖住 radio,并给它一些好看的渐变:

  1. .ff-container label{
  2.     font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  3.     width: 25%;
  4.     height: 30px;
  5.     cursor: pointer;
  6.     color: #777;
  7.     text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  8.     line-height: 33px;
  9.     font-size: 19px;
  10.     background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  11.     float:left;
  12.     box-shadow: 
  13.         0px 0px 0px 1px #aaa, 
  14.         1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
  15.         0px 1px 2px rgba(0,0,0,0.2);
  16. }

给按钮一些圆角效果,因为按钮连成一排,只需要给第一个和最后一个按钮圆角即可:

  1. .ff-container label.ff-label-type-all{
  2.     border-radius: 3px 0px 0px 3px;
  3. }
  4. .ff-container label.ff-label-type-3{
  5.     border-radius: 0px 3px 3px 0px;
  6. }

对于每一个没"checked"的 radio 按钮,我们给它下面这个"pressed"样式:

  1. .ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
  2. .ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
  3. .ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
  4. .ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{
  5.     background: linear-gradient(top, #646d93 0%,#7c87ad 100%);
  6.     color: #424d71;
  7.     text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
  8.     box-shadow: 
  9.         0px 0px 0px 1px #40496e, 
  10.         0 1px 2px rgba(0,0,0,0.1) inset;
  11. }

因为所有的元素都在同一层,这里使用“~”兄弟选择器来选择它们各种的 label。这时候该隐藏 radio 按钮:

  1. .ff-container input{
  2.     display: none;
  3. }

给无序列表一些样式:

  1. .ff-items{
  2.     position: relative;
  3.     margin: 0px auto;
  4.     padding-top: 20px;
  5. }

下面是无序列表中的 span 和 a 元素的样式:

  1. .ff-items a{
  2.     display: block;
  3.     position: relative;
  4.     padding: 10px;
  5.     background: #fff;
  6.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  7.     margin: 4px;
  8.     width: 160px;
  9.     height: 120px;
  10. }
  11. .ff-items a span{
  12.     display: block;
  13.     background: rgba(113,123,161, 0.9);
  14.     font-style: italic;
  15.     color: #fff;
  16.     font-weight: bold;
  17.     padding: 20px;
  18.     position: absolute;
  19.     bottom: 10px;
  20.     left: 10px;
  21.     width: 120px;
  22.     height: 0px;
  23.     overflow: hidden;
  24.     opacity: 0;
  25.     text-align: center;
  26.     text-shadow: 1px 1px 1px #303857;
  27.     transition: all 0.3s ease-in-out;
  28. }
  29. .ff-items a:hover span{
  30.     height: 80px;
  31.     opacity: 1;
  32. }
  33. .ff-items li img{
  34.     display: block;
  35. }

当鼠标滑过图片时,从图片下方出现一个半透明遮罩效果。以上是三个 demo 的通用样式,具体每个 demo 的动画样式请参考下载文件。

纯 CSS3 图片分类过滤效果

已有 435 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!