Apple中的模糊效果

发布时间:2021-05-17

本文主要介绍在前端里比较重要的一个效果——高斯模糊效果,也有人称为毛玻璃特效。在Mac和Windows系统样式上也都在使用模糊效果。下面聚焦于Web前端中的模糊效果开发。

css

模糊效果有两个主要用途,一个是对当前块的内容进行模糊;另一个是对当前块背景进行模糊,但内容是清晰可见的。这对应着css的两个属性,前者是filter,后者则为backdrop-filter

两个属性的用法几乎一致,属性本意为滤镜,系统本身已经预设了一些常用的滤镜效果,对于特殊效果,可能会需要使用到svg来实现。

请看下面的代码

header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: saturate(180%) blur(20px);
}

header元素是我们经常使用到的导航栏元素,上述代码是将其背景高斯模糊,并且固定在顶部,关于固定顶部可以查看这里

其他阅读

Web前端中实现自定义右键菜单

在原生的桌面应用中,右键菜单是个很常见也很常用的东西,但是在Web应用中,由于浏览器自带了右键菜单,所以我们很少见到应用有自己的右键菜单,但不常见并不代表没有,本文就会介绍一个右键菜单的实现。

查看原文

扩展Serilog实现日志推送平台

最近在完成一个服务管理平台,提供可视化管理车间控制服务,包括服务的启停,日志的查看。在各服务中使用 Serilog 对日志进行记录,推送到服务管理平台,再进行统一分发,各客户端同步查看服务运行日志。

查看原文

Nginx重定向HTTP到HTTPS

HTTP协议以纯文本形式进行数据的交互,数据明文传输,容易被监听,窃取和伪造,HTTPS在HTTP的基础上,使用了TLS/SSL对通信过程进行加密,数据得到了有效的保护,就算被拦截到也无法获取信息,更没法实施中间人攻击。本文将会介绍如何在Nginx中配置HTTP重定向到HTTPS。

查看原文

使用C#接入DeepSeek API实现自己的AI助手

过年期间DeepSeek非常火爆,这段时间用着官方的客户端访问,总是会提示“服务器繁忙,请稍后再试。”,本文介绍怎么通过接入DeepSeek的API实现自己的客户端。

查看原文

软考中级系统集成项目管理工程师笔记:信息化发展

信息化发展主要包括了信息与信息化、现代化基础设施、产业现代化、数字中国、数字化转型与元宇宙共 5 个部分。

查看原文