展示一下最近开发网站的进度……

我想做成某些2000年中期的Y2k动感网站风格（动感是一个形容词，并不意味着真的会动），这种风格是我在幼年接触Flash游戏以及Trance专辑的封面中得到的灵感。

所以严格来说，这是Frutiger Aero Techno / Energy，跟一般意义上的Frutiger Aero Eco有所区别。事实上，我曾还制作了融合了Metro以及Holo Design的样式……我很喜欢Holo Design的设计美学。

WordPress的区块编辑器很厉害。

来源

灵感源自StyleStar的景の域网站海报设计

来源

制作了XP风格的系统属性页面。

啊，就是字面意义上的Windows XP，
也就是「我的电脑」的系统属性页面。

没有做成Vista和Win7布局的原因是，
主题并没有提供真正意义上全宽的页面模板……
所以退而其次，我制作了XP风格的属性页面。

不过要注意的是它并不是动态更新的。
WordPress V1sta是什么版本啊？
难道是WordPress 7.0吗？

整蛊一下，会心一笑~

来源

觉得还是应该添加毛玻璃比较好？

.search-box {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 1%, rgb(200 200 200) 2%, rgb(18 18 18 / 60%) 5%, rgb(24 24 24) 70%, rgba(25, 25, 25, 1) 70%, rgb(0 0 0) 100%);
    -webkit-backdrop-filter: blur(5px);   
    backdrop-filter: blur(5px);
}

来源

自上次想要修改Aero风格的CSS按钮样式，一发不可收拾，索性直接把其余部分也都实现了Aero Web 2.0 Gloss化（即为通常描述为Frutiger Aero的美学其中一种表达效果）：

原本在页面上方、又被称为主导航栏的部分中，WordPress 2014主题原本格格不入的扁平菜单也拉皮成Vista/Mobile 6.x风格的镜面玻璃样式。

这次主要修改的地方有：

• 主导航栏：Hover 聚光灯菜单、WMC风格子菜单，子菜单选项悬浮有动效
• 黑侧边栏：次要导航 Web Gloss风格渐变、悬停发光效果
• 黑侧边栏：日历小工具水晶按钮、悬停发光效果
• 特色内容回归，链接按钮发光
• 搜索键增加了悬浮与点击效果，圆角改回直角
• a链接全部实现悬停发光效果，绝对不是偷懒

事实上这已经是好几天前的素材了，毕竟VPS炸了……
幸运的是代码在DevTools的本地替换调试部分有所保留，只需要清理一下重复部分。最终效果略有区别但是我很满意。

搭配近期使用的 View Transitions 插件 也有相当不错的动效。

花絮部分：

来源

将以下代码添加到WordPress的自定义CSS，即可替换所有按钮的样式：

目前有一个不足之处是不能完好兼容线式按钮，但Aero主题本来就没这样式。个人也不常用。

.wp-block-button .wp-block-button__link {
	color:#2b2b2b;
    line-height: 12px;
    border-radius: 3px;
    background: #ECEFEF;
    background: linear-gradient(180deg, rgba(236, 239, 239, 1) 0%, rgba(235, 236, 236, 1) 45%, rgba(219, 221, 222, 1) 45%, rgba(204, 210, 212, 1) 100%);
    border: 1px solid #f3f3f3;
    box-shadow: 0 0 1px 0.8px #707070c7;
	transition: border-color calc(1s * 1);
}

.wp-block-button .wp-block-button__link:active {

	
    outline: 1px dotted currentColor;
	outline-offset: -3px;
	
    background: linear-gradient(180deg, #EAF6FD 0%, #D9F0FC 45%, #94cfed 45%, #6cb5dc 100%);
    border: 1px solid #ECF7FD;
    color: #2b2b2b;
    /* padding: 2px 7px 3px 9px; */
    border: 1px solid #73A7C4;
    border-bottom-style: outset;
    box-shadow: 0 0 1px 0.8px #2C628B;
	transition: border-color calc(1s * 1);
}
.wp-block-button .wp-block-button__link:hover {
    
    color: #2b2b2b;
    box-shadow: 0 0 1px 0.8px #3C7FB1;
    border: 1px solid #ECF7FD;
	transition: box-shadow calc(1s * 1);
}

.wp-block-button .wp-block-button__link:focus-visible {
	
    outline: 1px dotted currentColor;
	outline-offset: -3px;
	
    background: linear-gradient(180deg, #EAF6FD 0%, #D9F0FC 50%, #94cfed 51%, #6cb5dc 100%);
    border: 1px solid #ECF7FD;
    color: #2b2b2b;
	
    border: 1px solid #73A7C4;
    border-bottom-style:;
    box-shadow: 0 0 1px 0.8px #2C628B;
}
.wp-block-button .wp-block-button__link:focus {
	outline: 1px dotted currentColor;
	outline-offset: -3px;
	color: #003f3f;
	border-color: #72f2ff;
	transition: border-color calc(1s * 1);
}

参考:
https://stackoverflow.com/questions/4375255/windows-os-button-style-css
https://win7simu.visnalize.com

代码写得不够规范，还请见谅。

在这其中我也发现了一个新的论坛网站……其效果确实令我感到惊艳，只有这两个字可以形容！（一般我很少用加粗强调某事）

来源

今天新上线了一个博客门户网站：网沏 Net7.Blog
不过目前其实暂无刊登的打算，所以只是一个空壳作用的停放站。点击这个88×31按钮即可访问。

在折腾WordPress主题的时候发现年度公版主题都更新成古腾堡区块样式了，后面在WordPress.com以及WordPress.org站才发现WP的母公司Automattic居然发了这么多WP主题；
而尤其在2024年区块主题完善期间，Automattic还逐步推出了各类区块主题，高产似Tumblr，这其中有一个特别有意思的是Minecraft风格的Bedrock（基岩）主题，看起来像是游戏服务器站对应博客会用的样子。

区块主题我一开始是拒绝的，感觉很不直观，而且以前的PHP模板也不能直接使用，也是不太符合WordPress本来作为博客软件的用途；

但是实际上手后发现其实也没有那么难用，
我换句话说就是，采用了区块技术的主题其实就是内置了一个轻量化的Elementor页面构建器，而且比市面上的构建器不仅免费还更简洁，
如果擅长页面排版并且有相应工作经验的话会很容易上手。

这非常适合用来做作品集！可以把它当成一个排版软件来使用。

我曾经很多在纸上画的设计稿奈于代码无法实现，但是现今用WordPress的区块主题基本上可以80%复刻，还可以自己传字体。
虽说代码干净程度和性能效率肯定是比不上Vue、Next等等那样的新技术，不过WordPress现在的性能也不算特别糟糕，
对于小网站来说，也算是节约了非技术工作者的时间。

网沏目前使用的主题是 Sunderland，一个很简约甚至可以说很素的主题。
默认的模板配置好像是会场预告或者播客之类的用途，主页甚至也没有标准的菜单、页脚以及搜索栏，也算是停放页面的一种。虽说基于区块技术构建，其实完全可以自己改布局就是了。

用这个主题的话，甚至可以把WP的站内搜索功能关掉，以免数据库影响性能。

有时间把景之域的2014主题也维护一下吧……最近也在打算制作子主题。

来源

虽然自己设计可以试着导出176×62尺寸的图样，但无论是制作还是调用都略显麻烦。后在网上寻找到这条Mastodon的Toots，可悉知CSS已经支持整数倍放大像素图片的缩放处理了。

Post by @dragonarchitect@rubber.social

View on Mastodon

对于WordPress来说，可以通过添加自定义的style.css代码的class类，并在WP的图片插入功能中调用class类，以此实现这一效果：

.pixbtn {
image-rendering: pixelated;
}

详情参见：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/image-rendering

来源