美文网首页CSS权威指南
Css权威指南(4th,第四版中文翻译)-19. 滤镜,渲染,裁

Css权威指南(4th,第四版中文翻译)-19. 滤镜,渲染,裁

作者: 秋名山车神12138 | 来源:发表于2018-10-31 09:54 被阅读0次

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


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

相关文章

网友评论

    本文标题:Css权威指南(4th,第四版中文翻译)-19. 滤镜,渲染,裁

    本文链接:https://www.haomeiwen.com/subject/gccntqtx.html