filter

使用CSS构建Glassmorphism UI效果

最近看了一些设计相关的教程,看到几个有关于设计效果相关的专业术语,比如微软的 Fluent设计系统 中的亚克力效果(Acrylic Material),Mac OS的磨砂玻璃效果(Frosted Glass)。另外,记得去年 @Michal Malewicz的《Neumorphism in user interfaces》一文掀起了围绕“Neumorphism”设计风格的讨论,当时一度认为该设计风格将会是2020年的设计趋势,事实上去年并没有以这种设计风格为主流,而且很多人认为“Neumorphism”的UI风格是一种可怕的设计风格。不过,最近在Codepen上看到另一种设计风格,这种风格同样是@Michal Malewicz 提出来,并称之为“ 玻璃变形(Glassmorphism) ” 的UI风格,这种风格已在一些产品中出现,比如三星的一些广告和MKBHD的介绍视频。在设计圈很多设计师提出“玻璃变形(Glassmorphism)”设计风格运用得当,可以起到引人注目的效果。

如何使用CSS实现黑暗模式和高亮模式的切换

Web技巧第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件prefers-color-scheme的值darklight来进行切换,这是从最底层也是最原生的解决方案,除此之外还可以通过CSS的混合模式属性来模拟。当然,除了期刊中提到的技术方案之外,还有其他的一些解决方案。今天我们就来一起学习一下,如何实现黑暗模式和高亮模式之间的切换。

高级CSS filters

在iOS系统上常常能看到高斯模糊(Gaussian Blur)效果,而这种效果早期使用CSS来实现是较为痛苦的一件事情。其实,早上2011年,浏览器就开始对CSS filters规范有所支持。也就是说在2011年浏览器就可以实现Filters效果。但这种效果基本上都只运用在SVG上(只有SVG支持Filter效果),而且只有Firefox浏览器支持,并且只能运用在HTML上。这也造就CSS要实现Filters效果是非常蛋疼的一件事情。

CSS3 Filter的十种特效

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀,一整才让我感到吃惊,太强大了。大家先来看个效果吧:

返回顶部