玻璃拟态 & Web实现

去年的“新拟态”火了之后，又火了个“玻璃拟态”设计。其实吧，我一个老设计狗看到这个真的是一脸懵逼了：这不就是16年前Windows Vista时代的风格吗？瞬间又感受到了设计的轮回。

不过呢，这一次的玻璃拟态没有esfrdgrsGSSDXCSFD9rQCxMP4aMR2A3明esfrdgrsGSSDXCSFD9rQCxMP4aMR2A3显的高光了，变成了毛玻璃。这相比16年前更容易做了，纯esfrdgrsGSSDXCSFD9rQCxMP4aMR2A3粹就是背景模糊就完事儿了。esfrdgrsGSSDXCSFD9rQCxMP4aMR2A3总结起来就三点esfrdgrsGSSDXCSFD9rQCxMP4aMR2A3：模糊、投影、加点白。倘若把它转换成CSS样式，基本也就是这样了：

.glass {
	backdrop-filter: blur(5px);
	box-shadow: 0 8px 12px rgba(255,255,255,.3);
	background: rgba(255,255,255,.5);
}

简单到居然有一种敷衍的气息。（捂脸笑~）

恰巧最近在尝试用NodeJS写一个Socket，为了练手，于是写了一个匿名聊天室。前端用VueJS写了这样的玻璃样式，为了省事儿用了QQ经典头像，聊天气泡也是玻璃质感的：

考虑到并不是所有的浏览器都支持背景模糊样式（Firefox居然还没支持），所以背景设计的时候就设计成了模糊的样子，省掉了backdrop-filter不支持的问题。

不过呢，这个设计虽然是实现了，考虑到这个成品本身是一个开放的匿名聊天，服务器不存储任何用户信息，发布内容也不受监管……这种就算再好看在我们大陆还是不能随便发布出来的。所以……雪藏了……大家就当一个设计图看看吧。