进过一番预研,找到了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
毛玻璃效果 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>
上周跟大家分享了新拟物的UI设计及相关的代码网站,这周让我们来聊一下玻璃拟物化——毛玻璃效果。相信大家最近在dribbble或者behance上浏览都看到国外设计师都在有意识地使用玻璃质感的设计,应用在图标、网页、UI界面、APP的名片、作品集封面上等等。一、什么是毛玻璃那么毛玻璃质感(Glassmorphism)的效果具体使用的场景是怎么样的呢?主要有以下三个方面:图标、Web网页、UI界面等视
刚刚做技术调研,可以给一些优缺点的对比.目前主流实现毛玻璃效果(高斯模糊)分大致三种方法:一 利用RenderScript接口利用现有Android结构,通过RenderScript调用底层接口实现高斯模糊计算.// Remix Blurprivate void blur(Bitmap bkg, View view) { … RenderScript rs = RenderScript.creat
// 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评论
//加入一个图片 UIImageView *imageview = [[UIImageView alloc]init]; imageview.frame = CGRectMake(10, 100, 300, 300); imageview.contentMode = UIViewContentMod
ico
转载 2017-08-05 16:28:00
170阅读
2评论
## 实现iOS毛玻璃效果 ### 1. 整体流程 下面是实现iOS毛玻璃效果的整体流程,可以用表格展示步骤: | 步骤 | 描述 | | ---- | ----- | | 1 | 创建一个视图,用于显示需要应用毛玻璃效果的内容 | | 2 | 创建一个模糊效果视图 | | 3 | 将需要应用毛玻璃效果的内容添加到模糊效果视图中 | | 4 | 将模糊效果视图添加到原始视图中 | ###
原创 2023-07-31 16:53:52
322阅读
在iOS设备上我们随处可见毛玻璃效果,而且最近越来越多的场合应用到了这种美观的虚化效果,包括本人的一个开源项目BlureImageView也是受此启发。所以,恰到好处的虚化效果能很好的改善用户体验,而且也能让你的app显得更加优雅。 不过,我们目前在android上很少见到毛玻璃效果,我认为很重要的原因是性能问题,虚化一张图片所需要的时间会因设备而异,如果为了虚化使得用户需要刻意等待,那么就是弊
转载 2023-07-28 11:49:07
240阅读
最近,有读者问我,朋友圈很火的“毛玻璃效果,能不能用 PPT 做出来?我们来看一下他发过来的图片: 其实,要想用PPT做出这种毛玻璃效果,只需借助图片虚化功能即可!虚化是图片格式中一种艺术效果,我们选中图片,依次点击 格式>艺术效果>虚化,就能找到它了。 以这个圆形为例: 首先,在圆形外侧,添加一个更大的矩形,并且设置形状无轮
在我年轻时做过的开发中,毛玻璃应用得最广是在复杂的背景图上。如果你希望在一个复杂的背景上添加文字,文字能清晰展示,并尽可能的保留原背景的话,使用毛玻璃效果去处理是非常合适的。本文主要讲解背景毛玻璃效果,也会讲讲文字如何做出模糊效果。如果你懒得写代码,也可以使用 《这18个网站能让你的页面背景炫酷起来》 里面提到的 Glass Morphism 网站直接生成毛玻璃效果。背景图毛玻璃在 PhotoS
其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur比如我们需要将上图中页面中间的文字区域变成毛玻璃效果,首先想到的是给其设置一个透明度,并添加模糊滤镜:.content { background-color: rgba(0,0,0,0.3); -webkit-filter: blur(2px); -moz-filter: blur(2
方式1,使用Css控制,但是有不兼容的时候 说明:在Google和FF中可以使用,在IE中需要考虑兼容问题 方式2,使用Canvas实现,推荐 参考: Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js
转载 2016-11-15 17:09:00
361阅读
2评论
 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
935阅读
实现毛玻璃效果 使用CSS实现毛玻璃效果,使用CSS滤镜filter中的blur属性实现。 实现 首先定义一个填充满整个屏幕的背景。 <style type="text/css"> body{ width: 100vw; height: 100vh; margin: 0; background-im
原创 2022-05-27 23:59:22
257阅读
# 实现jquery毛玻璃效果的步骤 在开始教会你如何实现"jquery毛玻璃效果"之前,先来了解一下整个实现过程的步骤和所需代码。下面是整体流程的表格展示: | 步骤 | 描述 | | --- | --- | | 1 | 引入jQuery库 | | 2 | 创建HTML结构 | | 3 | 添加CSS样式 | | 4 | 编写JavaScript代码 | 现在我们来逐步进行每一步的操作,并
原创 2023-08-01 07:26:13
90阅读
今年年初新拟物化(Neumorphism)风格最初在社交媒体上风靡,很大程度上,来源于资深设计师 Michal Malewicz 的文章《Neumorphism in user interfaces》,这篇文章透过 Medium 平台,开始在各个设计师社区当中发酵,随后被不少平台预测为 2020 年会逐渐流行的一种视觉设计风格。 事实上,也确实有很多产品和 UI 界面跟进
背景我又双叒叕来摸鱼啦!!今天又双叒叕是做需求,发现产品给了一个缩略图排列起来的列表(虽然列表里只给了一个排列项,其他需要脑补)然鹅我发现!想象总是美好的,然而现实是非常骨感的!什么是毛玻璃效果毛玻璃效果(Glassmorphism)是目前非常流行的设计新趋势,你可以在 Dribbble 等网站上看到毛玻璃效果,甚至像 Apple 和 Microsoft 这样的大公司也在使用它。基本上,它的主要
  • 1
  • 2
  • 3
  • 4
  • 5