轩枫阁

首页 / UI设计 / 图片模糊滤镜效果实现方案

图片模糊滤镜效果实现方案

前言

最近很流行图片高斯模糊处理,让网站的图片看起来有高大上的效果。应用点:如网站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处理图片,使图片高斯模糊,调节参数可达到不同效果。

asfdsaf1

同时可以结合透明度达到更加优质的效果,如参考网易云音乐播放器。

案例http://www.xuanfengge.com/demo/201410/blur/demo.html

sadsadas

asfdsf

sdfgvfsdg

方案二:使用CSS3 filter

CSS3 高斯模糊效果 “-webkit-filter:blur(2px)”。这个效果很赞,结合动画效果更佳。

案例http://xuanfengge.com/demo/201410/blur/index.html

dsfdsgf

 

184/456
186/456

相关文章

文章评论

  • CSS能用到这个程度,很厉害呀

  • CSS3 filter,这个有意思,学习了

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]