Flexbox布局实战

在最近的一个项目中,我们终于将Flexbox广泛用于页面布局当中。通过这次实战,让我对Flexbox相关知识有了更进一步的了解,也在这方面增涨了不少的知识。接下来,我将分三个部分来解释Flexbox在Web布局中的实战。

如何隐藏DOM元素

早在2011年整理了一篇有关于图片替换文本的方法,而前几天看到一篇有关于隐藏DOM元素的几种方法。今天这里也将继续说说如何隐藏DOM元素?

【转载】HTML5 控制装置陀螺仪 ( 三轴 )

自从几年前入手智能型手机之后,对于行动装置上特有的陀螺仪 ( 三轴 ) 侦测与感应器就蛮感兴趣的,而相关的应用除了在一些典型的 APP 里头很常见之外 ( 指南针、水平仪、星空定位...等 ),在游戏里头更是屡见不鲜 ( 赛车、跑酷、飞行、滚球...等 ),但撇除 APP 不谈,过去在网页里头要使用陀螺仪的三轴感测,几乎是不可能,应该是说沒这个必要,因为在智能行动装置尚未普及的年代,谁会搬台电脑转来转去呢?

关于更好地组织Sass变量的想法

去年的大部分时间我写的CSS都放在一个预处理的Sass文件中,尤其是在一个.scss文件中。对我来说不错,但没有好好利用Sass提供的特性。我的SCSS文件通常比嵌套输出的CSS要小。我大量使用变量和引入不常用的混合宏,但它使用起来是最简单不过的。我想改变现状,并希望你们不要介意,如果我大胆想出如何开始创建更加模块化和可维护的Sass项目。

如何使用Rollup打包JavaScript

通过这个系列教程一步一步学习如何使用更小更快的Rollup取代Webpack和Browserify打包JavaScript文件。这周,我们要使用Rollup构建我们的第一个项目,Rollup是一个打包JavaScript(和样式,不过下周才会做)的构建工具。

陀螺仪的基础知识

大家可能还记得前段时间淘宝造物节的宣传动画效果,让自己对CSS 360全景更充满好奇之心。最近有关于这方面的文章也是层出不穷,比如@凹凸实验室团队的@J.c就整理了一篇有关于这方面的文章。尽从效果上,就吸引了大家不少的眼球,当然大家更期待的是如何自己能实现这样的效果。那么我们来开始一起探讨这方面的事情。

【转载】CSS 3D Panorama - 淘宝造物节技术剖析

3D 全景并不是什么新鲜事物了,但以前我们在 Web 上看到的 3D 全景一般是通过 Flash 实现的。若我们能将 CSS3 Transform 的相关知识运用得当,也是能实现类似的效果。换句话说,3D 全景其实就是 CSS3 3D 的应用场景之一。

JavaScript中的作用域

很多(JavaScript)开发者都在讨论"作用域",但它是什么?它们在JavaScript中的任何地方!我发现很多年轻的开发者不知道作用域是什么。他们中大多数人可以用jQuery做一些很酷的东西。但只是停留在从网上复制一些代码片段,修改一下他们懂的地方并且粘贴到一个JavaScript文件中的程度。了解什么是作用域和你能用它做什么是很重要的,我希望能帮你更好地理解它。我讲的大多数内容都来自我为一些年轻开发者们做了很多次的演讲。(JavaScript基础教程)

惊艳的动画

我们采用错开动画的方式来重建这样的效果,而不是一次就控制一组动画。随着每一个项目动画延迟时间的增加,它们表现的就像是一个个独立的个体,但仍然会作为一个整体正确的移动。这样的结果感觉更加迷人且真实。

纯SVG实现进度圈

进度圈(Progress Circles)是经典的仪表盘元素,可以将统计数据直观地展现为摘要视图。我们可以通过JavaScript和Canvas渲染,再配合CSS,图片或者利用SVG实现一个进度圈。使用SVG实现一个进度圈并没有想象中那么难,我们先从基本的开始。

页面

返回顶部