Clik here to view.
字体变体font-variation-*
今天在Twitter看到Codepen上的一个示例，感觉很神奇。刚开始以为是用了什么黑科技，但仔细一看是纯CSS实现的一个效果。示例中最关键的是使用了font-variation-settings属性。那么这个属性有什么神奇之处呢？容当后述。在详细介绍font-variation-settings属性之前，先把Demo效果给大家看看：如果要用一个词来描述的话，可以把其称为字体变体（Font...
View ArticleClik here to view.
使用writing-mode实现垂直排版
大约一年前，我写了一篇关于在Web中实现垂直排版的文章。这是一个简单的Demo，它允许你通过复选框来切换书写模式。在不久之后我遇到了@Yoav...
View ArticleClik here to view.
SVG之旅：描边特性
在上一节介绍SVG填充特性中，提到了SVG中另一个特性描边特性（stroke）。SVG的描边特性主要包括stroke、stroke-width、stroke-opacity、stroke-dasharray、stroke-linecap、stroke-linejoin和stroke-miterlimit等属性。在这一节中，主要围绕这几个SVG属性进行展开。在SVG中咱们通过stroke来对绘制的图形...
View ArticleClik here to view.
SVG 路径动画简易指南
任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！SVG（可缩放的矢量图形）完美地解决了上文中提到的部分问题。尽管 SVG...
View ArticleClik here to view.
SVG之旅：SVG线条动画实现原理
对于SVG路径动画，我相信大家都看到过这样的动效：一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱，他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24...
View ArticleClik here to view.
利用 SVG 和 CSS3 实现有趣的边框动画
Carl Philipe Brenner的网站上有一些非常有创意和微妙的动画效果，今天我想和大家一起探计一下如何在SVG线条上使用CSS的transition来实现一些有意思的边框动画效果。今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生 ——...
View ArticleClik here to view.
SVG之旅：线条之美，玩转SVG线条动画
在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalLength()获取到路径的长度），在@keframes中的100%处设置stroke-dashoffs...
View ArticleClik here to view.
使用SVG制作进度条
进度条是我们在Web中经常看到的一种效果，常见的进度条有水平横条和径向圆形的进度条。今天我们来看看怎么使用SVG来实现进度条的效果。使用SVG可以很容易的实现，也易于理解，最主要是使用SVG实现的进度条具有良好的跨浏览器，并且能根据浏览器屏幕尺寸很好的显示。基础在具体制作之前，有一些简单的概念要了解一下，这是制作进度条的一些基础。水平进度条，是一条直线，使用SVG的<line>元素可以绘...
View ArticleClik here to view.
移动端H5多平台分享实践
圣诞节和元旦团队策划了两个活动，都涉及到了在多个平台下的分享，如何按照产品要求实现多平台下一致的分享效果，包括分享文案的动态生成，在没有Native的帮助下是比较困难的。我们研究了很多分享方案，得到了一套较为完整的分享方案。微信的分享微信下的分享通过调用微信提供的JS-SDK和引导用户点击右上角完成。使用微信的JS-SDK需要引入如下.js文件：<script...
View ArticleClik here to view.
Clik here to view.
CSS Grid 布局揭秘
深入挖掘 CSS Grid 布局规范，发掘一些你可能不知道的特性，并探索即将到来的特性。CSS Grid 布局于 2017 年 3 月 开始被浏览器所支持，在撰写本文时，大多数网站有超过百分之70的访问者有 CSS Grid 特性支持。 这个数据还在快速增长中， 并且在 Edge 浏览器发布更新支持后继续改善。我希望你之前已经有时间去探索过 CSS Grid 布局的一些特性了。...
View ArticleClik here to view.
CSS的display:contents
没错，display: contents要在Blink引擎和WebKit引擎里成为默认样式了，可能会随着Chrome浏览器65版与Safari浏览器11.1版一起发布。火狐浏览器从37版开始就有了这一功能，现在要轮到这两个浏览器了。这样，唯一没有这个功能的就剩下Edge浏览器了，大家一起投票提要求吧！关于这一点，我想着重说明一下，Chromium浏览器对这一功能的支持是由Emilio...
View ArticleClik here to view.
网格项目的宽高比
之前，我们讲了宽高比盒子，谈到一个技巧，就是运用填充来随心所欲地调整一个元素的长宽比例。这个技巧并不是经常能用到的，因为修整一个元素的高度是自找麻烦，但也不是没有这种情况出现。要降低这一风险，有一种方法，那就是伪元素(Psuedo...
View ArticleClik here to view.
Clik here to view.
Vue 2.0学习笔记：使用Vue创建Modal组件
Modal弹框在Web应用或者Web页面上非常常见，很多时候在不同的项目都会重写这样的一个Modal弹框。为了能偷懒，思考了一下，能不能写一个组件，比如说使用Vue创建一个组件，一个Modal组件，让其能在各个Web页面或者应用上使用。在这篇文章中，学习一下如何使用transition和slots来创建可重用的Modal组件。Modal构成Modal对于大家来说是很常见的一个东东，在Dribbble...
View ArticleClik here to view.
使用CSS Clip Path创建交互效果
你是否还记得小时候剪过杂志上的照片，把它们粘在纸上，用来制作自己的拼贴画？这篇文章是关于使用CSS的clip-path属性，用来实现Web上裁剪图片的效果。将讨论如何进行切割，以及如何使用这些镂空部件来制作一些有趣的效果。我将以下面的照片为例。照片中的这朵花从照片中的其他部分脱颖而出。也变成一个自然的焦点。创建SVG首先，将示例图片导入其中创建一个新的SVG文件。你需要有处理矢量图的编辑软件，对图像...
View ArticleClik here to view.
CSS Paint API
CSS Paint API是W3C规范中之一，目前的版本是Level1。它也被称为CSS Custom Paint或者Houdini's Paint Worklet。对于开发者而言，有一个值得高兴的是，Chrome65将会支持该API。也就是说，可以使用CSS Paint API提供的registerPaint(name, paintCtor)做一些事情。那么CSS Paint...
View ArticleClik here to view.
Clik here to view.
Vue 2.0学习笔记：创建Button组件
在上一节中，咱们学习了Vue中怎么创建组件。在这篇文章中我们以按钮组件为例，了解了怎么注册全局组件和局部组件。并且通过这些基础知识，可以轻易的创建类似于HTML中button元素效果的按钮组件。但这个组件非常的简陋，和我们想像的组件相差甚远。那么今天我们来看看，怎么在Vue中创建一个按钮组件。以Bootstrap的按钮为例很多人说Bootstrap很拙逼，灵活性不够。但我不这么认为，我是Bootst...
View ArticleClik here to view.