06 2022 档案

摘要:前言 老掉牙的东西, 主要是想写 passive, 随便也写一点 bubble, capture 和 custom event 吧. Bubble Dom 监听事件是会冒泡的. 什么意思 ? 上图有 2 个 box, parent box 嵌套 child box. 假设 parent 和 chil 阅读全文
posted @ 2022-06-30 22:17 兴杰 阅读(158) 评论(0) 推荐(0) 编辑
摘要:前言 我是在搞 1 side box-shadow 发现这个功能的. 平常很少做特效, 所以对这个好功能缺乏认识. 这篇大概记入一下先, 以后有认真用再补上细节. 参考 Youtube – Awesome UI Interactions with the CSS Clip Path Property 阅读全文
posted @ 2022-06-28 23:09 兴杰 阅读(367) 评论(0) 推荐(0) 编辑
摘要:前言 之前在 CSS – W3Schools 学习笔记 (3) 介绍过这个功能, 但一直不熟练. 每次用都卡卡的, 估计是没有写一篇独立的笔记的缘故. 特此写一篇. Text Shadow 下面这个是 before, after 的效果 CSS Style h1 { text-shadow: 5px 阅读全文
posted @ 2022-06-28 19:01 兴杰 阅读(95) 评论(0) 推荐(0) 编辑
摘要:介绍 Breadcrumb 长这样 主要就是让用户清楚自己在哪个 page, 然后可以轻松返回上一页. Step by Step HTML <div class="container"> <ol> <li><a href="/">Home</a></li> <li><a href="/tourist 阅读全文
posted @ 2022-06-25 14:06 兴杰 阅读(103) 评论(0) 推荐(0) 编辑
摘要:前言 Google libphonenumber 是 Java 的, ASP.NET Core 只是 port 过去而已. 以前在 angular2 学习笔记 ( translate, i18n 翻译 ) 有介绍过. 但后来就一直没怎么用过了. 参考 Github – Google libphone 阅读全文
posted @ 2022-06-22 22:30 兴杰 阅读(196) 评论(0) 推荐(0) 编辑
摘要:前言 以前写过的文章 Asp.net core 学习笔记 ( HttpClient ). 其实 HttpClient 内容是挺多的, 但是我自己用到的很少. 所以这篇记入一下自己用到的就好了. 参考 3 ways to use HTTPClientFactory in ASP.NET Core 2. 阅读全文
posted @ 2022-06-22 18:39 兴杰 阅读(608) 评论(0) 推荐(0) 编辑
摘要:原生 Radio 的 Limitation <input type="radio" style="width: 25px; height: 25px; cursor: pointer" /> 效果 原生的 radio 其实长的不丑, 但它不能调颜色, radio 无法配合网站的 primary, s 阅读全文
posted @ 2022-06-21 01:00 兴杰 阅读(53) 评论(0) 推荐(0) 编辑
摘要:当 charAt 遇上 Emoji 参考: stackoverflow – How to get first character of string? 我们经常会用 charAt(0) 来获取 first character. 这个用在 ASCII 是完全没有问题的. 但是如果遇到 Unicode 阅读全文
posted @ 2022-06-20 16:55 兴杰 阅读(40) 评论(0) 推荐(0) 编辑
摘要:前言 之前写过一篇 ASP.NET Core – View Component 里面有提到, View Component 是 Partial View 的加强版. 多了一个 .cs 可以写逻辑. 那如果我们不需要那么复杂就可以使用简化版的 Partial View 了. 重点 1. 一个 View 阅读全文
posted @ 2022-06-18 21:39 兴杰 阅读(209) 评论(0) 推荐(0) 编辑
摘要:效果 当 scroll 到那些号码的时候, 号码从 0 开始跳动, 一直到最终的值. 实现思路 1. 一开始把号码 set to 0 2. 使用 IntersectionObserver 监听号码出现 3. 出现后开始累加, 一直到最终的 value. (注意, 虽然每个号码是不同的, 但是会在同一 阅读全文
posted @ 2022-06-11 17:43 兴杰 阅读(52) 评论(0) 推荐(0) 编辑
摘要:前言 在做 Statistics Counter 时, 发现总是会跳, 研究后才发现原来是等宽搞的鬼, 这篇就来说说等宽字体. 参考 等宽字体在web布局中应用以及CSS3 ch单位嘿嘿 不等宽字体 不等宽指的是, 不同字母的 width 不一样. 游览器默认的字体 Times New Roman 阅读全文
posted @ 2022-06-11 13:45 兴杰 阅读(743) 评论(0) 推荐(0) 编辑
摘要:前言 font-family 虽然只是一个 CSS 属性, 但是牵连许多东西, 所以独立一篇来讲. 网站一般上会使用 Google Fonts 作为 font-family, 下面会以一个 Google Fonts 为例子. 逐步解析它背后的 CSS 知识. Pick a Google Font 到 阅读全文
posted @ 2022-06-11 00:35 兴杰 阅读(1181) 评论(0) 推荐(0) 编辑
摘要:前言 之前学 W3Schools 时记入过一些 W3Schools 学习笔记 (1) – CSS Fonts. 由于太简单就没有另外写一篇, 现在感觉内容比较整齐了, 所以整理一篇出来. 属性 font-family 定义字体, 看这篇 CSS – Font Family font-style no 阅读全文
posted @ 2022-06-10 22:58 兴杰 阅读(73) 评论(0) 推荐(0) 编辑
摘要:前言 以前写过相关的文章 angular2 学习笔记 ( animation 动画 )。但在项目种很少用到 Web Animation。 体会不到它的精髓,目前的感觉是,它对比 CSS Animation 更好控制,比如它有 play、pause 这些功能。 缺点就是需要把 Styles 逻辑写到 阅读全文
posted @ 2022-06-09 12:59 兴杰 阅读(330) 评论(0) 推荐(0) 编辑
摘要:前言 为了方便管理, 我们会定义 CSS Variables, 类似于全局变量. 有时候做特效的时候还需要 JavaScript 配合, 这时就会希望 JavaScript 可以获取到 CSC Variables, 虽然 JS 可以通过 getComputedStyle 单独获取某个 CSS Var 阅读全文
posted @ 2022-06-02 16:51 兴杰 阅读(81) 评论(0) 推荐(0) 编辑
摘要:参考 Youtube – Detecting Screen Size and OS Dark Mode with matchMedia() - JavaScript Tutorial 介绍 CSS 有 Media Query, JS 呢? 没错就是用 Window.matchMedia 方法. 使用 阅读全文
posted @ 2022-06-01 23:25 兴杰 阅读(101) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示