Clik here to view.
Flexbox布局实战
在最近的一个项目中，我们终于将Flexbox广泛用于页面布局当中。通过这次实战，让我对Flexbox相关知识有了更进一步的了解，也在这方面增涨了不少的知识。接下来，我将分三个部分来解释Flexbox在Web布局中的实战。主要页面布局(一个JavaScript单页面小应用)流体网格和折叠盒子(Accordion)“Cards”和“Slabs”产品序言这不是一篇有关于Flexbox的科普教程，这里有些关...
View ArticleClik here to view.
使用CSS 3D Transform创建Isometric布局
本教程的灵感来自于Envato的最新版本。这个页面的主页功能是展示一系列创意产品(字体、图标、图片模板等等)，而且其布局采用了一个整洁的Isometric网格布局。我们要使用CSS 3D Transform来得新创建这个Isometric网格布局。等角投影(Isometric...
View ArticleClik here to view.
CSS Animation性能优化
CSS Animation是实现Web Animation方法之一，其主要通过@keyframes和animation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画，咱们来聊聊CSS...
View ArticleClik here to view.
CSS Grid布局：快速入门
我们将了解前沿的CSS Grid布局，从而了解CSS Grid布局是如何改变Web的布局。这篇文章是一篇快速入门的文章，将会跳过一些细节和其中的细微差别，其主要是帮助你了解前沿的CSS Grid布局。设置你的浏览器CSS Grid布局（也常常被称为网格）是一个正在讨论的CSS模块规范，你会发现现在浏览器对其支持很弱。如果你现在开始使用它，你需要在IE11（它支持的是旧规范）、Microsoft...
View ArticleClik here to view.
CSS Grid布局：列和间距
在上一节介绍了Grid的基础知识，在前一节的基础上介绍Grid的新特性，怎么样来提高间距的设置以使用fr单位和repeat()实现可伸缩性的布局。可伸缩性单位网格的目的是使我们能正确的控制网格布局，让我们的布局变得更容易。如果你还记得，我们在上一节定义的网格都是和像素有关。grid-template-columns: 150px 20px 150px 20px 150px;...
View ArticleClik here to view.
单聊background-repeat
background-repeat是background属性之一，对于前端而言，这是再熟悉不过的属性之一了。那么为什么今天要来聊这个background-repeat属性呢？在CSS2.1中，众所周知，background-repeat属性具有四个常见的值repeat、repeat-x、repeat-y和no-repeat。而今天要说不是这四个属性值，在CSS Backgrounds and...
View ArticleClik here to view.
Clik here to view.
CSS Grid布局：图解网格布局中术语之一
Grid布局是2010由Microsoft提出的，最后提交的工作草案是2016年9月29日提交的。到目前为止，浏览器对其支持度还是一片顠红，但我们还是通过浏览器的设置可以看到相关的效果。比如Chrome浏览器中通过chrome://flags/#enable-experimental-web-platformfeatures打开Chrome浏览器实验网络平台功能。或者在你的项目中调用CSS...
View ArticleClik here to view.
如何使用Rollup打包样式文件并添加LiveReload
通过这个教程学习如何使用JavaScript打包工具Rollup配合PostCSS来取代Grunt或Gulp处理样式文件。上一篇文章中，我们完成了使用Rollup打包前端JavaScript入门。这篇文章包含第二部分和第三部分。第二部分会继续在上次的项目中进行，为Rollup添加处理样式的能力，使用PostCSS进行一些转换，让我们能使用更简单的变量写法和嵌套规则等语法糖。然后完成第三部分，圆满结束...
View ArticleClik here to view.
CSS 3D应该注意的事项
我一直喜欢3D。我也开始使用CSS 3D Transform，而且浏览器对它的支持度越来越好。但给我的感觉，使用Transform就是用来创建2D图形，并且使用旋转和位移可以创建一些3D图形。但在实际使用的时候，还是越到了不少的麻烦，而且这些麻烦出乎我的意料。我想或许大家也同样遇到过这样的问题，为了大家在使用CSS 3D...
View ArticleClik here to view.
CSS Grid布局：图解网格布局中术语二
在上一节中，主要介绍了CSS Grid布局中网格线、网格布局属性、单元格合并等相关术语，在这篇文章中将继续介绍网络布局中的相关术语：网格区域，网格轨道和网格单元格。希望对大家对学习CSS Grid布局有所帮助。网格区域（Grid...
View ArticleClik here to view.
CSS Grid布局：图解网格布局中术语三
经过网格术语一和术语二两篇文章，我们对CSS Grid布局中术语有一定的了解。除了这两篇文章提到的术语之外，还有其他相关的术语。这篇文章主要和大家一起来探讨网格。CSS Grid布局说的就是网格，那么网格就是其中最重要的术语之一。接下来，我们要说的就是网格相关的内容。声明网格和网格容器如果需要使用CSS...
View ArticleClik here to view.
响应图片断点生成器
四年前，Jason Grigsby问了我一个出人意料的难题: 你是如何获取响应式图片断点的？一年之后，他得到了答案: 理想情况下，我们会设置响应式图片性能预算实现“在不同大小文件间的跳转。”Cloudinary创建了一种工具实现了这一想法，并且在社区获得了一致性的好评:“太棒了！现在，它还可以实现什么呢？扩展阅读响应式图片断点生产器简介响应式图片:...
View ArticleClik here to view.
CSS Grid布局：响应式布局
在本系列的教程当中，你已经熟悉了CSS Grdi的语法，了解了页面布局的一些有效方法，也可以跟以前一些不良的习惯说再见了。在今天这篇文章中，我们将了解有关于CSS...
View ArticleClik here to view.
有趣的CSS像素
如今很多艺术被超清，高像素图片掩盖了光芒，像素艺术就是其中之一。我在逛CodePen的时候被一些像素作品惊呆了，它们又一次告诉了我像素艺术多么的了不起。很酷不是吗？像素图案是在高清和高分辨率的图片或插画上加一层简单柔和的蒙层合成的。这也是个教我们用HTML和CSS来创做像素艺术的好例子。让我们打破这个概念，建立一个可以在其他地方可用的模式。创建栅格首先，我们需要一个画布来绘制这个杰作。我们要创建一个...
View ArticleClik here to view.
使用CSS Mod Queries控制选择器范围
最近有一个项目需求，希望一个简单的列表在一个网格中完美显示，比如只有一个单元格的时候，列表占据整个容器宽度，但总是不太好控制。因此，有时当你忙着一件事情时，问你有没有办法可以实现，我试图使用可以想到的办法，总是会有空白出现，我就会心烦意乱的说，实现不了。当时，我正在伦敦一家新闻机构做网站。花了一年多时间把网站从CMS迁移到Adobe...
View ArticleClik here to view.
视频首发
在线购买前端视频到目前为止在互联网上已经有很多种类，那么我的视频也将首发。其实我一直想录制视频，但也一直没敢录制视频，其实有两个主要原因，第一个原因是我操着一口“标准”的胡建口音，怕录制出来的视频没人听得懂；其二是我怕录制的视频没人喜欢，而且很易盗版。结过一系列的技术手段，解决了易盗版的问题，但我这一口“标准”的胡建话或许是无法改变。不过不要紧，我还是和我的好友Busy一起录制了一个系列的前端视频。...
View ArticleClik here to view.
弄懂Sass 3.5的匿名函数
对博客上最新发布的Sass版本感到困惑？我也是。Sass 3.5.0-RC.1标记了一种新的数据类型：匿名函数。在候选发布公告中，用了四个段落篇幅描述了匿名函数大量的细节，而不显示任何代码。由于并未真正理解它的含义，所以决定深入了解它。匿名函数候选版本上面写着：可通过传函数名到get-function($name)中得到一个匿名函数这说明...
View ArticleClik here to view.
说说CSS中的@supports
CSS中的@supports属性已经不是新东西了，只不过一直以来，大家碍于浏览器对其支持度不强，而无人问冿。这两天看到两篇新文单都是介绍@supports。其中一篇是介绍怎么使用@supports来查询CSS的新特性，另外一篇是如何使用@supports来改变你的生活。How to use CSS Feature Queries by @Abbey Fitzgerald@supports will...
View ArticleClik here to view.
如何编写自定义Sass 函数
如果您构建过不少网站，可能已注意到可以在一个项目中轻易的复制代码然后跨项目应用。反复复制相同的代码会浪费时间和增加错误出现的可能性。在Sass之前的系列中，我曾说mixins是样式重用和编写 DRYer代码的一个选择。Functions是实现相同功能的另一个方法。最近几个月我一直在讲Sass的数据类型、运算符和函数。我们讲过了numbers, strings, colors, colors...
View Article