比较 SVG 与字体图标 - 缺点与解决方案

如果要为网站增加矢量图标,其中两个选项是使用 SVG 和使用字体图标,两种方式各有千秋,以下是我个人做的比较。

SVG

在阅读这一部分前,可以先参考文章 HTML中嵌入SVG图片的N种方式,了解一下不同的 SVG 嵌入页面的方式。

缺点解决方案
如果将 SVG 放在静态资源目录,通过路径引用至页面,SVG 将造成额外的 HTTP 请求在 HTML 中内嵌 <svg> 标签
如果在 HTML 中内嵌 <svg> 标签,HTML 会显得杂乱且无法复用使用 SVG Inline Loader for Webpack 可以用 require 的方式向 HTML 插入 SVG
图标本身带的颜色(类似 fill="#ccc")无法覆盖移除 SVG 本身的颜色。使用 SVG Inline Loader for WebpackremovingTagAttrs 选项,可以在打包时批量去除图标本身的颜色,再通过 CSS fill 覆盖颜色
阅读更多

Icarus 夜间模式支持 3.0 了

原主题
Icarus 夜间模式(实验中)
如何给 Icarus 增加夜间模式

夜间模式单独提取的代码目前已经更新,支持 Icarus 3.0.0,有需要的朋友欢迎 checkout。

分支:https://github.com/imaegoo/hexo-theme-icarus/tree/night3
提交:https://github.com/imaegoo/hexo-theme-icarus/commit/fc3d016ae1c999347bd9ecbf3cc656e1382db06d

1
2
3
4
cd theme/icarus
git remote add imaegoo https://github.com/imaegoo/hexo-theme-icarus.git
git fetch imaegoo
git merge imaegoo/night3

如何给 Icarus 增加夜间模式

Preview

Live Preview

https://www.imaegoo.com/

Attention

This extension is NOT FULLY TESTED, so it may not fully cover the theme styles, if you find something wrong (such as bright things in night mode), please report it in this issue, do not open new issue.

Usage

  1. Merge night branch from imaegoo/hexo-theme-icarus into your icarus theme folder, or dowmload zip.
  2. If you configured an image logo, you should prepare a logo for night mode, then apply them in themes/icarus/_config.yml.
    1
    2
    3
    logo:
    light: /images/logo.png
    dark: /images/logo-dark.png

Modify

If you want to customize your theme, you can modify night mode part in themes/icarus/source/css/style.styl.

Thanks

Universe background from https://github.com/fan-lv/Fan

Icarus 夜间模式(实验中)

更新了 Icarus 主题代码,右上角增加了夜间模式切换按钮,是实验中的功能,欢迎体验。

通过向 body 添加名为 night 的 class 实现,状态记在浏览器 localstorage 中。

已知问题:

  1. 样式可能没有全面覆盖。
  2. 夜间模式在低性能浏览器上导致页面响应缓慢,需要优化性能。

目前还没有做成插件,仅在自己的博客使用,后期如果有时间的话,会考虑做成 extension。

粘性布局之粘底效果(position sticky, bottom 0)

粘性布局之粘底效果(position sticky, bottom 0)

经常在查资料时访问各种 CSDN 博客会发现,当 屏幕高度 < 左边栏的高度 < 内容的高度 时,滚动屏幕,左边栏会随着内容一同滚动,当滚动到左边栏底部时,左边栏会停止滚动,而内容会继续滚动。

这种设计的优势在于,用户既能够滚动左边栏,又不会在左边栏不够长时,造成页面左侧大片空白的尴尬,这种布局模式,叫做 粘性布局(sticky)

粘性布局在元素满足显示条件时,表现与普通布局没什么不同,但当元素随着页面滚动而无法显示时,会转为 fixed 布局效果,主流浏览器已经全部支持粘性布局(IE不支持)。

通俗一点讲,类似于 Excel 中的“冻结窗格”。

绝大多数网上的教程材料都用 position: sticky; top: 0; 这样的组合来举例,但为了实现 CSDN 左边栏效果,position: sticky; bottom: 0; 似乎不能和想象一样的起作用。

先说结论吧

  1. sticky 的确是无法直接粘底的……
  2. CSDN 使用 JS 动态计算实现,当计算到左边栏底部即将滚上屏幕时,立即对左边栏添加 position: fixed; bottom: 0; 样式,把左边栏定死,延时较为明显,快速上下滚动时能看到闪烁
  3. 我使用 position: sticky; 实现,通过 JS 计算 屏幕高度 - 左边栏高度 得到 top 的值,快速滚动时没有闪烁
阅读更多
CSS 类似 iOS 的毛玻璃动态模糊效果

CSS 类似 iOS 的毛玻璃动态模糊效果

提到网页毛玻璃效果,总结下来有以下2种:

  1. 模糊元素本身
  2. 模糊元素后面的内容

早在之前,1就已经可以通过 CSS3 filter 属性实现,而2一直没有一个好的解决方案。对1的运用,也可以达到2的效果,通过模糊图片的一部分,就可以实现类似 bilibili 导航栏的模糊背景效果 ↓

这样实现的前提是,我们的背景是一个静态的,单一的图片,那么如果我们需要模糊的背景比较复杂呢?仔细观察QQ右栏的标题栏,和下方的应用 Dock,都是 iOS 常见的毛玻璃叠加层效果 ↓

显然模糊元素本身并不能解决所有场景的问题。

阅读更多

CSS鼠标悬浮改变相邻元素样式

效果:

Hover me! X

源码:

1
2
3
4
<div class="chip">
<span class="name">Hover me!</span>
<span class="close-bth">X</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.chip {
display: flex;
width: fit-content;
font-size: 20px;
text-align: center;
background-color: #ccc;
}

.chip .name { width: 120px; }
.chip .close-bth { width: 30px; }

.chip .name:hover,
.chip .name:hover + .close-bth,
.chip .close-bth:hover {
color: white;
background-color: #888;
}

CodePen link:
https://codepen.io/iMaeGoo/pen/jRqYRJ

hmmmm…这种实现也没什么难的,其实是想试试在博文中插入HTML啦。