CSS 如何实现羽化效果?
最近碰到这样一个问题,在一张封面上直接显示书名,可能会存在书名看不太清楚的情况(容易受到背景干扰),如下
为了解决这个问题,设计师提了一个“究极”方案,将书名背后的图片模糊一下,这个在 CSS 中很好实现,仅需backdrop-filter
即可
.name{backdrop-filter: blur(10px); }
当然,现在模糊是模糊了,但是边缘过于“断层”,导致书名和封面有些“格格不入”,效果如下
如果能够将边缘羽化一下,虚化边缘效果,就可以很好地将书名融入到背景当中
羽化是photoshop术语,羽化原理是令选区内外衔接部分虚化,起到渐变的作用从而达到自然衔接的效果,是ps及其其它版本中的处理图片的重要工具
这是设计最终羽化后的效果,既能保证文字清晰可见,又能避免太过突兀,如下
设计师实现这个很简单,用橡皮擦擦一下就可以了,那么 CSS 呢?下面来探讨一下 CSS 如何实现羽化的效果。
一、羽化的原理
羽化其实就是将边缘变得模糊,在 CSS 中其实就是创建一个边缘模糊的遮罩(mask),也就是需要一种半透明的渐变。
关于遮罩,这里简单介绍一下,基本语法很简单,和background的语法基本一致
.content{-webkit-mask: '遮罩图片' ; } /*完整语法*/ .content{-webkit-mask: '遮罩图片' [position] / [size] ; }
这里的遮罩图片和背景的使用方式基本一致,可以是PNG图片、SVG图片、也可以是渐变绘制的图片,同时也支持多图片叠加。
遮罩的原理很简单,最终效果只显示不透明的部分,透明部分将不可见,半透明类推
先举个圆形的例子,这个比较简单,因为可以直接通过径向渐变创建
比如,下面有一个头像,现在直接放在背景上非常突兀
我们可以将这个头像通过径向渐变绘制出了一个从不透明到透明的遮罩,达到和背景融合的效果
.head{-webkit-mask: radial-gradient(closest-side circle,#000 60%, transparent 100%); }
原理是这样的
最后效果如下
当然这是圆形的,如果是矩形的呢?
二、矩形的羽化原理
根据上面的分析,如果希望羽化矩形边缘,需要创建这一个遮罩
那么问题来了,如何创建这一个边缘模糊的矩形呢?貌似没办法直接通过渐变来实现,而且还需要是尺寸自适应的(自动跟随容器尺寸)
如果单纯看这样一个矩形,还是很容易实现的,通过box-shadow
即可实现
.shadow{width: 200px;height: 200px;background:black;border-radius:10px;box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black }
根据需求,可以多叠加几层box-shadow
,这里叠加了3层,效果如下
但是问题又来了,这样一个 dom 无法直接用作mask-image
,那如何处理呢?
三、通过 SVG foreignObject 转换成图片
上面提到,通过 CSS 阴影可以很轻松的实现我们说需要的效果,但可惜现在还是 dom
阶段,所以需要将这个 dom 转换成图像。
在这里,需要借助 SVG
中的foreignObject元素,通过这个元素,可以将 HTML
嵌入到SVG
中,轻松实现 dom
转图片的效果
有兴趣的可以参考之前这几篇文章
- CSS、SVG、Canvas对特殊字体的绘制与导出
- CSS & SVG foreignObject 实现文字镂空波浪动画
原理如下
回到这里,我们仅需要将上面的结果放到foreignObject
元素中,由于需要自适应尺寸,这里的body
宽高都是100%
,如下
<svg xmlns="http://www.w3.org/2000/svg"><foreignObject width="100%" height="100%"><body class="wrap" xmlns="http://www.w3.org/1999/xhtml"><style>.wrap{box-sizing: border-box;margin: 0;height: 100%;padding: 10px;}.shadow{height: 100%;background:black;border-radius:10px;box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black}</style><div class="shadow"></div></body></foreignObject> </svg>
这样就得到了一个宽高自适应的SVG
图像,无论宽高怎么变化,都是撑满的
别看这么多标签,这其实已经是一张图片,可以直接使用,接下来看看如何运用
四、矩形的羽化
其实上面得到的 SVG
可以直接当成一个图片资源,正常使用了,就像这样
.name{-webkit-mask: url('./fearher.svg') }
不过,也可以将这个SVG
图片转换成内联形式,减少资源依赖,转换后仍然保持自适应特性
这里推荐张鑫旭老师的SVG在线压缩合并工具
转换后就是这个样子
.name{-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cbody class='wrap' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:10px%7D.shadow%7Bheight:100%25;background:%23000;border-radius:10px;box-shadow:0 0 5px %23000,0 0 10px %23000,0 0 15px %23000%7D%3C/style%3E%3Cdiv class='shadow'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E") }
效果如下
而且由于尺寸是动态的,换个书名也能完美适应
最后再来对比一下,下面哪个一眼看上去效果最好?
完整代码可以查看以下任意链接
- CSS feather (codepen.io)点击预览
- CSS feather (runjs.work)
五、总结一下
以上就是本文全部内容了,一个还不错的绘制小技巧,最后来回顾一下一些实现要点
- 羽化其实就是将边缘变得模糊,在 CSS 中其实就是创建一个边缘模糊的遮罩,也就是需要一种半透明的渐变。
- 圆形的边缘很好羽化,因为径向渐变可以直接绘制
- 矩形的边缘就稍微复杂点,因为不能直接通过渐变绘制
- 边缘模糊在 CSS 中很好实现,用 box-shadow 就行了
- 可以通过 SVG foreignObject 将 dom 转换成图片
- SVG 转换成内联形式,好处是减少资源依赖,转换后仍然保持自适应特性
当然本文最重要的一点是,如何在 HTML 严重受限的背景上绘制一些常见的图形,以后碰到类似的需求也可以朝这个方向去考虑,最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发❤❤❤
CSS 如何实现羽化效果?相关推荐
- 纯CSS制作的图形效果
纯CSS制作的图形效果 很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
- css实现tab切换效果
<div class="match-instruction"><div id="tab2" class="mi-cont" ...
- 不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果 原文:不可思议的纯 CSS 实现鼠标跟随效果 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
- php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
- [css] 用css实现倒影的效果
[css] 用css实现倒影的效果 box-reflect 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- [css] 使用css实现彩虹的效果
[css] 使用css实现彩虹的效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- [css] 使用css实现蒙版的效果
[css] 使用css实现蒙版的效果 filter: blur(1px) 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面 ...
- css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码,本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
- 前端开发 认识css 体验变色的效果 0228
css的功能 没有css的html 有了css后的网页效果 只有html的网页 只有内容主体 当html加上了css后 对主体内容有了一个修饰 更好看了 关于css 小试一下 让文字变红 更改按钮样式 ...
最新文章
- ISA防火墙之利用WINS服务器实现WPAD
- button Show most popular product
- nodejs,python,sublime和Eclipse的包管理器
- 使用JXL.jar实现JAVA对EXCEL的读写操作
- 面试题:在日常工作中怎么做MySQL优化的?
- Django使用Python操作数据库 --Django 1.8.2 文档(中文)部分笔记
- 新功能又来啦!这次是「代码搜索」和视频直播!
- vue excel导入mysql详细教程_Vue前端上传EXCEL文件,后端(springBoot+MyBatis+MySQL)解析EXCEL并批量插入/更新数据库...
- java 程序在Eclipse 或者 Linux 运行报 Unsupported major.minor version 51.0解决办法
- 再学 GDI+[65]: 路径画刷(5) - SetGammaCorrection
- 机械振动的傅里叶变化分析技术
- C++实现的基于αβ剪枝算法五子棋设计
- 各大物联网通信技术对比
- 对照ArcGIS坐标系统文件(.prj)用Deskpro完成投影转换
- wps折线图如何画多条折线_怎么用wps制作折线图 wps制作多条折线图的步骤方法...
- 瑞吉外卖QQ邮箱登录
- dva介绍--Dva概念(二)
- 华硕计算机硬件信息,华硕EeePC T101MT配置信息及散热
- 为什么说边缘计算是5G时代的必备品?
- 市盈率不足20倍 34只大盘蓝筹股尽显低估值效应
热门文章
- 苹果刷机有好处和坏处_经常听到手机需要‘刷机’,到底是什么意思?又学到一招...
- 现在什么类型的视频最受欢迎
- 王垠:Kotlin 和 Checked Exception
- 在JBuilder中生成EXE、可执行jar、带shell窗口的EXE
- HTML开心餐厅网页制作,开心餐厅技巧经验总结
- 瑞星 HookCont.sys <= 24.0.0.5 驱动本地拒绝服务漏洞
- 基于物联网的室内环境检测云系统设计(树莓派RPI、Arduino、智能家居、RFID、APP)
- 4G网络数据传输流程 三
- 开放平台API接口加密,签名策略
- IE浏览器和火狐浏览器兼容问题——CSS篇