backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
如果你希望在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。
你可以观看现场演示以了解它是如何工作的。如果你想使用 HTML 和 CSS 代码创建玻璃态登录表单，请按照以下教程进行操作。
磨砂玻璃效果已经在互联网上流行了很多年，Mac OS以其磨砂玻璃效果而闻名，Windows 10也通过其他一些灯光，深度，运动，材质，比例尺实现了磨砂玻璃的效果 。
原理和photoshop修图的步骤类似, 用css中的blur滤镜实现高斯模糊, 对文字部分添加伪元素,对伪元素填充部分背景图片, 并添加模糊效果
导航条对于每一个Web前端攻城狮来说并不陌生，但是毛玻璃可能会相对陌生一些。简单的说，毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。
一开始是打算切图实现的，但是仔细一想，这个效果使用 CSS 其实也可以非常轻松制作出来。本文就讨论讨论：
我又双叒叕来摸鱼啦！！今天又双叒叕是做需求，发现产品给了一个缩略图排列起来的列表（虽然列表里只给了一个排列项，其他需要脑补）然鹅我发现！想象总是美好的，然而现实是非常骨感的！
最近在开发个人博客的时候，在网上学到了一种CSS特效---毛玻璃 感觉还是比较实用下面将这种特效分享给大家。 如下图，我的后台登录界面表单部分就是毛玻璃效果 有时候这种特效很有用，可以达到一种朦胧的效果，接下来我们来看看如何实现它
这篇文章介绍了15个重要的CSS属性，旨在提高读者的CSS知识和技能。文章以清晰的方式解释了每个属性的作用和用法，并提供了相应的示例代码。通过这篇文章，读者可以了解到一些有趣且实用的CSS属性。
这18个网站是我在取经路上意外发现的，里面包括 纯CSS 实现的炫酷背景，还有专门制作背景图的网站。 算是取经路上的大补之物~
UI 小姐姐非要让我在 Android 系统自定义的 Webview 上支持实现我们俗称的“毛玻璃”效果，说是一定要实现，不实现这种效果就失去了设计的灵魂，奈何我百般解释，她就要，就要，要！
毛玻璃拟态模仿了塑料材质（凹凸质感，凸显层次感），这个新的视觉风格更加注重垂直空间Z轴的使用：
「 傍晚时分，你坐在屋檐下，看着天慢慢地黑下去，心里寂寞而凄凉，感到自己的生命被剥夺了。当时我是个年轻人，但我害怕这样生活下去，衰老下去。在我看来，这是比死亡更可怕的事。--------王小波」
我的旧主题是基于初学前端时写的 Fuji 主题构建的大改版，而在历经多次小修小补之后终于进入了维护不动的的状态。无论是 Hugo 模板本身，还是相配的 JS 和 CSS 都进入了完全的混乱状态。趁着近期有一点时间，是时候来一次重构了。
本公众号定期更新关于 设计师、程序员发挥创意 互相融合的指南、作品。 主要技术栈： nodejs、react native、electron 本号正在更新的系列有： 写给设计师的人工智能指南 移动App设计之xxxx 数据爬取及可视化系列 技能之xxxx 读书笔记 还有其他杂文。 欢迎关注，转发～ 本文为系列文章： 设计师会编程、程序员懂艺术 的第2篇。 往期直达： 01设计师会编程、程序员懂艺术：设计规范 以下为正文 ---- Semi Flat Design 半扁平化设计 设计师、程序员需要了解的最
新拟物化，是在扁平的基础上呈现真实物体质感的设计风格， 核心思想是模拟光的斜向照射效果 ，用阴影显出“高光”和“阴影”。 新拟物界面设计（Neomorphic UI Design）是2020年在互联网上非常火热的一种前端界面设计方式， 这种设计风格在传统的扁平的基础上增加了拟物的投影效果，从而提升了界面的立体感，又比拟物的效果更加轻盈、简洁，因此整体视觉体验是简约但又有惊喜。
其实毛玻璃的模糊效果技术上比较简单，只是用到了css滤镜（filter）中的blur属性。但是要做一个好的毛玻璃效果，需要注意很多细节。
然后定义一个指定长宽的div去实现模糊效果，因为直接在元素上使用blur会将元素以及子元素全部模糊，显然不符合要求，于是使用一个伪元素去实现模糊效果。首先在元素CSS属性设置position: absolute;是为了伪元素去适应长宽使用，使用relative也是可行的，但是会影响下文会提到的拖拽的定位，在伪元素中设置position: absolute;top: 0;left: 0;right: 0; bottom: 0;来继承元素的尺寸，在伪元素中设置背景，在背景上实现模糊效果就可以避免子元素一并模糊的问题。
英文 | https://ishratumar.medium.com/14-awesome-css-properties-you-need-to-know-9cee5b364990
最近在做一个比赛项目，在前端设计（使用Vue.js）的时候用到了ElementUI组件。前端整体的背景是深色调，调用ElementUI各项组件时其样式并不能很好的契合主题，因此需要通过CSS修改其色调及样式，但是直接通过class定位组件，并添加!important关键字后依然不能改动。
CSS当中的z-index属性看起来足够简单，但是如果你真的想了解它是如何工作的话，在这简单的表面之下，又有许多值得探究的内容。 在这篇教程中，通过探究层叠上下文和一系列实际的例子，我们将会阐明z-index的内在机理。
偶然在某思看到这样一个问题，如何使一个div的部分区域变透明而其他部分模糊掉？，最后实现效果是这样的：
:in-range 和 :out-of-range 是 CSS 中的伪类，它们可以用来样式化表单控件中的输入值。
作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。
在本文中我讲述了7种CSS的特效，它们也许看起来并不惊艳，但是我认为却足够传达本文的理念：编写一些特殊的CSS样式的时候需要不拘于常理，要用特殊的认识角度看待标签和样式属性，从而用「绕个弯」的方式达到效果。
CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜，滤镜通常用于调整图像，背景和边框的渲染。它的值可以为 filter 函数 <filter-function> 或使用 url 添加的svg滤镜。
z-index 这个属性表面看上去很简单，但如果你想搞清楚其工作原理的话，其实是有不少值得探讨之处的。本文将从层叠上下文（stacking contexts）和一些实际案例出发，谈一谈 z-index 的内部工作原理。
本文将介绍一种巧用 background 配合 backdrop- filter 来构建有趣的透视背景效果的方式。
BFC 全称叫做块级格式化上下文，它是一个完全独立的布局空间，我们可以在这个空间当中对子元素进行布局，并且不会影响到空间外部的布局
shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域：
改了好几天，翻遍了 Hugo Jekyll Hexo 的模板仓库，又翻完了 Typecho 的主题站。 感觉没啥好看的又开始翻友链，翻了得有个两三天，最后缝合了一个单栏模板。
通过上面两张图可以看出来，我们既可以用网络图片来实现高斯模糊，又可以用本地图片来实现。
首先，职业下意识就打开了控制台。为什么呢？是想看看怎么实现的，是css自定义属性吗？是引入一份css吗？是预处理器修改全局变量吗？结果，打开控制台，浏览了一下，最后定位发现在于一行css代码，关掉就变成彩色了
今天打开b站，看见一片灰色。对于公祭日，我们每一个人都应该为此默哀、纪念历史，都要铭记历史、热爱祖国、砥砺前行
本效果主要使用text-shadow实现. 参考：http://hovertree.com/h/bjaf/css3_text_effect.htm
https://juejin.cn/post/6844904031513477128
至于为什么会联想到filter属性，主要是因为小时候经常玩手机的拍照功能，黑白滤镜、复古。。。
静电说：继新拟物在2020年成功吸引设计师的目光之后，另一种“拟态”--玻璃拟态（Glassmorphism），再次拉回设计师的眼球。静电仔细一看，这不就是前几年的毛玻璃效果加上更多的“磨砂”感吗？好吧，可能我理解的还有偏差，那么什么是玻璃拟态呢？来读一读这篇Boxi翻译的文章，一探究竟。
最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的资料，解决了这个问题，这里记录一下~
玻璃拟态是目前市面上的新风格，越来越受欢迎。新拟态模仿了受到挤压的塑料材质（凹凸质感，凸显层次感），这个新的视觉风格更加注重垂直空间 z 轴的使用。它最典型的特征是：
可以看到毛玻璃效果其实就是当前元素后面背景内容的模糊，这个效果在操作系统中大家并不陌生吧
承接上一篇你所不知道的 CSS 动画技巧与细节，本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！ 系列 CSS 文章汇总在我的 Github ，持续更新，欢迎点个 star 订阅收藏。 OK，下面直接进入正文。本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的滤镜，语法如下，还未接触过这个属性的可以先简单到 MDN -- filter 了解下： { filter: blur(5px); filter: brightness(0.4); filt
当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行 CSS，就能实现全站置灰的方式。
承接上一篇你所不知道的 CSS 动画技巧与细节[1]，本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
