译文

利用 SVG 和 CSS3 实现有趣的边框动画

今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时,会有一个微妙的动画发生 —— 网格元素变得透明,每条边有个顺时针的动画,创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS的transition来完成。注意,这个技术还是实验性的。

使用writing-mode实现垂直排版

大约一年前,我写了一篇关于在Web中实现垂直排版的文章。这是一个简单的Demo,它允许你通过复选框来切换书写模式。在不久之后我遇到了@Yoav Weiss,并一起聊了一些关于响应式图片社区小组,因为我提到了如果可以通过媒体查询得到picture元素的writing-mode,就不必在切换排版的时候通过一些黑魔法的方式对图片进行转换。他建议我写一个响应式图片的用例。当我重新打开这个Demo的时候,看到的结果让我感到无语。为了宣泄一下,我将一步一步写下各种浏览器的渲染结果,以及目前可能的解决方案。这篇文章的篇幅很长,可能会花费你一定的时间。

三个点如何改变JavaScript对象的rest和spread属性

在JavaScript中合并多个对象是一个很常见的事情。但在JavaScript中,到目前为止并没有一种很方便的语法来进行合并。在ES5中,通过使用Lodash的_.extend(target, [sources])(或者其他选项),在ES2015中引入了Object.assign(target, [sources])。幸运的是,对象的spread语法(ECMAScript第3阶段建议)是如何操作对象,提供了一个简短且易于遵循的语法。

理解CSS布局和BFC

CSS布局中有一些概念,一旦理解了这些概念,就能真正的提高你的CSS能力。这篇文章主要介绍的是关于块格式化上下文(Block Formatting Context),也就是大家俗称的BFC。你可能从未听说过这个术语,但只要你曾经使用过CSS布局,你就可能知道它是什么。理解BFC是什么,它有什么功能,以及如何创建一个BFC是非常有用的,这些能帮助你更好的理解CSS布局。在这篇文章中,我将会通过几个很熟悉的示例来解释BFC。我还会介绍一个新的display的值,当你理解了BFC是什么的时候,你才能了解为什么需要这个值。也就能更好的理解它的真正意义。

使用Web Animations API让动画效果做加法

这些特性在写这篇文章的时候还没有在任何的浏览器得到稳定的支持。但是,接下来要讨论的内容在Firefox Nightly中得到了支持,而且关键部分在Chrome Canary(开启Web实验性特性),所以我建议使用这些浏览器中的一个(在阅读本文时)。

静态网站剖析

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

Metaballs

Metaballs是有机的黏糊糊的黏糊糊的东西。从数学的角度来看,它们是一个等值面。可以用一个数学公式来表示:f(x,y,z) = r / ((x - x0)2 + (y - y0)2 + (z - z0)2)。@Jamie Wong写了一篇非常优秀的教程,介绍了怎么使用Canvas来渲染Metaballs。

编写 SVG 的指南

Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径,图片和(或)文本组成,并能够在不失真的情况下任意变换尺寸。本书主要介绍了内联SVG,它是指在HTML中编写的嵌入式代码,以便在浏览器中生成这些图形。以这种方式使用SVG有许多优点,包括为了交互目的访问所有图形的各个部分,支持访问 SVG 文档构成的 DOM 节点树,查询、修改 DOM 节点的属性,提升用户可访问性。先介绍基本组织和简单形状,再继续描述SVG坐标系或画布,然后用它绘制图形的内部和/或边框,变换,以及使用和操作图形文本。通过渐变和模式等更高级的功能来总结。这个指南快速且详细的介绍内联式SVG以及所有涵盖的可使用的功能,有助于你学习SVG。 它面向设计师和开发人员,希望以最可行的方式将SVG添加到他们的工作流程中。

从小笔画细节到开始使用手工制作的模式,本指南旨在成为一个围绕“go-to”编写SVG的参考。

使用Firefox 网格检查器调试 CSS网格布局

这篇文章介绍了Firefox DevTools的一些鲜为人知的特性,这些特性可以在你构建和调试新的CSS网格布局时派上用场。你可能在今年听过不少有关于CSS特性的讨论。如果你在同一个句子中听到CSS网格这两个词,那么我强烈建议你去看看CSS Grid的这个CSS模块。浏览器以CSS盒模型的方式呈现HTML元素,而CSS Grid则是一种新的布局模式,它为开发者提供了控制这些盒子及其内容大小和位置的能力。该模块引入了一系列属性,允许我们创建网格结构,并使用CSS控制网格项的位置和大小。

Vue响应式及其缺陷

我们喜欢Vue的原因之之就是其响应式系统。如果改变一个数据值,它会触发一个页面的更新来反映这个变化。当你创建数据属性,计算属性和绑定属性等,Vue会自动配置响应式。这让事情变得简单,但这种简单却又会让我们掉到陷阱中,就像自动汽车一样,自动响应让我们变得懒惰,当它不工作的时候,我们并不知道是为什么?

页面

返回顶部