随笔分类 - (新) CSS
摘要:前言 Scrollbar 能 styling 的东西不多 (尤其是 IOS 基本上只能 display:none 而已),但有时候我们不得不 styling。 这里记入我自己在项目中修改过的 scrollbar 经历。 参考 can i use webkit-scrollbar MDN – ::-w
阅读全文
摘要:介绍 简单说这个 Houdini 是一系列 CSS 底层 API,它可以让我们扩展 CSS,做出一些 Polyfill。 举一个例子,让大家有个画面。 我们可以通过 CSS + JS + Canvas 语法来自创 CSS 语法,游览器解析 CSS 时它会跑我们的 JS,而 JS 用类似 Canvas
阅读全文
摘要:前言 以前在 Webpack 学习笔记 有稍微介绍过它们。这篇是单独整理版。 参考 一文彻底读懂ESLint 你的ESLint真的需要Prettier吗? 搞懂eslint和prettier等的关系 简单介绍 Prettier 是一个 formatting 工具,目的是方便统一代码格式,比如使用 s
阅读全文
摘要:前言 我第一次接触 PostCSS 是在学 Tailwind CSS 的时候. 它类似 JavaScript 的 Babel. 我没有用过 Babel, 因为 TypeScript 用的早. PostCSS 也是这样, Sass 用的早. PostCSS 具备一部分 (甚至大部分 Sass 的能力)
阅读全文
摘要:前言 CSS 一直有一些老问题没有被解决. 2022 视乎看见了曙光. 参考 4 Exciting New CSS Features in 2022 :has() 参考: YouTube – How to use CSS :has and :not - Future CSS! CSS Parent
阅读全文
摘要:前言 CSS 有好几种写法. 它们最终出来的效果是一样的, 区别只是在你如何 "写" 和 "读" 或者说开发和维护. 这已经不是如何"实现"的问题了, 而是代码如何管理维护的问题. 参考 CSS Utility Classes and "Separation of Concerns" (Tailwi
阅读全文
摘要:前言 我是在搞 1 side box-shadow 发现这个功能的. 平常很少做特效, 所以对这个好功能缺乏认识. 这篇大概记入一下先, 以后有认真用再补上细节. 参考 Youtube – Awesome UI Interactions with the CSS Clip Path Property
阅读全文
摘要:前言 之前在 CSS – W3Schools 学习笔记 (3) 介绍过这个功能, 但一直不熟练. 每次用都卡卡的, 估计是没有写一篇独立的笔记的缘故. 特此写一篇. Text Shadow 下面这个是 before, after 的效果 CSS Style h1 { text-shadow: 5px
阅读全文
摘要:前言 在做 Statistics Counter 时, 发现总是会跳, 研究后才发现原来是等宽搞的鬼, 这篇就来说说等宽字体. 参考 等宽字体在web布局中应用以及CSS3 ch单位嘿嘿 不等宽字体 不等宽指的是, 不同字母的 width 不一样. 游览器默认的字体 Times New Roman
阅读全文
摘要:前言 font-family 虽然只是一个 CSS 属性, 但是牵连许多东西, 所以独立一篇来讲. 网站一般上会使用 Google Fonts 作为 font-family, 下面会以一个 Google Fonts 为例子. 逐步解析它背后的 CSS 知识. Pick a Google Font 到
阅读全文
摘要:前言 之前学 W3Schools 时记入过一些 W3Schools 学习笔记 (1) – CSS Fonts. 由于太简单就没有另外写一篇, 现在感觉内容比较整齐了, 所以整理一篇出来. 属性 font-family 定义字体, 看这篇 CSS – Font Family font-style no
阅读全文
摘要:前言 虽然现在的 Email Client 有在进步, 但是比起 browser 还是差太远了. 假如你用 HTML5 + CSS3 的方式去写 Email Template 的话是不行的. 这篇特地学习一下如何写好 Email Marketing HTML Template. 参考 Youtube
阅读全文
摘要:前言 之前写过 HTML & CSS – Responsive Image 响应式图片 (完整版), 里面解释了原理和一些具体做法, 但是并不是以真实场景作为例子带入. 由于 RWD Image 挺复杂, 所以特地再写一篇以实战的角度来解释. 建议先阅读之前的相关文章: CSS – RWD (Res
阅读全文
摘要:前言 这篇想整理一下在网页开发中, Spacing (间距) 和 Layout 排版是如果被处理的. Spacing 介绍 东西密密麻麻会给人一种很恐怖的感觉. 只要加上一点空间 (间距), 整体感觉立马就会变好很多. 在网页开发中, padding, margin, gap, line-heigh
阅读全文
摘要:前言 Table (表格) 历史悠久, 它有许多独特的默认样式, 它也是最早的布局方案方案哦 (现在依然有用 table 来做布局的, 比如 email template). 这篇来介绍一下基本的 table styling. 参考 Youtube – Styling HTML tables wit
阅读全文
摘要:前言 Float 是上古时代的东西, 它的效果已经基本被 Flex, Grid 取代了. 但是还是可以了解它一下. 就当学习历史呗. 参考 Youtube – HTML & CSS for Beginners Part 18: How Floats and Clears work 图片和文字 hor
阅读全文
摘要:前言 这篇想整理一下在网页开发中, 字体是如果被处理的. 先看完: 平面设计 – 字体 CSS – Font / Text 属性 CSS – Font Family CSS – word-break, overflow-wrap, word-wrap, white-space CSS – ellip
阅读全文
摘要:前言 之前 W3Schools 学习笔记 (1) 也记入过 Color, 这篇整理一下在网页开发中, 颜色是如果被处理的. 网页都有什么颜色? 网页篇幅最大的颜色, 通常是来自图片, 不管是背景图, 还是内容图片. 这些都是比较 colorful 的. 其次是黑白灰, 因为除了图片, 大部分内容都是
阅读全文
摘要:参考 Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords 【译】理解CSS关键字:“Initial”,“Inherit”和“Unset” 属性, 固定值, 相关值, 元素 display, width 是属性 block,
阅读全文
摘要:介绍 counter 有点像 JS 的 for loop index. 最常用到的地方就是做 ol > li. 参考: W3Schools – CSS Counters 默认 ol > li <ol> <li> Lorem ipsum dolor sit amet. Lorem ipsum dolo
阅读全文