02 2022 档案

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

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