现代 CSS

译文

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会自动配置响应式。这让事情变得简单,但这种简单却又会让我们掉到陷阱中,就像自动汽车一样,自动响应让我们变得懒惰,当它不工作的时候,我们并不知道是为什么?

美化表单的CSS高级技巧

表单一直以来对于CSSer来说都是一件不易的事情,很难用CSS处理好表单要样式。但是有一些很少使用的选择器,却赋予我们不一样的能力,可以让我们很好的控制input元素和其周边元素的样式,而且是根据功能来调整不同的样式,这些往往都是通过JavaScript辅助完成的。而这些选择器中有一些是较新的,而另一些是老的选择器,只不过没有过多的被重视,甚至没什么人使用。以至于这么强大的功能就这样被忽视。

使用CSS Houdini制作平滑的圆角

最近,我在Twitter分享了一篇关于用户界面的文章。我喜欢Illusions,但这对我来说是一个新的东西:一个修正的圆比几何图形看起来更圆!圆角矩形也是这样。令人惊讶的是,我还发现,自iOS7以来,苹果一直在使用这个技巧。在数学上,它被称为Lamé Curve or Superellipse

需要掌握的14个JavaScript的调试技术

大家都知道熟悉掌握工具的使用能让我们事倍功倍,对完成任务的产生的影响非常大。对于JavaScript的调试,都一直说是难以调试,但事实上如果你掌握一些调试技巧,那么解决一些问题或调试Bug的时间会少很多。这篇文章整理了14个你可能不知道的调试技巧,但是下次你发现自己需要调试的JavaScript代码时,可能会用得上,也会因此记住这些调试技巧。这些调试技巧大部分都是针对Chrome和Firefox的浏览器,尽管也有许多和其他浏览器调试工具一样。接下来,我们开始了解这些调试技巧。

JavaScript中的所有循环类型

在英语中,Loop这个词指的是由弯曲的曲线所产生的形状。类似的概念,Loop这个词已经被用于编程中。如果你看到下图,你就会清楚的知道指令的流动是如何在一个循环的动作中不断重复的。在编程中,循环的概念并不是什么新概念,它们常常在编码时使用。虽然不是的语言其语法不同,但基本概念是相同的,根据需要重复相同的代码块。JavaScript增加了循环类型(包括各种类型的循环),并使其与它们的工作更加舒适和高效。在本文中,我们将学习JavaScript中所有可用的循环。

output元素

昨天晚上,我在一个特别大的代码库中四处游荡,偶然发现了我们平时使用的normalize.css文件用于重置HTML元素在不同浏览器中的样式。在这个过程中,我发现了一个名为<output>的特殊元素的样式,这是我以前从未见过的,甚至从未听说过的。根据MDN上的相关描述,它代表计算或用户操作的结果,通常用于表单。让我感到尴尬的是,自从Chris在2011年在一篇文章中使用它之后,这并不是一个新的,花哨的附加功能。

Vue的作用域插槽

作用域插槽(Scoped Slots)是Vue的一个很有用的特性。可以使组件更加通用和可复用。唯一的问题是他们很难理解!试图让你围绕着整明白父和子作用域的交织关系,就像是解决一个棘手的数学方式程一样。当你理解不了的时候,最好的一个方法就是试着用它来解决问题。在接下来的内容中,这篇文章将向大家演示如何使用作用域插槽来构建可重用的列表组件。

页面

返回顶部