内容简介:最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的我对CSS Masking模块的最初认知:CSS Masking就是CSS的
最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的 mask
和 clip-path
来实现,甚至还想结合SVG相关的特性。为了验证自己的一些想法,开始着手撸码,但问题来了,在撸码的过程中,我发现自己对于 mask
的相关特性理解的还不够透彻。因此重新阅读 CSS Masking Module Level 1规范 中的文档和相关教程。才发现原来CSS Masking是如此的强大。下面是我自己对CSS Masking模块的一些理解,希望对大家学习和了解该功能模块有所帮助。
简介
我对CSS Masking模块的最初认知:
CSS Masking就是CSS的 mask
属性(或 mask
相关的属性)!
事实上,CSS Masking模块中包含了两个部分: masking (即: mask
)和 clipping ( clip-path
)。
这两种方式都可以帮助我们实现一些类似下图这样的镂空效果:
我将 Masking 译为 遮罩 。那怎么理解遮罩呢?简单或形象的理解,大至是这样的一个意思:
- 我有一个源,比如我们的页面
- 我有一个层(遮罩层),它可能是一张图像或一个图形元素
- 将两者合在一起,源在遮罩层下面
也就是说, Masking描述了如何使用另一个图形元素或图像作为亮度(luminance)或alpha遮罩 。遮罩层可以是一张图像也可以是SVG绘制的图形,通常使用CSS或SVG渲染出来的元素(包括其子元素)会被绘制到缓冲区,然后该缓冲区将被组合到元素的父元素中。官方这段描述我个人认为过于拗口,自己简单的理解正如上图,图像源和遮罩层将会创建一个缓冲区,并且源和遮罩层会有一个合成的计算,在合层阶段之前,亮度和Alpha遮罩会影响这个 缓冲区 的透明度。如此得到一个类似镂空的效果。
而 Cliping (剪切)描述了视觉元素的可见区域。可以使用某些SVG图形或基本形状来描述该区域。此区域之外的任何内容都将看不到。
简单地说,该规范定义了两种不同的图形操作,即, 完全 或 部分 地隐藏了对象的部分。
两者区别之处:
- 剪切 需要一个剪切路径,剪切路径可以是一个 闭合矢量路径 、 形状 或 多边形 ;剪切路径是一个区域,该区域 内部 的所有内容都可以显示出来,外部的所有内容将被剪切掉,在页面上不可见
- 遮罩 需要一个高亮或Alpha遮罩层,将源和遮罩层合在一起会创建一个缓冲区域,在合层阶段之前,亮度和Alpha遮罩会影响这个 缓冲区 的透明度,从而实现完全或部分遮罩源的部分
注意:虽然遮罩提供了许多增强图形效果的可能性,并且通常对内容的可见部分提供了更多的控制,但是剪切路径可以执行得更好,基本形状可以更容易插值。
相关术语
在深入学习和了解 Masking 和 Clipping 相关的知识前,我们先了解一些有关于这方面的术语。
源对象
不管是Masking还是Clipping中都会有一个源(对象)的概念。这个源可能是一个HTML元素,比如一个 <img />
元素。
路径或基本图形
在Clipping中对源对象进行剪切时,需要一个图形,而这个图形可以是一些基本图形,也可以是一个闭合的矢量路径。在CSS中,我们可以通过 clip-path
来绘制这些图形:
正如上面示例所示,可以绘制:
inset() circle() ellipse() polygon() url()
其中 inset()
、 circle()
和 ellipse()
绘制基本图形, polygon()
绘制多边形,另外 url(#id)
配合SVG的 clipPath
来绘制更多圆滑的路径(这个也被称闭合的矢量路径)。怎么通过这些函数来绘制图形,后面介绍 clip-path
的时候再述。
遮罩层
在Masking中有一个遮罩层,这个遮罩层是一个图像(渐变绘制的也是),该层也被称为遮罩模式,主要有 高亮 和 Alpha 两种模式。
Alpha模式:带有 alpha
通道的图像, alpha
通道是包含在每个像素数据中的透明度信息。最简单的例子是带有黑色和透明区域的PNG图像。遮罩图像 黑色部分 将会显示( alpha
的值是 1
),透明区域( alpha
的值为 0
)内容将会隐藏:
高亮模式使用图像的 亮度 值作为遮罩值。如下图所示,遮罩层白色区域将显示出来,透明区域将会被隐藏:
最终得到的效果看上去相似:
Clipping
从上面的示例中,我们可以发现,剪切可以限制渲染区域,即所谓的剪切区域。从概念上讲:
剪切路径(不管是图形还是闭合的矢量路径)对某个元素进行剪切,将会分成两个区域, 路径内 (剪切区域内) 和 路径外 (剪切区域外), 位于剪切区域内的部分可见(被绘制出来) 。
在Clipping中会用到 clip-path
、 clip-rule
和 <clipPath>
:
-
clip-path
:用来绘制图形 -
clip-rule
:用于确定给定点是否位于图形元素创建的剪贴区域的形状内的算法 -
<clipPath>
:是SVG中的一个标签元素,可以被用于clip-path
的url()
中,当作剪切路径源
接下来了解这三个属性。
clip-path
clip-path
主要用来创建一个只有元素的部分区域可以显示的剪切区域, 区域内可见,区域外不可见 。其值主要有:
-
none
:未创建任何剪切区域 -
<basic-shape>
:CSS中绘制基本形状的函数,常见的函数有inset()
、circle()
、ellipse()
、polygon()
、url()
和path()
-
<geometry-box>
:如同<basic-shape>
一起声明,它将为<basic-shape>
提供相应的参考框盒子。通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被border-radius
定义的剪切路径)
<geometry-box>
提供的框盒模式主要有:
-
margin-box
:使用 margin box 作为引用框。其主要由margin
的外部边缘包围的形状。这种形状的圆角半径由相应的border-radius
和margin
的值来决定。如果border-radius
和margin
的比是1
或更大,则边距框(margin-box
)的半径是border-radius + margin
。反之,如果两者的比小于1
,那么边距框的半径是border-radius + (margin * (1 + (ratio-1)^3))
(ratio
是border-radius
和margin
的比,即border-radius / margin
) -
border-box
:使用 border box 作为引用框。定义了border
外部边缘包围的形状,此形状遵循border
外部边缘所有常规的border-radius
规则 -
padding-box
:使用 padding box 作为引用框。定义了padding
外部边缘包围的形状,此形状遵循padding
外部边缘所有常规的border-radius
规则 -
content-box
:使用 content box 作为引用框。定义了content
外部边缘包围的形状,此框的每个border-radius
都大于0
或border-radius - border-width - padding
-
fill-box
:利用对象边界框作( Object bounding box )为引用框 -
stroke-box
:使用笔触边界框( Stroke bounding box )作为引用框 -
view-box
:使用最近的 SVG视窗(Viewport) 作为引用框。如果viewBox
属性被指定来为元素创建SVG视窗,引用框将会被定位在坐标系统的原点,引用框位于由viewBox
属性建立的坐标系的原点,引用框的尺寸用来设置viewBox
属性的宽和高
如果是一个HTML元素被剪切,可以使用 margin-box
、 border-box
、 padding-box
或 content-box
框盒模式;如果运用于一个SVG元素上,可以使用 fill-box
、 stroke-box
或 view-box
。
先来看绘制基本函数的使用。
inset()
inset()
用来绘制矩形,或者带圆角的矩形。
clip-path: inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
-
<length-percentage>
用来设置剪切区域距离上、右、下和左侧外边缘的距离;可以设置一个、两个、三个或四个值。如果设置一个值,表示上右下左四个值相等;如果设置两个值,表示上下取第一个值,左右取第二个值;如果取值三个值,表示上取第一个值,左右取第二值,下取值第三个值;如果取值四个值,表示上取第一个值,右取第二个值,下取第三个值,左取第四个值。类似于border
的取值 -
round
用来设置裁剪区域是否带圆角,未显式设置表示剪切区域没有圆角,如果设置表示剪切区域带有圆角 -
<border-radius>
用来设置border-radius
的半径值,其使用和CSS的border-radius
一样,也可以带/
用张图来表示:
来看个Demo:
circle()
circle()
用来绘制圆。
clip-path: circle(<shape-radius> at posX posY)
-
<shape-radius>
:圆的半径,其值可以是<length-percentage>
、closest-side
、farthest-side
-
at
:显式的设置圆心的位置,如果未显式设置,默认的圆心在元素的正中间,即center
(50% 50%
) -
posX posY
:设置圆心位置,posX
是x
轴的位置,posY
是y
轴的位置,取值可以类似于background-position
ellipse()
ellipse()
用来绘制椭圆:
clip-path: ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
-
<shape-radius>
:椭圆的半径,其值可以是<length-percentage>
、closest-side
、farthest-side
,如果只取一个值的时候,表示x
轴和y
的半径值是一样的 -
at
:显式的设置圆心的位置,如果未显式设置,默认的圆心在元素的正中间,即center
(50% 50%
) -
<position>
:即posX posY
,用于设置圆心位置,如果未显式设置,其圆心在元素正中间(center)
即50% 50%
,其使用类似于background-position
polygon()
polygon()
主要用来绘制不规则的多边形:
clip-path: polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
-
<fill-rule>
:填充规则,后面介绍clip-rule
规则会细节,具体解释可以阅读 SVG中的fill-rule
相关的规范 -
<length-percentage> <length-percentage>
设置多边形点的位置
一个多边形至少会有三个点组成,比如简单的三角形,如果使用 polygon()
来绘制一个三角形的话,那么就会有三对坐标点,每对之间用一个 ,
分隔,比如:
看一个示例:
以上所述就是小编给大家介绍的《探索CSS Masking模块:Clipping》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- JavaScript 模块化探索
- 京东商城订单模块 Swift 探索
- 探索CSS Masking模块:Masking
- 探索Vue的业务模块化设计
- [译] 探索 SMACSS:可扩展的模块化 CSS 框架
- airflow探索篇
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
浪潮之巅(第三版)(上下册)
吴军 / 人民邮电出版社 / 2016-5 / 99.00元
一个企业的发展与崛起,绝非只是空有领导强人即可达成。任何的决策、同期的商业环境,都在都影响着企业的兴衰。《浪潮之巅》不只是一本历史书,除了讲述科技顶尖企业的发展规律,对于华尔街如何左右科技公司,以及金融风暴对科技产业的冲击,也多有着墨。此外,这本书也着力讲述很多尚在普及 或将要发生的,比如微博和云计算,以及对下一代互联网科技产业浪潮的判断和预测。因为在极度商业化的今天,科技的进步和商机是分不开的。......一起来看看 《浪潮之巅(第三版)(上下册)》 这本书的介绍吧!