主流的网页栅格化线 – 嵌入 graaf

Graaf 可以直接在页面上显示栅格线,而且可以自定义栅格结构,大大减少前端或设计师检测页面的烦恼。
工具名称:graaf
工具地址:http://graaf.space/

自带多个栅格样式

目前自带了有10多个流行的栅格样式,只需要替换对应样式表名称就行,如下图,如果你需要 Bootstrap 的栅格,就点击 bootstrap.css 就能看到样式表链接,然后直接嵌入网页即可。 继续阅读主流的网页栅格化线 – 嵌入 graaf

让指定区域背景图像高斯模糊Nice! CSS

在网页设计中很多时候我们只看到半透明效果的层级效果,然而半透明+模糊背景,这种超漂亮的视觉却很少见,其中一个原因就是实现方式有难度,难道真这么难实现吗?No~ 现在只需要用 CSS 也能实现了!

今天分享的 Blur 案例就是使用纯 CSS 实现,可以指定某个区域、元素的背景模糊,这效果真的比普通的半透明漂亮多了,目前作者还写了多种模糊特效,能满足不同需求的你。

继续阅读让指定区域背景图像高斯模糊Nice! CSS

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案直接做成 Web 版,模拟浏览器真实视觉效果,同时能自动识别是否为视网膜显示屏,并自动切换为 2X 或 3X 图像。

继续阅读CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

用AE bodymovin制作动画(网页和移动App中动画的实现方法)

1. 关于

关于网页端动画实现

web端做动画有多种形式,可以用CSS的animation,也可以用Canvas,或者是用JS控制CSS的属性形成动画。我们经常使用CSS做一些比较简单的动画,像过度、加载的动画,对于一些比较复杂的,可能会做成gif,或者是用Canvas,使用Canvas的控制粒度可以很细,同时工作量相对也比较大。做动画还有其它的方式,那就是使用After Effect(AE)/Flash/Premiere(Pr)/会声会影等视频软件,这种可视化的制作方式相对于直接写代码来说,会更容易简单自然。做动画本身应该使用工具进行制作,但是这种视频软件做出来的动画最后都是生成视频文件,并且通常体积还很大,没有办法直接移植到网页上去。然而好消息是,现在我们可以使用AE做动画,然后使用bodymovin插件导出成html文件进行播放。
继续阅读用AE bodymovin制作动画(网页和移动App中动画的实现方法)