这章我们探讨几个有意思的辅助显示工具。

---

CSS 滤镜

最早的滤镜是微软在DirectX上做的效果，CSS通过filter属性实现了一个版本。

image.png

几个函数分别控制注入模糊，透明度和阴影等，来看个效果：

image.png

再来看个不同的drop-shadow：

image.png

颜色滤镜

image.png

SVG 滤镜

image.png

img.logo {filter: url(/assets/filters.svg#spotlight);}
img.logo.print {filter: url(/assets/filters.svg#spotlight) grayscale(100%);}
 img.logo.censored {filter: url(/assets/filters.svg#spotlight) blur(3px);}

组合和渲染

除了上面说的滤镜，CSS同样可以控制元素的组合，比如让两个元素部分重合。

渲染元素

在元素重合的时候，可以通过改变元素的混合模式

image.png image.png

---

裁剪和遮罩

剪裁

image.png

借助svg定义的形状我们生成需要裁剪的形状：

p {background: orange; color: black; padding: 0.75em;} p.clipped {clip-path: url(shapes.svg#cloud02);}

image.png

裁剪形状

clip-path叶童拱了多个默认的形状，来看看例子：

.ex01 {clip-path: none;}
.ex02 {clip-path: inset(10px 0 25% 2em);}
.ex03 {clip-path: circle(100px at 50% 50%);}
.ex04 {clip-path: ellipse(100px 50px at 75% 25%);}
.ex05 {clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);}
.ex06 {clip-path: polygon(0 0, 50px 100px, 150px 5px, 300px 150px, 0 100%);}

image.png

clip 盒子

我们也可以将clip-path指定元素的边框：

image.png

---

遮罩

遮罩类似于裁剪路径，只不过只支持图片，并且定义了一堆的可配置属性：

定义遮罩

image.png
image.png

改变遮罩模式

image.png

之前都是用alpha来做遮罩，现在luminance表示亮度也是可以的：

img.theatre {mask-image: url(i/theatre-masks.svg);} img.compass {mask-image: url(i/Compass_masked.png);} img.lum {mask-mode: luminance;}
<img src="i/theatre-masks.svg">
<img class="theatre" src="i/mask.JPG"> <img class="theatre lum" src="i/mask.JPG"> <img src="i/Compass_masked.png">
<img class="compass" src="i/mask.JPG"> <img class="compass lum" src="i/mask.JPG">

image.png

设置大小和重复遮罩

遮罩的大小通过marsk-size来控制：

image.png

p {mask-image: url(i/hexlike.svg);} 
p:nth-child(1) {mask-size: 100% 100%;} 
p:nth-child(2) {mask-size: 50% 100%;} 
p:nth-child(3) {mask-size: 2em 3em;} 
p:nth-child(4) {mask-size: cover;} 
p:nth-child(5) {mask-size: contain;} 
p:nth-child(6) {mask-size: 200% 50%;}

image.png image.png

p {mask-image: url(i/theatre-masks.svg);}
p:nth-child(1) {mask-repeat: no-repeat; mask-size: 10% auto;} 
p:nth-child(2) {mask-repeat: repeat-x; mask-size: 10% auto;} 
p:nth-child(3) {mask-repeat: repeat-y; mask-size: 10% auto;} 
p:nth-child(4) {mask-repeat: repeat; mask-size: 30% auto;} 
p:nth-child(5) {mask-repeat: repeat round; mask-size: 30% auto;} 
p:nth-child(6) {mask-repeat: space no-repeat; mask-size: 21% auto;}

image.png

放置遮罩的位置

image.png

p {mask-image: url(i/Compass_masked.png); mask-repeat: no-repeat; mask-size: 67% auto;}
p:nth-child(1) {mask-position: center;} p:nth-child(2) {mask-position: top right;} p:nth-child(3) {mask-position: 33% 80%;} p:nth-child(4) {mask-position: 5em 120%;}

image.png

同时我们可以设置marsk的原点

image.png
image.png

最有意思的就属如何组合多个元素了：

image.png image.png

mask 的简写

image.png

#example {
mask-image: url(circle.svg), url(square.png), url(triangle.gif); mask-repeat: repeat-y, no-repeat;
mask-position: top right, center, 25% 67%;
mask-composite: subtract, add, add;
mask-size: auto, 50% 33%, contain;
} #example {
mask:
url(circle.svg) repeat-y top right / auto subtract, url(square.png) no-repeat center / 50% 33% add, url(triangle.gif) repeat-y 25% 67% / contain add;
}

image.png

mask type

如果要设置svg元素的遮罩类型：

image.png

svg #mask {mask-type: alpha;}
img.masked {mask: url(#mask) no-repeat center/cover luminance;}