如果您构建过不少网站，可能已注意到可以在一个项目中轻易的复制代码然后跨项目应用。反复复制相同的代码会浪费时间和增加错误出现的可能性。在Sass之前的系列中，我曾说mixins是样式重用和编写 DRYer代码的一个选择。Functions是实现相同功能的另一个方法。最近几个月我一直在讲Sass的数据类型、运算符和函数。我们讲过了numbers,strings,colors,colors again,lists,lists again, 和maps。过去几周我讲到了控制指令。今天是该系列的最后一部分，我想以@function指令和如何编写自定义函数结课。如何创建和使用自定义函数函数是可返回一个Sass任何数据类型单一值的代码块。创建自定义函数需要两个Sass指令，@function和@return。前者创建函数，后者表明了函数将返回的值。@function function-name($args) { @return value-to-be-returned; }传递到函数中的参数是可选的，尽管你会经常使用它们。通常Sass函数会使用传递过去的参数进行运算，也可能是一些所有函数都可以访问的全局变量。由于历史原因，函数名可交替使用破折号或下划线，故function-name和function_name是相同的函数，可使用破折号或下划线调用函数，无论命名时使用的是哪个。上述代码只 ...继续阅读 (22)

CSS中的@supports属性已经不是新东西了，只不过一直以来，大家碍于浏览器对其支持度不强，而无人问冿。这两天看到两篇新文单都是介绍@supports。其中一篇是介绍怎么使用@supports来查询CSS的新特性，另外一篇是如何使用@supports来改变你的生活。How to use CSS Feature Queriesby@Abbey Fitzgerald@supportswill change your lifeby@CHARLOTTE JACKSON今天也继续来说说这个@supports属性。@supports是什么@supports是CSS条件查询规范（CSS3 Conditional Rules Specification）中属性之一，CSS中条件查询除了今天要说的@supports之外，还有大家较为熟悉的媒体查询（@media）和@viewport。@supports作用是什么从@Abbey Fitzgerald的《How to use CSS Feature Queries》一文的标题来看，就大概知道@supports是用来查询CSS的新特性的。那么查询CSS的新特性有什么用处呢？或许你知道新出现的CSS特性，但又担心浏览器不支持，从而又不敢使用。很多时候就算是使用了CSS的新特，达到自己需要的效果，但为了让自己的项目给用户带来更好的体验，希望在一些不支持新特 ...继续阅读 (18)

对博客上最新发布的Sass版本感到困惑？我也是。Sass 3.5.0-RC.1标记了一种新的数据类型：匿名函数。在候选发布公告中，用了四个段落篇幅描述了匿名函数大量的细节，而不显示任何代码。由于并未真正理解它的含义，所以决定深入了解它。匿名函数候选版本上面写着：可通过传函数名到get-function($name)中得到一个匿名函数这说明get-function($name)返回的是一个匿名函数。匿名函数是什么？在计算机科学中，据说编程语言如果把函数当做一等公民来对待，那么它就有了匿名函数。-维基百科听起来不错。好样的，functions，你得到了极大的提升。然后，文中提到：你可以在用来传递函数名的地方传递一个匿名函数给call()这样做是有道理的，但仍缺乏几个例子。我当时想回答这样一个问题：“get-function($name)应该用在什么地方以及为什么要这样使用”首先来看看从哪里开始。在小于3.5的Sass版本中调用函数两个选项：my-function($arguments)这是调用函数的经典方式。没什么值得惊讶的。@function my-function() { @return ‘Hello, world.’; } my-function();// -> ‘Hello, world.’或者使用call()你或许对call()方法不熟悉，这很正常。大多数开发者 ...继续阅读 (31)

前端视频到目前为止在互联网上已经有很多种类，那么我的视频也将首发。其实我一直想录制视频，但也一直没敢录制视频，其实有两个主要原因，第一个原因是我操着一口“标准”的胡建口音，怕录制出来的视频没人听得懂；其二是我怕录制的视频没人喜欢，而且很易盗版。结过一系列的技术手段，解决了易盗版的问题，但我这一口“标准”的胡建话或许是无法改变。不过不要紧，我还是和我的好友Busy一起录制了一个系列的前端视频。如果你喜欢，欢迎关注。(^_^)不过不是免费的哟，但有优惠哟!!!HTML入门HTML5究竟是什么，和HTML4.0的区别在哪里？ HTML是万维网的核心语言，超文本标记语言HTML的第五次重大修改。HTML5是Web时代最前沿的技术，其丰富的API重新定义了前端开发，是连接手机、平板电脑、PC以及多样移动终端的桥梁。可以更丰富的展示页面。本章节将带领大家一步步领略HTML5的风采。CSSCSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。本章讲带领大家剖析CSS3的 ...继续阅读 (24)

这篇文章不是纯介绍技术的文章，但其实里面的内容是有关于前端技术的。DemoHouse是什么或许会问DemoHouse是什么?其实它就是一个个人开源的项目，而这个项目里面的内容又不是自己写的，是收集过来的。在Github上，我用自己蹩脚的英文对DemoHouse是这样描述的：DemoHouse is a collection of JavaScript, CSS3, Canvas, SVG and Web Animation demos.简单点说：DemoHouse就是收集了很多前端案例。比如JavaScript、CSS3、SVG、Canvas和Web动画等。DemoHouse可以做什么那么为什么要整DemoHouse呢？这主要可能是出于自己对前端的兴趣爱好吧。我是属于喜欢收集各种有意思的、有吸引的Demo。收集它们主要出于：给自己增涨见识给自己做练习给创意提供储备...其实除了这些，还可以把它给有需要的同学。比如有同学找我要一种动效的效果，我能告诉他在哪可以找到；比如有同学找我要学习案例，我能告诉他在哪可以有案例参考，等等。出于这些，花了两年多时间收集了各式各样的前端案例，有纯UI的，有Web皮肤的，有动效的。为了这些资源能更好的给有需要的同学，我在Github上创建了一个仓库DemoHouse。怎么使用DemoHouse如果你看到了这里，或许你更想知道的，我怎么使用DemoHou ...继续阅读 (23)

最近有一个项目需求，希望一个简单的列表在一个网格中完美显示，比如只有一个单元格的时候，列表占据整个容器宽度，但总是不太好控制。因此，有时当你忙着一件事情时，问你有没有办法可以实现，我试图使用可以想到的办法，总是会有空白出现，我就会心烦意乱的说，实现不了。当时，我正在伦敦一家新闻机构做网站。花了一年多时间把网站从CMS迁移到Adobe AEM平台上，并且UI做了很大的改进。在这个阶段，我开始关注UI的构建以及其新特性。另外整个开发团队划分成了许多个小团队，而我和我的团队主导就是UI的构建。每个中心页面实际上是一个列表，列表只是用来帮助读者能找到他们更感兴趣的内容。你可以想象，一个新闻网站几乎是由内容列表构成。页面只是垂直排列的话，对于他的读者而言是没有任何吸引力，但我们希望读者在浏览网站的时候能立马找到他们感兴趣的内容。如此一来，就需要对不同的列表划分单独的区域，并且让这些列表能更协调的向读者展示。简而言之，通过视觉的调整，让整个页面更好的显示其可用性和有效性。我所说的简单列表是指主版面顶部总是高调的突出或强调一个特定的兴趣点。从一个项目开始，随着时间每天增加文章列表数。为了能更好的排列，需要一个网格列表，而不是一个单一的列，如此一来，有的时候总是会有单个列表排在最后面。而我们想要的需求是，不管有多少个子元素，它的布局必须保持整洁和干净。也就是说，不管有多少个列表项，在网格中都能很好 ...继续阅读 (21)

如今很多艺术被超清，高像素图片掩盖了光芒，像素艺术就是其中之一。我在逛CodePen的时候被一些像素作品惊呆了，它们又一次告诉了我像素艺术多么的了不起。很酷不是吗？像素图案是在高清和高分辨率的图片或插画上加一层简单柔和的蒙层合成的。这也是个教我们用HTML和CSS来创做像素艺术的好例子。让我们打破这个概念，建立一个可以在其他地方可用的模式。创建栅格首先，我们需要一个画布来绘制这个杰作。我们要创建一个栅格，可以通过很多方式。一种方法是使用标准的HTML<table>，在每行包含一堆固定宽度的小格子。举个例子，比如说创建一个八行八列的正方形table，如果每个小格子是10px的正方形，table就有80px的宽高：想让画布更大？让小格子尺寸更大些。想从8-bit变成16-bit？让table里每行的小格子宽高加倍。另一种创建栅格的方法是不用table，换成两种div组成：一个充当画布容器，另一个将被循环创建多次来做画布的像素块。<div class="canvas"> <div class="pixel"></div> <!-- Repeat as many times as needed --> </div><!-- end .canvas -->这种方法需要明确知道需要创建多少像素块。为此， ...继续阅读 (30)

在本系列的教程当中，你已经熟悉了CSS Grdi的语法，了解了页面布局的一些有效方法，也可以跟以前一些不良的习惯说再见了。在今天这篇文章中，我们将了解有关于CSS Grid布局中有关于响应式网页设计知识。媒体查询我们从下面这个DEMO开始今天要介绍的内容：上面的示例中声明了两个网格，一个是主要网格，另外一个是在一个网格项目中嵌套了一个网格。当这些网格使用媒体查询，可以在不同的视窗中重新定义布局。首先容器满足移动端第一，先给.grid-1声明一个网格，也就是小于500px断点，另外在声明一个网格容器由局：.grid-1 { /* 声明网格样式 */ } @media only screen and (min-width: 500px) { .grid-1 { /* 声明网格样式 */ } }一开始声明的网格都放在了一个列里。使用grid-template-columns设置一个列，然后使用grid-template-rows定义了网格四个行，最后使用grid-template-areas来布局：.grid-1 { display: grid; width: 100%; margin: 0 auto; grid-template-columns: 1fr; grid-template-rows: 80px ...继续阅读 (22)

四年前，Jason Grigsby问了我一个出人意料的难题:你是如何获取响应式图片断点的？一年之后，他得到了答案: 理想情况下，我们会设置响应式图片性能预算实现“在不同大小文件间的跳转。”Cloudinary创建了一种工具实现了这一想法，并且在社区获得了一致性的好评:“太棒了！现在，它还可以实现什么呢？扩展阅读响应式图片断点生产器简介响应式图片: 指南与srcsetWordPress，响应式图片艺术指导WordPress，响应式图片核心自今年早些时候发布以来，响应式图片断点生产器将高分辨率的原件转变为了一个具有明智srcsets按钮的<img>。现在，我们将要推出版本2，允许你对布局断点设置宽高比率，并通过智能剪裁对图片资源进行匹配，生成艺术指导的<picture>标记。请继续向下阅读。响应式图片断点的问与答为什么我们需要首先构建此工具？响应式图片对不同的人发送不同的图像资源，以适应它们特定的上下文；响应式图片就是图片根据不同情况，做出不同的响应。这种适应性可发生在多种情况中。大多数情况下，大多数的开发人员只需要自适应分辨率 —— 我们想要将高分辨率图像发送大视口或者高分辨率显示器，以及低分辨率图像发送至其余设备。Jason关于图片断点的思考就是相关适应性问题。当我们制定图片适应不同的分辨率时，需要生成一定范围内不同大小的资源。选择一个最大的分辨率以及一个最 ...继续阅读 (38)

经过网格术语一和术语二两篇文章，我们对CSS Grid布局中术语有一定的了解。除了这两篇文章提到的术语之外，还有其他相关的术语。这篇文章主要和大家一起来探讨网格。CSS Grid布局说的就是网格，那么网格就是其中最重要的术语之一。接下来，我们要说的就是网格相关的内容。声明网格和网格容器如果需要使用CSS Grid给Web页面进行布局，首先需要声明网格。在CSS中，声明网格主要方式就是通过给某个容器的display设置为grid、inline-grid或者subgrid值之一。同时这个容器就被称为网格容器，而这个容器的子元素就称为网格项目。网格容器不是块容器(display:block)，因此在块容器中的一些属性使用并不适用于网格容器当中:多列布局属性column-*不能用于网格容器浮动和清除浮动，对于网格项目中使用不生效。但是，浮动的属性对于网格容器的子元素还是生效的vertical-align属性对于网格项目不生效::first-line和::first-letter伪元素不能用于网格容器网格容器大小在CSS Grid布局当中，通过grid-template-rows和grid-template-columns隐式的确定了一个网格的列数、行数以及网格的大小：.grid { display: grid; grid-template-columns: 150px 20px ...继续阅读 (23)

在上一节中，主要介绍了CSS Grid布局中网格线、网格布局属性、单元格合并等相关术语，在这篇文章中将继续介绍网络布局中的相关术语：网格区域，网格轨道和网格单元格。希望对大家对学习CSS Grid布局有所帮助。网格区域（Grid areas）记得前面的文章中介绍网络线的一节中，了解到可以通过grid-row和grid-column构建出grid-area（也就是我们要说的网格区域）。通过网格线构建的网格区域，其有一个明确的顺序：grid-row-start / grid-column-start / grid-row-end / grid-column-end。如下面示例所示：.item-1 { grid-area: 1 / 1 / 2 / 4; } .item-2 { grid-area: 2 / 1 / 4 / 2; } .item-4 { grid-area: 2 / 3 / 4 / 4; } .item-6 { grid-area: 4 / 1 / 5 / 4; }效果如下：上面这种方式，能通过网格线构造出想要的网格区域。但更妙的是，在CSS Grid布局中可以直接定义网格区域，用来放置对应的网格项目。CSS Grid布局有可以使用grid-template-areas属性来声明。然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。假 ...继续阅读 (25)

我一直喜欢3D。我也开始使用CSS 3D Transform，而且浏览器对它的支持度越来越好。但给我的感觉，使用Transform就是用来创建2D图形，并且使用旋转和位移可以创建一些3D图形。但在实际使用的时候，还是越到了不少的麻烦，而且这些麻烦出乎我的意料。我想或许大家也同样遇到过这样的问题，为了大家在使用CSS 3D Transform能避免这些麻烦，我把我碰到的与在大家分享一下。3D渲染上下文我清楚的记得一个晚上遇到一个麻烦，而且这个麻烦引起我的好奇心，于是我想亲自写一个测试用例来试试看，看看浏览器如何处理平面的交叉。该测试用例只包含了两个平面元素：<div class='plane'></div> <div class='plane'></div>它们尺寸大小相同，并且使用绝对定位，让元素在屏幕中居中（水平垂直居中）,并且给他们设置了个背景色，让它们在屏幕中可见：$dim: 40vmin; .plane { position: absolute; top: 50%; left: 50%; margin: -.5*$dim; width: $dim; height: $dim; background: #ee8c25; }把body元素当作一个场景，并且设置了perspective（视角），让视角覆 ...继续阅读 (21)

通过这个教程学习如何使用JavaScript打包工具Rollup配合PostCSS来取代Grunt或Gulp处理样式文件。上一篇文章中，我们完成了使用Rollup打包前端JavaScript入门。这篇文章包含第二部分和第三部分。第二部分会继续在上次的项目中进行，为Rollup添加处理样式的能力，使用PostCSS进行一些转换，让我们能使用更简单的变量写法和嵌套规则等语法糖。然后完成第三部分，圆满结束。第三部分将为项目添加文件监听和教程：如何使用Rollup打包样式文件并添加LiveReload，这样每当文件变化时就不用再手动地打包bundle文件了。准备工作我们会在上周的项目基础上继续进行，因此如果你还没有看上一节，推荐你先看一下。注: 如果你没有项目的副本，你可以通过这条命令克隆在第一部分结束这个状态下的项目：git clone -b part-2-starter --single-branch https://github.com/jlengstorf/learn-rollup.git如何在你以后的项目中使用Rollup.js： PostCSS你可以轻松地处理CSS并注入到文档的head中，这取决于你的项目如何配置，也是Rollup另一个优点。另外，所有的构建过程都在一个地方，降低了开发流程的复杂度 - 这对我们很有帮助，尤其是在团队协作时。不过糟糕的是，我们使得样式依赖Jav ...继续阅读 (24)

Grid布局是2010由Microsoft提出的，最后提交的工作草案是2016年9月29日提交的。到目前为止，浏览器对其支持度还是一片顠红，但我们还是通过浏览器的设置可以看到相关的效果。比如Chrome浏览器中通过chrome://flags/#enable-experimental-web-platformfeatures打开Chrome浏览器实验网络平台功能。或者在你的项目中调用CSS Grid布局的Polyfill。作为学习和研究，这些足够了，但运用到实际的项目中，还是建议大家慎重。如果需要彻底的对CSS Grid布局有所了解，或者想更好的掌握它，那么必须先了解清楚其相关术语。因为CSS Grid布局中的术语较多，只有掌握了这些术语真正含义，后面才能更好的学习CSS Grid布局相关的特性。那么今天就来看看CSS Grid布局中的相关术语。特别声明：接下来文章中使用到的图片来源于@Manuel Rego Casasnovas写的《Deep Dive into Grid Layout Placement》一文。网格线(Grid lines)网格线（Grid lines）可能是Grid布局规范中最重要的概念之一。网格线是用来在水平和垂直方向分割网格的线。水平方向的网格线是从左向右；垂直方向是从上往下。网格线的编号都是从1开始的。正如上图所示，我们使用一个3 x 2的网格来阐述它是 ...继续阅读 (27)

在上一节中，了解了CSS Grid布局中的列和间距，但没有提到网格区域。到目前为止，网格项目都是安置在独立的单元格内，但我们应该打破这样的局限，让网格项目可以超出单元格的界面，实现更多有用的布局。那这一节我们来看怎么实现。定义网格区域这里有一个我们一直努力想实现的网格：九个网格项目分成了三个等列和等行的网格之中，列与列以及行与行之间有一个20px的间距。目前，只给网格项目设置了一些颜色样式，但根据第一节教程中的内容，我们可以在此基础上添加grid-column和grid-row的样式规则：.item-1 { background: #b03532; grid-column: 1 / 3; grid-row: 1; }grid-column其实是grid-column-start和grid-column-end的缩写，告诉网格项目.item-1从网格线1开始到网格线3结束。下面的示例演示的就是第一个网格项目横跨两个单元格，而其他的网格项目就会自动向右和向下排列，而整个过程都是网格自动计算的。.grid-1 { display: grid; width: 100%; max-width: 750px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } .i ...继续阅读 (22)

background-repeat是background属性之一，对于前端而言，这是再熟悉不过的属性之一了。那么为什么今天要来聊这个background-repeat属性呢？在CSS2.1中，众所周知，background-repeat属性具有四个常见的值repeat、repeat-x、repeat-y和no-repeat。而今天要说不是这四个属性值，在CSS Backgrounds and Borders Module Level 3中，给background-repeat新增加了两个属性值round和space。在接下的中，要讨论的就是新增的这两个属性值怎么使用，他们具有什么特性。别的先不说，先来background-repeat各属性值对应的效果：点击示例中的按钮，可以看到background-repeat对应属性值效果。回顾background-repeat的使用在CSS2.1中background-repeat具有四个属性值repeat、repeat-x、repat-y和no-repeat。先简单的回顾一下。repeatbackground-repeat取值为repeat时，表示背景图片沿容器的X轴和Y轴平铺。将会平铺满整个容器。例如:body { background: url("https://source.unsplash.com/W_9mOGUwR08/2 ...继续阅读 (20)

在上一节介绍了Grid的基础知识，在前一节的基础上介绍Grid的新特性，怎么样来提高间距的设置以使用fr单位和repeat()实现可伸缩性的布局。可伸缩性单位网格的目的是使我们能正确的控制网格布局，让我们的布局变得更容易。如果你还记得，我们在上一节定义的网格都是和像素有关。grid-template-columns: 150px 20px 150px 20px 150px; grid-template-rows: auto 20px auto 20px auto;有没有可能，把这里的单位换成像em或者rem这样的相对单位，或者说像更先进的vh和vmin这样的单位。在接下来的示例中，我们将把像素单位换成百分比。可以在列宽和间距中使用百分，但必须保证他们之间的总各为100%。grid-template-columns: 30% 5% 30% 5% 30%;注意间距在Grid布局中确实有一个新的属性值，能更有效的方式来控制间距，可以说是特定的属性。我们可以使用grid-column-gap和grid-row-gap或者简写的grid-gap属性来定义列间距和行间距。也就是说，我们没有必要通过网格轨道（行或列）来控制行和列之间的间距。这意味着每列的宽度和行宽度为：grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: ...继续阅读 (20)

我们将了解前沿的CSS Grid布局，从而了解CSS Grid布局是如何改变Web的布局。这篇文章是一篇快速入门的文章，将会跳过一些细节和其中的细微差别，其主要是帮助你了解前沿的CSS Grid布局。设置你的浏览器CSS Grid布局（也常常被称为网格）是一个正在讨论的CSS模块规范，你会发现现在浏览器对其支持很弱。如果你现在开始使用它，你需要在IE11（它支持的是旧规范）、Microsoft Edge、Chrome Cannary或者Firefox Nightly才能看到效果。也许最简单的方法是在Chrome浏览器中通过chrome://flags/#enable-experimental-web-platformfeatures打开Chrome浏览器实验网络平台功能。建立一个网格网格允许我们根据区域来排列页面上的元素。专业术语在了解网格之前，需要对一些专业术语有所了解。在整个网格中常用到的术语有：网格线（Grid lines）、水平或纵向网格轨道（Grid tracks）。网格轨道其实就相当于行（rows）和列（columns），而且两者之间有一个间距（Gutters）。在网格轨道相交的区域，就是单元格（Grid cells），相当于table中的单元格。这些重要的术语能帮助我们更好的理解Grid。下图演示了一个Grid，其对应的专业术语：1表示Grid lines2表示Col ...继续阅读 (20)

CSS Animation是实现Web Animation方法之一，其主要通过@keyframes和animation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画，咱们来聊聊CSS Animation性能相关的话题。浏览器渲染原理关于浏览器工作原理之前有一篇非常出名的文章《浏览器的工作原理：新式网络浏览器幕后揭秘》。文章详细阐述了浏览器工作原理，下面用两张图来分别描述Firefox和Chrome浏览器对Web页面的渲染过程：Chrome渲染过程有关于Chrome浏览器渲染的详细内容，可以参考《图解浏览器渲染过程 - 基于Webkit/Blink内核Chrome浏览器》一文。Firefox渲染过程特别声明：接下来的内容都是针对于Chrome浏览器进行讨论。Chrome渲染部分的实际含义从上面的流程图中不难看出，Chrome渲染主要包括Parse Html、Recalculate Style、Layout、Rasterizer、Paint、Image Decode、Image Resize和Composite Layers等。简单了解一下其含义，以便后续内容的更好理解。Parse Html发送一个http请求，获取请求的内容，然后解析HTML的过程。有一个经典的前端面试题：当你在浏览器中输入google.com并且按下回车之后发生了什么？这个 ...继续阅读 (24)

本教程的灵感来自于Envato的最新版本。这个页面的主页功能是展示一系列创意产品(字体、图标、图片模板等等)，而且其布局采用了一个整洁的Isometric网格布局。我们要使用CSS 3D Transform来得新创建这个Isometric网格布局。等角投影(Isometric Projection)等角投影是一个用于呈现三维立体的方法（在八、九十年代常用于工程和游戏当中处理3D效果，但其处理能力非常受限）。维基百科对等角投影进行了详细的介绍，如果你想深入的了解这方面的知识，可以点击这里。这些就像生活中看到的三维体，只不过他的视角（Perspective）没有显示出来。Z轴多年来，Web习惯于二维平面，习惯于沿着X轴和Y定位元素。注意：Web中的Y轴和迪卡坐标相反，Web中的Y从上往下。第三个轴，即Z轴，这样构成了一个3D视图。这个轴代表的是深度，物体沿Z轴的运动方向是相对于我们的视角，它可能自上而下，由远到近。这三个轴可以运用到CSS Transform函数中，用来创建一个3D投影。下面的示例演示了，使用rotateX()、rotateY()和rotateZ()三个函数，创建一个矩形的Isometric投影。现在了解了制作一个Isometric投影的基本原理，接下来就可以将其运用到实际的项目当中。先从HTML模板开始。HTML类似于Envato Element主页，我们有一个网格布 ...继续阅读 (24)

在最近的一个项目中，我们终于将Flexbox广泛用于页面布局当中。通过这次实战，让我对Flexbox相关知识有了更进一步的了解，也在这方面增涨了不少的知识。接下来，我将分三个部分来解释Flexbox在Web布局中的实战。主要页面布局(一个JavaScript单页面小应用)流体网格和折叠盒子(Accordion)“Cards”和“Slabs”产品序言这不是一篇有关于Flexbox的科普教程，这里有些关于Flexbox的其他教程。但简而言之，使用display:flex可以快速创建一个flexbox或者flex容器。而它的子元素就变成了flex项目，可以设置flex属性。当然，它们自己也可以变成flex容器。或许，在使用Flexbox给Web页面进行布局时，还在担心浏览器对其兼容性支持力度。如果你对这方面顾虑较深的话，可以通过caniuse.com来查阅。如果你希望Flexbox在更多的浏览器上都能有一个较好的渲染或呈现方式，需要添加一些浏览器的私有前缀。可以使用Autoprefixer插件来帮助你处理这些琐碎的事情。主页面布局这是一个JavaScript写的单页面应用，页面主要包括了标题栏、页脚、canvas展示区域和调整窗口大小的列表选择项。如下图所示：把所有元素都放置在一个.wrapper容器内，并且通过position:fixed将其大小设置和视窗大小一样。接下来使用displ ...继续阅读 (20)

早在2011年整理了一篇有关于图片替换文本的方法，而前几天看到一篇有关于隐藏DOM元素的几种方法。今天这里也将继续说说如何隐藏DOM元素？隐藏DOM元素方法在《用 CSS 隐藏页面元素的 5 种方法》一文中介绍了五种方法隐藏DOM元素，并且剖析了它们之间的差异。这里也再回顾一下，在CSS中，要隐藏DOM元素常见的方法有：设置元素的opacity值为0设置元素的visibility值为hidden设置元素的display值为none设置元素的position值为absolute，并且将其移到不可见区域设置元素clip（在新的CSS中使用clip-path来替代clip）除此之外，还可以使用：设置元素的hidden上面隐藏元素的方法都是大家常见的，也是众所周之的。当然除此之外还有一些特殊的小技巧,比如说：将元素的font-size、line-height、width和height设置为0设置元素的transform的translateX或者translateY的值为-100%当然，或许在你的实战经验当中，你还有别的方案。对于其他的方案，我们不再罗列，咱们具体来看看各种隐藏DOM元素的差异。隐藏DOM元素的差异性上面简单的罗列了八种隐藏DOM元素的方式，其实给我们视觉上的效果，这些方法都可以让元素不可见(也就是我们所说的隐藏)。然而，屏幕并不是唯一的输出机制，比如说，屏幕上看不见的元素( ...继续阅读 (23)

本文转载来自于oxxostudio.tw的《HTML5 控制裝置陀螺儀 ( 三軸 )》。如需转载，烦请注明原文出处：http://www.oxxostudio.tw/articles/201506/html5-device-orientation.html自从几年前入手智能型手机之后，对于行动装置上特有的陀螺仪 ( 三轴 ) 侦测与感应器就蛮感兴趣的，而相关的应用除了在一些典型的 APP 里头很常见之外 ( 指南针、水平仪、星空定位...等 )，在游戏里头更是屡见不鲜 ( 赛车、跑酷、飞行、滚球...等 )，但撇除 APP 不谈，过去在网页里头要使用陀螺仪的三轴感测，几乎是不可能，应该是说沒这个必要，因为在智能行动装置尚未普及的年代，谁会搬台电脑转来转去呢？不过在行动装置发达的现在，手机或平板的浏览器效能也跟了上来，加上 iOS 与 Android 两大阵营对浏览器可以控制硬件的权限逐渐轻松，慢慢的当年 HTML5 里头所制定出来，和控制装置硬件相关的 API 也逐渐可以派上用场。这篇文章主要是记录自己控制陀螺仪获取三轴数值的用法，如果不做个记录，我可能过一阵子又忘记怎么用了。起手式要使用行动装置的陀螺仪，我们只要监听deviceorientation的事件就可以，它的用法和click是一模一样。window.addEventListener('deviceorientation' ...继续阅读 (25)

去年的大部分时间我写的CSS都放在一个预处理的Sass文件中，尤其是在一个.scss文件中。对我来说不错，但没有好好利用Sass提供的特性。我的SCSS文件通常比嵌套输出的CSS要小。我大量使用变量和引入不常用的混合宏，但它使用起来是最简单不过的。我想改变现状，并希望你们不要介意,如果我大胆想出如何开始创建更加模块化和可维护的Sass项目。一个最近项目的例子最近我在做一个相对简单的项目，一个少量内容的单页网站，仅用一个下午就完成了设计和开发。然而在等待客户评审的过程中，我想我应该研究一下，通过为颜色和类型设定变量来重构CSS，以防客户回头想要更改。不出所料，客户确实想改变颜色和类型的选择，将它们设置为变量将更容易快速尝试不同的可能性。我的客户拥有一定的设计经验，提出了一种不同的配色方案并且能立刻应用到页面中。想看不同的字体看起来如何？没问题。稍等。变量显然有用，并且是使用预编译器的一大原因之一。然而，我不认为自己在变量设置上做了最好的选择。以下是我创建的一些变量名和大体组织。/* Background Colors */ $background: $header-background: $content-background: /* Colors */ $heading-color: $link-color: /* Typography */ $sans-seris: $ser ...继续阅读 (17)

通过这个系列教程一步一步学习如何使用更小更快的Rollup取代Webpack和Browserify打包JavaScript文件。这周，我们要使用Rollup构建我们的第一个项目，Rollup是一个打包JavaScript(和样式，不过下周才会做)的构建工具。通过这个教程，我们的Rollup将能够：合并scripts代码，删除多余代码，编译成对旧浏览器友好的代码，支持在浏览器中使用Node模块，能使用环境变量，尽可能的压缩，减少文件大小。准备工作至少懂一点JavaScript的话将会更好理解。对ES2015 modules有基本了解，不过不了解也无妨。在你的设备上要有npm。(还没有？在这下载Node.js)Rollup是什么？用他们自己的话说：Rollup是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块，然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。和Browserify和Webpack很像。你也可以认为Rollup是一个构建工具，可以和像Grunt和Gulp等一起配置使用。但是，需要注意的一点是当你使用Grunt和Gulp来处理像打包JavaScript这样的任务时，这些工具的底层还是使用了像Rollup，Browserify或Webpack这些东西。为什么应该关注Rollup？Rollup最令人激动的地方，就是能让打包 ...继续阅读 (81)

大家可能还记得前段时间淘宝造物节的宣传动画效果,让自己对CSS 360全景更充满好奇之心。最近有关于这方面的文章也是层出不穷，比如@凹凸实验室团队的@J.c就整理了一篇有关于这方面的文章。尽从效果上，就吸引了大家不少的眼球，当然大家更期待的是如何自己能实现这样的效果。那么我们来开始一起探讨这方面的事情。在具备独立完成这样的效果之前，咱们需要对几个知识点要有所了解：设备的摄像头Camera(Camera API)陀螺仪、重力感应CSS 3D （CSS3 Transform 3D）而这些都涉及很多的知识面，但我们不会在这一篇文章中介绍完，今天我们先来介绍其中有关于陀螺仪相在的知识点。HTML5 OrientationHTML5 Orientation是HTML5中一个非常酷的特性，它主要用来检测智能设备（手机、平板等）的运动方向。在现在的移动端开发中已给用户带来更良好的体验，也在很多项目中发挥了重要的重用。目前在下面的场景中常常能看到其相关的身影：控制游戏:Web游戏应用监控设备方向，并将其解释为控制屏幕上的精灵在某方向上的倾斜。手势识别:Web应用监控设备的加速，并将其应用于信号处理，以便识别特定首饰。距离说明，使用摇晃手势清除web表单。地图:Web地图应用使用设备方向，将地图与实际情况对齐。有关于HTML5 Orientation相关的扩展阅读，可以阅读下面文章：This End ...继续阅读 (17)

本文转载来自于@J.c在@凹凸实验室发表的《CSS 3D Panorama - 淘宝造物节技术剖析》一文，如果需要转载，烦请注明出处：https://aotu.io/notes/2016/08/24/2016-8-24-css-3d-panorama。前言3D 全景并不是什么新鲜事物了，但以前我们在 Web 上看到的 3D 全景一般是通过 Flash 实现的。若我们能将 CSS3 Transform 的相关知识运用得当，也是能实现类似的效果。换句话说，3D 全景其实就是 CSS3 3D 的应用场景之一。准备在实现 CSS3 3D 全景之前，我们先理清部分 CSS3 Transform 属性：transform-origin：元素变形的原点（默认值为50% 50% 0，该数值和后续提及的百分比均默认基于元素自身的宽高算出具体数值）；perspective: 指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。（默认值：none，值只能是绝对长度，即负数是非法值）；transform-style：用于指定其为子元素提供 2D 还是 3D 的场景。另外，该属性是非继承的；transform：该属性能让你修改 CSS 可视化模型的坐标空间，其中包括平移（translate）、旋转（rotate）、缩放（scale）和扭曲（skew）。下面对上述的一些点进行更深入的分析：对 ...继续阅读 (20)

很多(JavaScript)开发者都在讨论"作用域"，但它是什么？它们在JavaScript中的任何地方！我发现很多年轻的开发者不知道作用域是什么。他们中大多数人可以用jQuery做一些很酷的东西。但只是停留在从网上复制一些代码片段，修改一下他们懂的地方并且粘贴到一个JavaScript文件中的程度。了解什么是作用域和你能用它做什么是很重要的，我希望能帮你更好地理解它。我讲的大多数内容都来自我为一些年轻开发者们做了很多次的演讲。(JavaScript基础教程)什么是作用域让我们从全局作用域开始。从你开始写JavaScript的第一刻起，你的代码就处于全局作用域下。全局作用域可以从任何地方访问。除此之外你可以在全局作用域下通过函数创建更小的作用域。局部作用域无法从全局作用域访问，只能从相同作用域(或者叫函数)访问。全局作用域可以从任何地方访问！全局作用域当一些东西没有定义在一个函数中时他就被定义在了全局作用域下。只在一个JavaScript文件中定义一些变量，他们就在全局作用域中。JavaScript 例子var myGlobalScope = 'Global scope value'; console.log('myGlobalScope: ' + myGlobalScope); // "myGlobalScope: Global scope value"局部作用域局部作用域通过一 ...继续阅读 (24)

考虑一下以下的情景：首先让我们先看一下下面这幅动图，图中George跑着穿过鸽子从而引起鸽子的展翅高飞。我们该如何模拟这种效果呢？仔细观察一下这些鸽子，它们数量不是很多，但是它们都是单独起飞。我们采用错开动画的方式来重建这样的效果，而不是一次就控制一组动画。随着每一个项目动画延迟时间的增加，它们表现的就像是一个个独立的个体，但仍然会作为一个整体正确的移动。这样的结果感觉更加迷人且真实。我最近刚发布的Isotope v3项目就使用了这种方法：尽管每一项的过渡很好设置，但是管理却很困难。在不同的时间间隔运行动画会变得非常复杂。因此，下面就让我们来讨论如何更有效的错开每一项的过渡。在示例中我们使用了一个简单的动画：水平移动一组项目。每一项都有一个CSS过渡：transform 0.4s，他们通过切换.is-moved类来移动。以下是所有项目一起移动的第一个示例：setTimeout我们可以使用setTimeout来错开切换过渡。在JavaScript中，setTimeout将会在一个延迟之后才开始过渡。这个效果看起来已经很棒了。不过我还是想微调一下动画，我希望每一项能不重叠移动。也就是说如果是向右移动，最先开始移动的是右边的项目；如果是向左移动，最先开始移动的应该是左边的项目。所以我们就需要在向右移动的时候反转一下setTimeout的延迟。看上去还不赖，那么我们对这个动画进行一些测试： ...继续阅读 (23)

进度圈(Progress Circles)是经典的仪表盘元素，可以将统计数据直观地展现为摘要视图。我们可以通过JavaScript和Canvas渲染，再配合CSS，图片或者利用SVG实现一个进度圈。使用SVG实现一个进度圈并没有想象中那么难，我们先从基本的开始：创建背景首先，创建一个半径为90px的圆形，然后使用cx,cy设置SVG元素的圆心位置。 我在这里还添加了一些样式属性，比如3px的灰色轮廓。<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg"> <circle r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/> </svg>添加进度条效果现在需要在刚才的背景上再添加一个表示进度的圆形：<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg"> <circle id="backdrop" r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/> <circle id="pr ...继续阅读 (19)