CSS 即將支援嵌套，SASS/LESS 等預處理器已無用武之地？
- 2021 年 8 月 10 日
- 筆記
最近，有一则非常振奋人心的消息，CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting ，表示 CSS 嵌套规范即将进入规范的 FWPD 阶段。 目前对应的规范为 -- CSS Nesting Module 。 随着 CSS 自定义属性（CSS Vari …
Continue Reading寫了這麼多年 CSS，initial 和 inherit 以及 unset 和 revert 還傻傻分不清楚？
- 2021 年 7 月 22 日
- 筆記
经常会碰到，问一个 CSS 属性，例如 position 有多少取值。 通常的回答是 static 、 relative 、 absolute 和 fixed 。当然，还有一个稍微生僻的 sticky 。其实，除此之外， CSS 属性通常还可以设置下面几个值： initial inherit uns …
Continue ReadingCSS 世界中的方位與順序
- 2021 年 7 月 20 日
- 筆記
在 CSS 中，我们经常会与各种方向方位打交道。 譬如 margin 、 padding ，它们就会有 margin-left 、 margin-right 或者是 padding-left 、 padding-right 。还有定位中的 left 、 top 、 right 、 bottom ，它 …
Continue ReadingCSS 奇思妙想 | 巧妙的實現帶圓角的三角形
- 2021 年 7 月 14 日
- 筆記
之前在这篇文章中 -- 《老生常谈之 CSS 实现三角形》 ，介绍了 6 种使用 CSS 实现三角形的方式。 但是其中漏掉了一个非常重要的场景， 如何使用纯 CSS 实现带圆角的三角形呢？ ，像是这样： 本文将介绍几种实现带圆角的三角形的实现方式。 法一. 全兼容的 SVG 大法 想要生成一个带圆角 …
Continue ReadingCSS 奇思妙想 | 全兼容的毛玻璃效果
- 2021 年 6 月 30 日
- 筆記
通过本文，你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器，如何利用一些技巧性的操作，巧妙的同样实现毛玻璃效果，让这个效果真正能运用在业务当中 什么是 backdrop-filte …
Continue ReadingCSS 奇思妙想 | Single Div 繪圖技巧
- 2021 年 6 月 1 日
- 筆記
经常能看到有关 CSS 绘图的文章，譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就是少了一些难度，只需要有耐心，很多图形还是能够被慢慢实现出来的。 基于 CSS 绘图的这个需求，逐渐又有了新的 …
Continue Reading
新時代創意布局不完全指南
- 2021 年 5 月 27 日
- 筆記
依稀记得，某年广东语文高考作文的相关描述 -- “有时，常识虽易知而难行，有时，常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被削弱。 CSS 更新之快，只能不断鞭策自己持续学习，一直呆在舒适区中，很容易就跟不上节奏。当然，不仅仅是 CSS，对于任何技术任何行业也可以套用这句话。 …
Continue Reading使用 CSS perfer-* 規範，提升網站的可訪問性與健壯性
- 2021 年 5 月 24 日
- 筆記
文本将介绍 CSS 媒体查询中新增的几个特性功能： prefers-reduced-motion prefers-color-scheme prefers-contrast prefers-reduced-transparency prefers-reduced-data 利用好它们，能够很好的提升 …
Continue Reading一種巧妙的使用 CSS 製作波浪效果的思路
- 2021 年 5 月 18 日
- 筆記
在之前，我介绍过几种使用纯 CSS 实现波浪效果的方式，关于它们有两篇相关的文章： 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果，思路非常有意思。 从定积分实现曲边三角形面积说起 在进入主题之前，先看看这个，在高等数学中，我们可以通 …
Continue Reading小技巧！CSS 提取圖片主題色功能探索
- 2021 年 5 月 11 日
- 筆記
本文将介绍一种利用 CSS 获取图片主题色的小技巧。一起看看~ 背景 起因是微信技术群里有个同学发问，有什么方法能够获取图片的主色呢？有一张图片，获取他的主色调： 利用获取到的这个颜色值，来实现类似这样的功能 -- 容器中有一张图片，希望背景色可以适配图片的主色，像是这样： 大家出谋划策，有说利用 …
Continue Reading