02 2022 档案
摘要:参考: Youtube – CSS Variables - CSS vs Sass - variables inside media queries Why we prefer CSS Custom Properties to SASS variables 与 Sass Variables 的区别
阅读全文
摘要:效果 效果来自: webflow 的一个模板 需求解释 有 3 给元素, 图片, overlay(黑影), link mouse enter 的时候, 图片要 zoom in. overlay 要 fade in. link 要 slide up mouse leave 的时候, 图片 zoom o
阅读全文
摘要:前言 之前写的 W3Schools 学习笔记 (3) – CSS 2D Transforms. 这篇作为整理. 参考: Youtube – Learn CSS Transform In 15 Minutes Demo Structure <div class="frame"></div> <div
阅读全文
摘要:前言 之前写过一些: W3Schools 学习笔记 (2) – CSS Image Sprites W3Schools 学习笔记 (3) – CSS Styling Images & CSS Multiple Backgrounds 这篇作为整理. Styling img default behav
阅读全文
摘要:前言 之前的文章 CSS – W3Schools 学习笔记 (3), 这篇独立出来写, 作为整理. 参考: Youtube – Advanced CSS Border-Radius Tutorial W3C – Rounded Corners 正文 以长方形作为例子比较容易理解. normal us
阅读全文
摘要:参考: Youtube – Chrome 88 adds aspect-ratio and 2 awesome new devtool features! MDN – aspect-ratio W3Schools – How TO - Aspect Ratio W3C – Aspect Ratios
阅读全文
摘要:参考: 掘金 – 如何更愉快地使用em —— 别说你懂CSS相对单位 绝对值 vs 相对值 px, cm, mm 这些是绝对值. rem, em 是相对值. 绝对值就是最终的尺寸. 相对值的意思是它不是最终值, 它依赖另一个变量去决定最终值. 比如 font-size: 16px 那么最终值就是 1
阅读全文
摘要:什么是 vw, vh? vh 的 v 指的是 viewport, h 就是 height. 它是 CSS 值的单位就像 px, %. .container { height: 30vh; background-color: red; } 那么 30vh 是多高呢? 30% of viewport h
阅读全文
摘要:前言 许多 element tag 都有自带的 style. 比如 h1 默认 font-size 是 2 em anchor 默认颜色是 blue 大部分默认 style 并不会是开发人员期望的效果. 所以就有了 reset css 的概念. 而开发人员期望的效果就诞生了 base css. 简单
阅读全文
摘要:前言 2021 年就写过一篇了, Asp.net core 学习笔记 Image processing (ImageSharp), 只是那时还是旧的写法, 这篇作为翻新和以后继续增加新功能的介绍. ImageSharp 是 .NET 平台开源的图片处理 Library. 完全用 C# 来写, 从 0
阅读全文
摘要:前言 以前写的 SMTP Client 相关文章: Asp.net core 学习笔记 ( Smtp and Razor template 电子邮件和 Razor 模板 ) ASP.NET Email + WebConfig Email 关于 POP3 IMAP SMTP office365 Out
阅读全文
摘要:前言 以前的文章: Stream 基础和常用 和 IO 常用. 这篇主要是做一个整理, 方便要用的时候 warm up. 之前有讲过 Bit, Byte 的基本概念: Bit, Byte, ASCII, Unicode, UTF, Base64 这里大概复述一下, 计算机最小的单元是 bit, 1
阅读全文
摘要:前言 BEM 是一种 CSS class 命名规范. 目的是防止大家名字取太短, 不小撞名字后果很麻烦. 参考: Youtube – You Probably Need BEM CSS in Your Life (Tutorial) Battling BEM CSS: 10 Common Probl
阅读全文
摘要:效果 Step1: HTML 结构 <div class="image"> <img src="./images/img-2.png" /> </div> 需要 wrap 一层 div, 因为倒影框使用 :after content 实现的, 而 img 是用不了 :after 的. 所以需要 wr
阅读全文
摘要:<img> extra 4px at the bottom 参考: Extra 4px at the bottom of html <img> The mysterious 4px gap in between images 效果 红色部分多出来的 4px. 原因是 img 是 inline ele
阅读全文
摘要:介绍 一张背景图, 一行写字, 一层黑影 (Image Overlay), 如果没有做黑影, 字的颜色容易和图片撞, contrast 就会很烂. HTML 结构 <div class="container"> <h1>Hello World</h1> </div> 很简单, 因为图片用 backg
阅读全文
摘要:前言 平面设计的基础是排版, 字体, 颜色, 这篇是字体的学习笔记. 参考: How to Choose Fonts For Your Designs Youtube – Improving Web and Mobile App Typography - 5 basic guidelines You
阅读全文
摘要:前言 由于之前那篇有点长, 而且色轮很重要, 所以独立写一篇呗. 参考: 一文看懂色轮 Youtube – 03 色彩 (什么是色相、纯度、明度、色环、补色?怎样配色?) Youtube – 初學繪畫必看調色教程!教你觀察顏色明度,之後才能調準顏色【跟着楊將學畫畫】 Youtube – RGB色彩模
阅读全文
摘要:前言 平面设计的基础是排版, 字体, 颜色. 许多年前我第一次接触 design theory 学的就是颜色, 色轮. 身为一名网页开发人员, 学习一下设计是很有必要的. 但也不需要把成为设计师当作目标. 每个人各持所职分工效率才高. 主要参考: 知乎 – 科学的光谱,色彩原理专栏 颜色和光 光波
阅读全文
摘要:前言 学平面设计有 2 种路线图 第 1 种: 平面设计 > 网页设计 > 交互设计 > UI/UX 设计 > 网页开发 (HTML/CSS/JS) > CMS (PHP/C#) > 数据库 > 服务器. 第 2 种: 上面的反过来. 我就属于第 2 种. 每次做网站就是等 designer Fig
阅读全文
摘要:前言 定位是 CSS 里蛮重要的一课. 图片黑影 (overlay), back to top button, header, footer 紧贴在屏幕上下方等效果都是靠 position 完成的. 参考: Youtube – #CSS 認識 Position 粤语 阮一峰 – CSS 定位详解 S
阅读全文
摘要:前言 HTML tag 有 100 多个, 有些是功能形的, 非用不可, 有些是为了语义化对 screen reader 友好 (给眼睛有残缺的人也可以获取清晰的网站信息). 语义化是很重要的, 有些人写 HTML 满满都是 div, 出来的效果用眼睛看确实没有区别. 但是用 screen read
阅读全文
摘要:介绍 它们类似 calc(). 用来通过 formula 输出一个值. 用于 font-size, width, height 之类的, 这些地方. 非常适合用来做 RWD 哦 (特别是 font-size). 参考: CSS中 min() max() clamp()函数及使用场景详解 Kevin
阅读全文
摘要:前言 之前就有写过关于 Retina 和 Responsive Image 响应式图片 (responsive image) Retina 显示屏 但写的太烂了, 所以有了后来的 屏幕, 打印, 分辨率, 物理像素, 逻辑像素, Retina, DPI, PPI 是什么? 和这一篇. 参考: 阮一峰
阅读全文
摘要:前言 Media Query 是用来做 RWD 的, 类似 JS 的 if else. 写的多有伤管理, 所以要谨慎使用哦. 参考: Learn CSS Media Query In 7 Minutes https://css-tricks.com/logic-in-css-media-querie
阅读全文
摘要:前言 有一种布局方式叫 Layout Grid 网格布局. 在 Figma – Layout Grid 有介绍过. 在 RWD 概念篇 也有讲到过 要实现这种布局, 可以用 Flex 也可以用 Grid. Bootstrap 用的方法就是 Flex. Grid 出生在 Flex 之后, 所以先掌握
阅读全文
摘要:介绍 这篇 Tailwind CSS 的教程:Translating a Custom Design System to Tailwind CSS 充分的体现了什么是 Design System. 设计讲求原则, 一致性, 规律, 所以它需要对很多元素做规则, 这些就可以称为 Design Syst
阅读全文
摘要:前言 Web Design 很广很深. 我记得许多年前第一次想介入设计工作 (我是后端工程师), 我就上网搜索了一下. 就看见了乔布斯著名的一句话: Design is not just what it looks like and feels like. Design is how it work
阅读全文
摘要:前言 很多时候 CSS 未必是需要管理的, 比如做网站, Landing Page (类似宣传单). 很多时候做了 > 用了 > 丢 > 再做新的. 它没有 "维护" 的必要. 所以也就不需要搞什么 Sass 去做代码管理之类的. 反而需要的是快速开发. 而快速开发最快的方式就是只写 HTML 不写
阅读全文
摘要:前言 CSS 代码多了就不好管理了, 这是它语法先天的不足. Sass 就是加强它语法的, Sass 为 CSS 引入了一些 JS 语言的特性, 比如 variable, function, parameter, extend, import. Sass 的 variable 和 import (用
阅读全文
摘要:介绍 Only PC 以前是没有手机的, 只有电脑, 所以做开发, 只需要开发电脑版本就可以了. Mobile Version 后来手机诞生, 有钱的公司就做两个版本, 一个手机版, 一个电脑版. 没钱的公司就只做电脑版. Mobile Friendly 再后来手机越来越火, 没钱的公司也只能硬想办
阅读全文
摘要:前言 Icon 并不容易搞. 市场有许多平台支持 Icon, 有些收费有些免费. 有些 icon 很丰富, 有些很缺失. 尤其是在做网站的时候寻找 icon 是一个挺累的事情. 这篇就来聊聊 icon. 各大平台 1. Material Icons Google 出的, 免费, 缺点是少, 它有 F
阅读全文
摘要:JS 无法 query select 到伪元素 参考: 使用JS控制伪元素的几种方法 JS style remove property 是 kebab-case set property 是 camelCase navList.style.maxHeight = `${window.innerHei
阅读全文