毛玻璃其实就是磨砂玻璃，能够模糊的看清背后的风景，让人感觉有种朦胧美，让界面看上去有些层次感。比如：高大上啊，接下来肯定是眼馋手痒的过程。。。当然，用ps搞一个全景毛玻璃背景毫无疑问是最省事的，那接下来就没啥事可干了。当然no no no了。毛玻璃无疑就是种模糊了，少不了filter blur。最终效果（chrome）：天气预报嗯，也算是将就了。。。<!DOCTYPE html>
&l
转载
2023-07-19 21:19:18
645阅读
毛玻璃效果的实现App设计时往往会用到一些模糊效果或者毛玻璃效果，iOS目前已提供了一些模糊API可以让我们方便使用。苹果在iOS7.0之后，很多系统界面都使用了毛玻璃效果，增加了界面的美观性，比如下图的通知中心界面：一、UIToolbar在iOS7.0之前还是有系统的类可以实现毛玻璃效果的， 就是 UIToolbar这个类，并且使用简单，实现起来也很简洁。创建一个UIToolbar实例，设置它的
转载
2023-08-30 10:32:48
259阅读
// 1.创建UIImageView对象 UIImageView *imageView = [[UIImageView alloc] init]; // 2. 设置尺寸 // imageView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height); ...
转载
2016-11-07 18:44:00
256阅读
2评论
# Android图片毛玻璃效果
## 引言
毛玻璃效果是一种在移动应用中常见的视觉效果，通过模糊背景图像来增强用户界面的美感和可读性。在Android开发中，我们可以使用一些图像处理技术来实现这种效果。本文将介绍如何使用Android的图像处理库实现图片毛玻璃效果，并附带代码示例。
## 图像处理库
在实现图片毛玻璃效果之前，我们需要选择一个合适的图像处理库。Android开发中比较流
原创
2023-07-27 17:25:45
726阅读
进过一番预研，找到了3中实现方案，其中各有优缺点：1、如果系统的api在16以上，可以使用系统提供的方法直接处理图片 if (VERSION.SDK_INT > 16) {
Bitmap bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);
final RenderScrip
转载
2023-06-06 10:52:01
105阅读
最近在整理导航栏的渐隐渐现效果，整理过程中偶然学会了图片的毛玻璃效果实现，很简单，不多说了，先上图看看效果对比，这是原图，这是加了效果后的，创建图片的代码就不上了，下面看下添加效果的代码：// 毛玻璃/*系统自带的三种风格UIBlurEffectStyleExtraLight,//额外亮度，（高亮风格）
UIBlurEffectStyleLight,//亮风格
UIBl
转载
2023-06-06 11:24:01
167阅读
毛玻璃效果 UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"angry_00.jpg"]]; imageView.frame = CGRectMake(0, 0, self.view.frame.size.width, 200); [self.view addSu
原创
2023-03-02 00:00:39
136阅读
链接：http://www.cnblogs.com/ghost-xyx/p/5677168.html先上 demo 和 源码其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur 属性。但是要做一个好的毛玻璃效果，需要注意很多细节。比如我们需要将上图中页面中间的文字区域变成毛玻璃效果，首先想到的是给其设置一个透明
转载
2017-02-18 15:53:56
1058阅读
毛玻璃其实就是磨砂玻璃，能够模糊的看清背后的风景，让人感觉有种朦胧美，让界面看上去有些层次感。比如：高大上啊，接下来肯定是眼馋手痒的过程。。。当然，用ps搞一个全景毛玻璃背景毫无疑问是最省事的，那接下来就没啥事可干了。当然no no no了。毛玻璃无疑就是种模糊了，少不了filter blur。最终效果（chrome）：天气预报嗯，也算是将就了。。。 <!DOCTYPE html>
刚刚做技术调研,可以给一些优缺点的对比.目前主流实现毛玻璃效果(高斯模糊)分大致三种方法:一 利用RenderScript接口利用现有Android结构,通过RenderScript调用底层接口实现高斯模糊计算.// Remix Blurprivate void blur(Bitmap bkg, View view) {
…
RenderScript rs = RenderScript.creat
转载
2023-08-29 12:38:59
381阅读
上周跟大家分享了新拟物的UI设计及相关的代码网站，这周让我们来聊一下玻璃拟物化——毛玻璃效果。相信大家最近在dribbble或者behance上浏览都看到国外设计师都在有意识地使用玻璃质感的设计，应用在图标、网页、UI界面、APP的名片、作品集封面上等等。一、什么是毛玻璃那么毛玻璃质感(Glassmorphism)的效果具体使用的场景是怎么样的呢？主要有以下三个方面：图标、Web网页、UI界面等视
转载
2023-09-06 19:02:25
319阅读
在iOS设备上我们随处可见毛玻璃效果，而且最近越来越多的场合应用到了这种美观的虚化效果，包括本人的一个开源项目BlureImageView也是受此启发。所以，恰到好处的虚化效果能很好的改善用户体验，而且也能让你的app显得更加优雅。 不过，我们目前在android上很少见到毛玻璃效果，我认为很重要的原因是性能问题，虚化一张图片所需要的时间会因设备而异，如果为了虚化使得用户需要刻意等待，那么就是弊
转载
2023-07-28 11:49:07
244阅读
//加入一个图片 UIImageView *imageview = [[UIImageView alloc]init]; imageview.frame = CGRectMake(10, 100, 300, 300); imageview.contentMode = UIViewContentMod
转载
2017-08-05 16:28:00
174阅读
2评论
最近需要用到这个shader，就稍微研究了一下，这里做一下笔记，免得回来自己忘了～思路：看了不少文章，其实都大同小异，分为3步完成。 1，先建一个平面出来（也可以是个精灵），来显示效果。当然你要是准备做屏幕特效那就当我没说，这里不讨论了，只是用法不同。 2，建立我们的shader，我们先用 unity 自带的 GrabPass 采样到当前平面下的像素数据（你就可以想象成屏幕截图） 3，将抓取
## 实现iOS毛玻璃效果
### 1. 整体流程
下面是实现iOS毛玻璃效果的整体流程，可以用表格展示步骤：
| 步骤 | 描述 |
| ---- | ----- |
| 1 | 创建一个视图，用于显示需要应用毛玻璃效果的内容 |
| 2 | 创建一个模糊效果视图 |
| 3 | 将需要应用毛玻璃效果的内容添加到模糊效果视图中 |
| 4 | 将模糊效果视图添加到原始视图中 |
###
原创
2023-07-31 16:53:52
333阅读
实现毛玻璃效果 使用CSS实现毛玻璃效果，使用CSS滤镜filter中的blur属性实现。 实现 首先定义一个填充满整个屏幕的背景。 <style type="text/css"> body{ width: 100vw; height: 100vh; margin: 0; background-im
原创
2022-05-27 23:59:22
257阅读
Shader "Hsj/GroundGlass" { Properties{ _blurSizeXY("BlurSizeXY", Range(0,10)) = 2 } SubShader{ // Draw ourselves after all opaque geometry Tags{ "Queue" = "Transparent"
原创
2022-09-29 14:07:40
943阅读
# 实现jquery毛玻璃效果的步骤
在开始教会你如何实现"jquery毛玻璃效果"之前，先来了解一下整个实现过程的步骤和所需代码。下面是整体流程的表格展示：
| 步骤 | 描述 |
| --- | --- |
| 1 | 引入jQuery库 |
| 2 | 创建HTML结构 |
| 3 | 添加CSS样式 |
| 4 | 编写JavaScript代码 |
现在我们来逐步进行每一步的操作，并
原创
2023-08-01 07:26:13
90阅读
在我年轻时做过的开发中，毛玻璃应用得最广是在复杂的背景图上。如果你希望在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。本文主要讲解背景毛玻璃效果，也会讲讲文字如何做出模糊效果。如果你懒得写代码，也可以使用 《这18个网站能让你的页面背景炫酷起来》 里面提到的 Glass Morphism 网站直接生成毛玻璃效果。背景图毛玻璃在 PhotoS
其实毛玻璃的模糊效果技术上比较简单，只是用到了 css 滤镜（filter）中的 blur比如我们需要将上图中页面中间的文字区域变成毛玻璃效果，首先想到的是给其设置一个透明度，并添加模糊滤镜：.content {
background-color: rgba(0,0,0,0.3);
-webkit-filter: blur(2px);
-moz-filter: blur(2
