
Chrome 56 Android 版已引入 WebVR API
据谷歌开发者博客透露,Chrome 56 for Android 现已发布 Beta 测试版,开发者可以注册开源试用版,后者支持 WebVR API 和 GamePad API 扩展程序。WebVR API 允许访问虚拟实境设备(例如 Daydream View)的输入和输出功能。

精选几款CSS3动画特效制作
图片特效在CSS3应用中十分广泛,我们也收集了不少CSS3图片特效,今天要分享的这款CSS3 3D旋转图片相册又非常绚丽,和之前分享的这款HTML5/CSS3 3D环形图片墙类似,也是一面立体的图片墙,图片不停的切换,鼠标滑过图片时即可激活图片查看。

用CSS实现各种图片滤镜效果演示
本演示关键使用了几个新型的CSS属性(background-blend-mode, mix-blend-mode, 和 filter),利用这些属性,我们可以让同一张图片呈现出各种不可思议的神奇效果。

图解CSS3 Flexbox各种属性的用法和效果
本文并不是试图讲解flexbox布局里的各种属性如何工作,而是用图解的方式介绍flexbox里的各种属性和属性值如何让布局起变化,以及如何变化。

前端程序员需要知道的7种新型的CSS长度单位
今儿,我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位,类似pixel 和 em 这样的,但是很有可能你之前从来就没听过这些家伙们!就让我们一起来交个朋友吧~

在自适应布局页面上如何让iframe保持高宽比例
如果网页中嵌入了一个视频iframe,我通常会给这个iframe设定固定的高度和宽度,这个高度和宽度的比例通常要适应视频的高宽必,比如16:9。但是,如果我们一旦写死了这个高度和宽度,当有人使用不同屏幕大小的设备访问网页时就会出现问题,比如小屏手机上

解决用谷歌浏览器访问https网站遇到的“隐私设置错误 您的连接不是私密连接”问题
打开百度或其他https网页时显示“您的链接不是私密连接”。
点击高级后,没有出现“继续浏览(不安全)”。仅显示一段文字。重新加载后仍然停留在此页面。
使用Firefox浏览https网页均能正常加载,且Firefox遇到真正的证 书过期、无效证 书的问题时能够出现警示页面。

精选4款用纯CSS3绘制的有趣图形
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看

CSS3景深、三维变换属性及旋转三维立方体的实现
三维立体效果我觉得是CSS3中最有意思的地方,不得不佩服那些开发者大神们,让我们能够通过几行CSS代码就能得到酷炫的视觉体验。

五款精致迷人的CSS3 3D动画按钮
CSS3按钮一般都可以设计的非常漂亮,利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔透的牛奶,而且在点击按钮时出现3D效果的动画,按钮按下时,按钮会轻轻的弹动一下,非常逼真。

这个API很“迷人”——Fetch API
JavaScript 通过XMLHttpRequest(XHR)来执行异步请求,这个方式已经存在了很长一段时间。虽说它很有用,但它不是最佳API。在Fetch API中,最常用的就是fetch()函数。它接收一个URL参数,返回一个promise来处理response。response参数带着一个Response对象。

三分钟学会css3中的flexbox布局
这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现以往遇到的所有的关于布局的问题,现在都可以轻松解决了。

你真知道HTML网页元素有多宽吗?
Web端对于宽度有各种定义,比如innerWidth,outerWidth,clientWidth,offsetWidth。不同语境下有不同的含义,PC端与移动端的表现也有不同,还可能与缩放水平、滚动条、viewport设置等因素相关。

JavaScript ES6箭头函数指南
胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性。有传闻说,箭头函数的语法=>,是受到了CoffeeScript 的影响,并且它与CoffeeScript中的=>语法一样,共享this上下文。

JavaScript里的await/async的作用和用法
await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段。

用console.table()调试javascript
昨天我了解到Chrome调试工具一个小巧的调试方法,在WDCC期间, Marcus Ross(@zahlenhelfer) 介绍了,chrome调试工具各种调试方法,这个只是其中一种,现在我来给大家秀下。

Javascript 严格模式(“use strict”)详解
除了正常运行模式,ECMAscript 5添加了第二种运行模式:”严格模式”(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。

使用var定义变量和不使用var的本质区别
“不管是使用var关键字(在全局上下文)还是不使用var关键字(在任何地方),都可以声明一个变量”。这貌似一个错误的概念:任何时候,变量只能通过使用var关键字才能声明。

原来css中的border还可以这样玩
在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句“我靠,原来css中的border还可以这样玩”。这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果。

使用IntersectionObserver更高效的监视某个页面元素是否进入了可见窗口
IntersectionObserver 能让你知道一个被观测的元素什么时候进入或离开浏览器的可见窗口。

使用HTML5中postMessage实现Ajax中的POST跨域问题
HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信。

用CSS绘制最常见的40种形状和图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家。

HTML5 Canvas 计量器绘制工具Canvas Gauges
Canvas Gauges是一个用来在html5 canvas是绘制各种计量器、计量仪图表的JavaScript工具库。
下面的这里例子,点击仪表图表可以参考源代码,鼠标移到上面可以看到各种一般的动画效果。在手机或平板上,用手指按住它们,动画就会发生。

getClientRects() 和 getBoundingClientRect() 的用法和区别
getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。

你不需要Lodash/Underscore——用JavaScript原生函数替代
Lodash和Underscore是两款非常流利的JavaScript工具库,广泛的被程序员用于WEB前端开发。然而,如果你使用的是现代浏览器,你会发现,有很多的方法、函数实际是可以使用原生的JavaScript函数代替,这要感谢ECMAScript5 [ES5]和ECMAScript2015 [ES6]。