客栈说书:CSS遮罩CSS3 mask/masks详细介绍

2017年11月6日 by 张 鑫旭 阅读 12502 次, 今日 7 次

CSS mask遮罩属性目前除了IE和Edge浏览器不支持,Firefox,Chrome以及移动端等都已经全线支持,其实际应用价值已不可同日而语。尤其Firefox浏览器,从版本55开始,已经全面支持了CSS3 mask属性。并且mask属性规范已经进入候选推荐规范之列,会说以后进入既定规范标准已经是板上钉钉的事情,大家可以放心学习,将来必有用处。

阅读全文…

CSS3 linear-gradient线性渐变实现虚线等简单实用图形

2017年10月27日 by 张 鑫旭 阅读 10148 次, 今日 8 次

我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是background-image,于是,我们可以实现任意数量渐变背景图的叠加效果。甚至,理论上,任意彩色jpg图片都是可以使用CSS3渐变背景实现的。

当然我们实际开发的时候,是不会使用CSS3渐变来模拟一张图片的,更多是用来生成一些简单实用的图形。

本文就将通过实现虚线,三角以及加号减号等案例,展示下CSS3 linear-gradient线性渐变要图形生成技巧。

阅读全文…

Chrome opacity非1时border-radius圆角边框剪裁问题

2017年10月19日 by 张 鑫旭 阅读 8149 次, 今日 3 次

border-radius:50%可以让元素正方形元素表现为正圆,如果元素设置了border边框,则会表现为一个正圆圈圈,但有时候,border边框的这个圈圈会在边缘处发生剪裁,不是一个完美的圈圈了,这是如何发生的呢?

阅读全文…

鼠标无限移动 JS API Pointer Lock简介

2017年10月18日 by 张 鑫旭 阅读 10765 次, 今日 4 次

用一句话说明Pointer Lock API的作用就是:Pointer Lock API可以让你的鼠标无限移动,脱离浏览器窗体的限制!

这对于一些需要鼠标控制的应用非常有用。举个例子:某3D VR女友的游戏,你鼠标向上移动,则你的视角就会往下……

阅读全文…

before(),after(),prepend(),append()等新DOM方法简介

2017年09月28日 by 张 鑫旭 阅读 13437 次, 今日 3 次

接下来要介绍这些新增的DOM API方法,都比较新,其设计目的是可以像jQuery那样,使用非常简单的api,便利的操作dom元素。

这些api包括:before()after()replaceWith()append()prepend()……

阅读全文…

借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海

2017年09月19日 by 张 鑫旭 阅读 24203 次, 今日 10 次

iPhone X造型上有个显著的特质,就是有个明显的刘海。

然后,也出现了一些酷酷的交互,例如页面滚动的时候,列表会自动绕着iPhone X的刘海排列。看微博评论,好像觉得这个效果实现很难,实际上,CSS3里面针对这种特定形状环绕的效果已经支持很久了,CSS3 Shapes和CSS3 Regions都是可以实现的,本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。

阅读全文…

请使用千位分隔符(逗号)表示web网页中的大数字

2017年09月16日 by 张 鑫旭 阅读 11332 次, 今日 12 次

在手机等移动设备上,对于超过一定个数的数值,系统默认会当做电话号码处理,而不是一个数字,这通常并不是我们想要的,因此我们会使用<meta>标签覆盖这种手机号码自动格式化的处理,但可能大家并不知道的是,这其实并不是一种好的做法……

阅读全文…

移动页面加速google的AMP和百度的MIP简介

2017年09月10日 by 张 鑫旭 阅读 9878 次, 今日 2 次

google先出了个AMP – Accelerated Mobile Pages(加速的移动页面),后来百度仿照出了个MIP- Mobile Instant Pages – 移动网页加速器。那这些新技术对我们的产品收益有帮助吗?对我们产品开发有什么影响呢?

阅读全文…

使用canvas实现和HTML5 video交互的弹幕效果

2017年09月10日 by 张 鑫旭 阅读 20094 次, 今日 4 次

本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果,适合在个人博客或者运营页面,这种非视频场景使用;另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果,也就是真视频弹幕效果。

阅读全文…

iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览

2017年08月24日 by 张 鑫旭 阅读 17259 次, 今日 10 次

前端代码效果实时预览的需求实际上是非常常见的,传统做法是这样子的,会新建一个另外的独立页面,专门用来接收传入的前端代码,通过新开窗口或者嵌入iframe页面的方式达到最终效果,然而实际上,对于这个预览效果,如果代码是我们自己控制,而不是全权交给用户编辑的,是没有必要新建一个另外的预览页面,亦或者是在新窗口(新标签页)中浏览的。可以直接在当前页面构建一个文档上下文,实现更加方便快捷的预览。

阅读全文…