注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

CSS3 FilterFunctionality  

2012-01-15 15:52:56|  分类: 设计教程与素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 FilterFunctionality

制作:懒猪儿(猪儿不懒)

教程发布:新松

源文件下载(文件放至新浪微盘,请登录新浪微博后下载)

原E文地址:http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/ (原文上可以看到DOM和E文源文件)

教程只写了比较重要的部分,建议大家下载源文件,配合着看比较好!

为了体现我的懒,这里的代码全是只写了-webkit-引擎,请使用chrome或safari最新版本查看效果。另外这些都是需要大家动手练习才能深刻理解的,光看是没用的。

 

我没有查看E文教程,仿照他们的效果自己做的。有些不明白的地方也看了一下他们的源码,学习一下思路。而思路就是我们这里需要学习的!

我们先看一下想要实现的效果

01

当点击上边菜单的时候,当前菜单就变了一个样式,然后下边的内容也会跟着改变,其实这有点像选项卡效果。

那么我们如何利用,只利用CSS3实现这样子的效果呢?

如果只使用CSS3实现的话,就要感谢其强大的选择器了!我们在这里使用checked伪类来实现。首先人们要在HTML中使用单选按钮:

<input id="type-all" name="radio-set-1" type="radio" checked="checked" />
<label class="menu-all" for="type-all">ALL</label>
<input id="type-web" name="radio-set-1" type="radio" />
<label class="menu-web" for="type-web">Web Design</label>
<input id="type-iius" name="radio-set-1" type="radio" />
<label class="menu-iius" for="type-iius">Illustration</label>
<input id="type-ico" name="radio-set-1" type="radio" />
<label class="menu-ico" for="type-ico">Icon Design</label>

当被选中的时候CSS代码:

#type-all:checked ~ .menu-all,#type-web:checked ~ .menu-web,#type-iius:checked ~ .menu-iius,#type-ico:checked ~ .menu-ico{
    background:-webkit-linear-gradient(top,#666666,#c1c1c1);
    color:#fff;
}

通过上边代码就可以实现点击后改变样式了。

然后我们需要在点击之后切换下边所有图片的效果,要实现这个还是要靠CSS3强大的选择器,我们这里使用的是not伪类:

#type-web:checked ~ .images-items li:not(.items-type-web){
    opacity:0.1;
}
#type-iius:checked ~ .images-items li:not(.items-type-iius){
    opacity:0.1;
}
#type-ico:checked ~ .images-items li:not(.items-type-ico){
    opacity:0.1;
}

当点击的时候除了not里的样式不变化以外,其他的都会变化。

还有个选择器”~”这个是选择同级别下样式,这个选择器不是CSS3里才出现的,写过CSS的人应该都知道,当然也有可能从来没用到过的同学。反正自己查查资料吧,我就不多说了!

这样我们就解决了所有的问题。大家最好下来文件来自己看看,然后做一下,自然能明白其实道理。

做完这个,大家应该可以做做淘宝商城上那种一组图片,指上去后其他图片变暗的效果!还是只用CSS3!

  评论这张
 
阅读(141)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017