2018年01月_W3cplus_

原创 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 API是什么？你能

2018-01-31 00:00:00 1087

原创使用SVG制作进度条之二

在上一节中，学习了怎么利用SVG的stroke-dasharray和stroke-dashoffset来制作进度条。记得在文章末尾留了一个悬念，说这一节中，要聊聊怎么用Vue来把这个SVG的进度封装成组件。咱们先不聊Vue怎么把这个封装成组件（我搜索了一下，有现在所这方面组件，而且做得蛮好的，接下来先学习一下）。今天接着聊上一节中的进度条怎么来实现。不过略有不同。不同点来自于网上一位朋友向我提的一

2018-01-27 00:00:00 2186

原创如何在Vue项目中使用vw实现移动端适配

有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为了新

2018-01-25 00:00:00 4173 4

转载用SVG和Vanilla JS框架创建一个“星形变心形”的动画效果

在我写的这篇文章中, 讲述了如何用Vanilla JavaScript使动画顺滑的从一种状态过渡到另一种。最好先看下那篇文章，因为在这篇文章中我们要用到一些那篇文章中讲过的内容。例如例子的演示、各种时间函数的公式、当从结束状态过渡到初始状态时不使时间函数倒转过来。都在那篇文章中做了详细讲解。在最后的例子中，通过改变绘制嘴形的path的属性d，我们得到了从悲伤的嘴变高兴的嘴的效果。更高水平的控制路径

2018-01-23 00:00:00 923

原创使用SVG制作进度条

进度条是我们在Web中经常看到的一种效果，常见的进度条有水平横条和径向圆形的进度条。今天我们来看看怎么使用SVG来实现进度条的效果。使用SVG可以很容易的实现，也易于理解，最主要是使用SVG实现的进度条具有良好的跨浏览器，并且能根据浏览器屏幕尺寸很好的显示。基础在具体制作之前，有一些简单的概念要了解一下，这是制作进度条的一些基础。水平进度条，是一条直线，使用SVG的元素可以绘制圆形进度条，是一个环

2018-01-21 00:00:00 2215

转载借助HTML5 details,summary无JS实现各种交互效果

了解HTML5 details, summary默认交互行为标签在Chrome，Firefox等浏览器下默认是有展开收起行为的，例如下面HTML：details> summary>这是摘要1summary> p>这里具体描述，标签相对随意，例如这里使用的<p>标签。p>details>结果UI表现为：具体描述为：只显示了标签内容，而默认隐藏了；标签前面出现了一个小三角；

2018-01-21 00:00:00 1021

原创 SVG之旅：线条之美，玩转SVG线条动画

在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalLength()获取到路径的长度），在@keframes中的100%处设置stroke-dashoff

2018-01-18 00:00:00 3023

原创 SVG之旅：SVG线条动画实现原理

对于SVG路径动画，我相信大家都看到过这样的动效：一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱，他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上讨论过这种技术。Polygon使用它在一篇设计方面的文章里创建出了非常神奇的效果。Codrops也有很多非常酷的案例。在这篇文章中，我并没有什么要补充的

2018-01-14 00:00:00 3529

原创 SVG之旅：描边特性

在上一节介绍SVG填充特性中，提到了SVG中另一个特性描边特性（stroke）。SVG的描边特性主要包括stroke、stroke-width、stroke-opacity、stroke-dasharray、stroke-linecap、stroke-linejoin和stroke-miterlimit等属性。在这一节中，主要围绕这几个SVG属性进行展开。在SVG中咱们通过stroke来对绘制的图

2018-01-13 00:00:00 940

原创使用writing-mode实现垂直排版主标签

大约一年前，我写了一篇关于在Web中实现垂直排版的文章。这是一个简单的Demo，它允许你通过复选框来切换书写模式。在不久之后我遇到了@Yoav Weiss，并一起聊了一些关于响应式图片社区小组，因为我提到了如果可以通过媒体查询得到picture元素的writing-mode,就不必在切换排版的时候通过一些黑魔法的方式对图片进行转换。他建议我写一个响应式图片的用例。当我重新打开这个Demo的时候，看

2018-01-13 00:00:00 1342

原创七年之痒

这是一篇水文，可能会浪费你的时间哟，慎入(^_^)随着美国性感女星玛丽莲·梦露曾主演过一部电影《七年之痒》播出之后，这个词已成为西方的谚语，而此谚语在中文中也常常被拿来使用，甚至比它的起源更为华人所熟知。当然，我们今天聊的不是感情也不是艳遇，只是想借“七年之痒”来描述我与前端之间的故事。就算是2017年的总结吧。三年之痛，七年之痒无法避免，但痛过痒过之后，只有自己最熟悉的，才是最能让自己舒适的。才

2018-01-11 00:00:00 791

原创字体变体font-variation-*

今天在Twitter看到Codepen上的一个示例，感觉很神奇。刚开始以为是用了什么黑科技，但仔细一看是纯CSS实现的一个效果。示例中最关键的是使用了font-variation-settings属性。那么这个属性有什么神奇之处呢？容当后述。在详细介绍font-variation-settings属性之前，先把Demo效果给大家看看：如果要用一个词来描述的话，可以把其称为字体变体（Font var

2018-01-11 00:00:00 2614

原创 CSS Grid和Flexbox解决实际的布局问题

就目前为止，CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持，但对于实现布局而言，这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话，那么对于Web的布局将是一种福音。就前面学习的CSS Grid和CSS Flexbox，我们对CSS的Flexbox和Grid有了很

2018-01-09 00:00:00 2602 3

原创理解CSS布局和BFC

CSS布局中有一些概念，一旦理解了这些概念，就能真正的提高你的CSS能力。这篇文章主要介绍的是关于块格式化上下文（Block Formatting Context），也就是大家俗称的BFC。你可能从未听说过这个术语，但只要你曾经使用过CSS布局，你就可能知道它是什么。理解BFC是什么，它有什么功能，以及如何创建一个BFC是非常有用的，这些能帮助你更好的理解CSS布局。在这篇文章中，我将会通过几个很

2018-01-07 00:00:00 366

原创静态网站剖析

静态网站是Web站点中较为简单的一种，因为它们没有传统的服务器。所涉及的唯一服务器是一个静态资源服务器，你不必对其监控和维护。但是这些所谓的静态网站通过JavaScript可以在客户端上实现很多动态的功能。这使得它们根本不是真正的静态网站——也许它们应该被称为无服务器站点。这种功能通常是用复杂的工具创建的，比如Webpack、Babel和NPM。有效地使用这些工具并不简单。在深入研究这些复杂的工具

2018-01-05 00:00:00 207

原创 SVG之旅：填充特性

通过前面的学习，你可以用你掌握的知识来绘制任何图形，接下来的目标是给绘制的图形着色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的Web网站的SVG使用的是内联样式CSS。但这些方法都有各自的优缺点。在SVG中要给已绘制好的图形着色，我们主要通过SVG的填充和描边特性来完成。比如在前面的示例中，我们常能看到的fill属性，

2018-01-04 00:00:00 1568

W3cplus