06 2022 档案
摘要:前言 老掉牙的东西, 主要是想写 passive, 随便也写一点 bubble, capture 和 custom event 吧. Bubble Dom 监听事件是会冒泡的. 什么意思 ? 上图有 2 个 box, parent box 嵌套 child box. 假设 parent 和 chil
阅读全文
摘要:前言 我是在搞 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
阅读全文
摘要:介绍 Breadcrumb 长这样 主要就是让用户清楚自己在哪个 page, 然后可以轻松返回上一页. Step by Step HTML <div class="container"> <ol> <li><a href="/">Home</a></li> <li><a href="/tourist
阅读全文
摘要:前言 Google libphonenumber 是 Java 的, ASP.NET Core 只是 port 过去而已. 以前在 angular2 学习笔记 ( translate, i18n 翻译 ) 有介绍过. 但后来就一直没怎么用过了. 参考 Github – Google libphone
阅读全文
摘要:前言 以前写过的文章 Asp.net core 学习笔记 ( HttpClient ). 其实 HttpClient 内容是挺多的, 但是我自己用到的很少. 所以这篇记入一下自己用到的就好了. 参考 3 ways to use HTTPClientFactory in ASP.NET Core 2.
阅读全文
摘要:原生 Radio 的 Limitation <input type="radio" style="width: 25px; height: 25px; cursor: pointer" /> 效果 原生的 radio 其实长的不丑, 但它不能调颜色, radio 无法配合网站的 primary, s
阅读全文
摘要:当 charAt 遇上 Emoji 参考: stackoverflow – How to get first character of string? 我们经常会用 charAt(0) 来获取 first character. 这个用在 ASCII 是完全没有问题的. 但是如果遇到 Unicode
阅读全文
摘要:前言 之前写过一篇 ASP.NET Core – View Component 里面有提到, View Component 是 Partial View 的加强版. 多了一个 .cs 可以写逻辑. 那如果我们不需要那么复杂就可以使用简化版的 Partial View 了. 重点 1. 一个 View
阅读全文
摘要:效果 当 scroll 到那些号码的时候, 号码从 0 开始跳动, 一直到最终的值. 实现思路 1. 一开始把号码 set to 0 2. 使用 IntersectionObserver 监听号码出现 3. 出现后开始累加, 一直到最终的 value. (注意, 虽然每个号码是不同的, 但是会在同一
阅读全文
摘要:前言 在做 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
阅读全文
摘要:前言 以前写过相关的文章 angular2 学习笔记 ( animation 动画 )。但在项目种很少用到 Web Animation。 体会不到它的精髓,目前的感觉是,它对比 CSS Animation 更好控制,比如它有 play、pause 这些功能。 缺点就是需要把 Styles 逻辑写到
阅读全文
摘要:前言 为了方便管理, 我们会定义 CSS Variables, 类似于全局变量. 有时候做特效的时候还需要 JavaScript 配合, 这时就会希望 JavaScript 可以获取到 CSC Variables, 虽然 JS 可以通过 getComputedStyle 单独获取某个 CSS Var
阅读全文
摘要:参考 Youtube – Detecting Screen Size and OS Dark Mode with matchMedia() - JavaScript Tutorial 介绍 CSS 有 Media Query, JS 呢? 没错就是用 Window.matchMedia 方法. 使用
阅读全文