轩枫阁

简介

纯CSS3实现GIF图片进度加载效果，我们经常会用gif图片在做加载进度动画，如今我们可以用纯CSS3来实现相同的效果，CSS3实现加载动画可以节省图片加载时间。

效果图

查看全文

简介

iOS7样式开关jQuery插件，这是一款基于jQuery的仿iOS7开关，你只需简单的设置就可以实现不同颜色样式的iOS7开关。

效果图

效果预览

http://www.xuanfengge.com/demo/201410/IOS7/

源码下载

http://t.cn/8Fjerjs 查看全文

现在来为大家播报一些前端FE近期所发现的技巧。厌倦了陈旧的理论描述，来看看又有什么新技巧吧，绝对新颖。

Chrome 34 Beta看点

Chrome 34 Beta新看点：响应式图像、Unprefixed Web Audio和免提语音搜索。其中，不论是电脑、平板、手机还是电视，响应式图像都能让浏览器根据设备而选择不同资源，从而加快页面加载时间、减少带宽浪费以及避免出现内容格式不当。http://www.csdn.net/article/2014-02-28/2818574

响应式图片规范

src-N 已死，<picture>走上复兴之路。现在srcset可以直接单独应用在img元素上，简单情况下，不再需要 picture 和 source 元素。src-N 规范为响应式图片所做出的贡献将被载入史册，感谢 Tab Atkins 的努力！最新规范：http://t.cn/8FdEpqO 查看全文

前言

最近很流行图片高斯模糊处理，让网站的图片看起来有高大上的效果。应用点：如网站Banner、大气背景图等。模糊背景（blurred backgrounds）是一个很常见的设计效果，也被称为背景虚化，在网页和App的设计中屡见不鲜。虚化的界面设计直观的给人一种干净自然的视觉感受，因此，模糊背景的基调会使整个界面看起来更柔美。合理运用虚化背景可以将界面效果提高一个档次。

案例素材

背景虚化案例

优秀案例参考：http://www.uisdc.com/blurred-background-website-design

国外优秀案例：http://www.onextrapixel.com/2013/12/06/effective-use-of-blurred-images-in-web-design/

透明效果网站：http://www.uisdc.com/transparency-website-design

背景图片资源

模糊图片下载：http://vdisk.weibo.com/s/dt23BkiXHbFmp

150+背景素材：http://vdisk.weibo.com/s/aj4Q1htdUrYaV

模糊景观背景：http://vdisk.weibo.com/s/aj4Q1hteoqwVO

模糊材质纹理：http://pepsized.com/100-free-blurry-textures/

实现方案

方案一：图片高斯模糊

直接利用PS处理图片，使图片高斯模糊，调节参数可达到不同效果。 查看全文

前言

前端开发工程师介于设计师和后台开发中间，其实也算是视觉系，其中很多人同时也是很棒的设计师。那么无论是设计师本身，还是前端开发工程师，多读些设计类的书会是很好的，因为设计紧紧联系着用户体验。

设计属于所有人，也意在为所有人使用，这既是设计的价值，也是设计的责任。

推荐书籍

在你身边，为你设计

本书是腾讯核心部门之一CDC的设计经验总结和分享，并含有常规的交互设计、用户体验方面的设计法则，图文并茂，展现交互、视觉、用户体验设计的结合，体现当今着重体验的设计感受。本书内容包括：设计理念、设计方法、用户研究、体验设计、设计流程和工具，以及团队成长与管理等方面的知识与经验分享。

苹果的产品设计之道：创建优秀产品、服务和用户体验的七个原则

腾讯CDC官网：http://cdc.tencent.com/ 查看全文