- Css权威指南(4th,第四版中文翻译)-19. 滤镜,渲染,裁
- 《Hadoop权威指南(第四版)》中文PDF+英文PDF+源代码
- 《Hadoop权威指南(第四版)》中文PDF+英文PDF+源代码
- Css权威指南(4th,第四版中文翻译)-0.Preface
- Css权威指南(4th,第四版中文翻译)-11.定位
- Css权威指南(4th,第四版中文翻译)-17.过渡
- Css权威指南(4th,第四版中文翻译)-18.动画
- Css权威指南(4th,第四版中文翻译)-12.Flexbox
- Css权威指南(4th,第四版中文翻译)-10.Floating
- Css权威指南(4th,第四版中文翻译)-16.Transfor
这章我们探讨几个有意思的辅助显示工具。
CSS 滤镜
最早的滤镜是微软在DirectX上做的效果,CSS通过filter属性实现了一个版本。

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

再来看个不同的drop-shadow:

颜色滤镜

SVG 滤镜

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同样可以控制元素的组合,比如让两个元素部分重合。
渲染元素
在元素重合的时候,可以通过改变元素的混合模式


裁剪和遮罩
剪裁

借助svg定义的形状我们生成需要裁剪的形状:
p {background: orange; color: black; padding: 0.75em;} p.clipped {clip-path: url(shapes.svg#cloud02);}

裁剪形状
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%);}

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

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


改变遮罩模式

之前都是用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">

设置大小和重复遮罩
遮罩的大小通过marsk-size来控制:

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%;}


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;}

放置遮罩的位置

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%;}

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


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


mask 的简写

#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;
}

mask type
如果要设置svg元素的遮罩类型:

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