在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。

只有滚动以后才出现阴影。一般情况下，使用 JS 监听滚动事件动态添加类名就可以实现，不过经过我的一番尝试，发现这种效果仅仅使用 CSS 也能轻易实现。

鼠标在画布上移动的时候，吸铁石们会被吸引，旋转。使用 Canvas 实现这个效果并不难。恰好最近看了一点 Houdini 的文档。

看十遍文档不如写一篇文章掌握来得快，所以这篇文章，将使用 Houdini 的 Paint API 来复刻这个磁吸效果。

I spoke about CSS layout at CSS Day conference recently, and in the Q&A session afterwards I was asked about masonry layout in CSS. Masonry layout, in case you’re not aware, is where different height items are laid out in columns but, rather than being aligned on the row axis, the items below effectively move up to plug any gaps, kind of like a bricklayer — hence the name. Pinterest’s grid design is a commonly-cited example whenever the masonry conversation comes up.

粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。

当然，不使用 HTML + CSS 的主要原因在于，粒子动画通常需要较多的粒子，而如果使用 HTML + CSS 的话势必需要过多的 DOM 元素，这也就导致了使用 HTML + CSS 构建的粒子动画在性能上毫无优势。

当然，如果仅仅是从效果的角度而言，使用 CSS 构建的粒子动画一样可以做到非常的令人震撼。

本文，将尝试利用 CSS 来构建粒子动画。

JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。

透视背景还可以叠加花样？

A look at some interesting use-cases for CSS flexbox and grid in Figma app.

CSS Grid is a new way to create two-dimensional layouts on the web. With just a few lines of CSS, you can create a grid that was hardly possible before without JavaScript. No plugin or complicated installs, no heavy additional files, no more design limitations due to 12-columns only.

Wow？CSS 也能完成如此酷炫的转场动画了？

在这篇笔记中，主要总结了流与宽高之间是如何相互影响的，同时还探索了部分盒模型的问题。希望能给大家在平常开发时，带来一定的启发。

Create a rating component with svg stars that support fractional values.

Masonry layout can be made with the CSS columns property, and with Tailwind, that's just a couple CSS classes. CSS Columns is about as old as flexbox, but it never seemed to be as popular.

CSS的任何新特性从诞生到被浏览器普遍支持，要经历漫长的周期，而CSS Houdini开放了底层接口，让开发者直接接触、开发原生的CSS效果，实现更为复杂、流畅的效果和动画。

在文字内容排版这块，CSS 是计算机领域中无可争议的霸主气，什么 SVG 什么 canvas 根本就是望尘莫及。

Card-style components are pretty much still a thing these days, and there are many ways to make a bunch of identical rectangles look prettier.

CSS 方法论是一种面向 CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。这些方法论都会涉及结构化的命名约定，并且在组织 CSS 时可提供相应的指南，从而提升代码的性能、可读性以及可维护性。

根据 State of CSS 2020 的调查结果显示，目前使用最多的五种分别为：BEM、ACSS、OOCSS、SMACSS、ITCSS。