CSS advanced special effects (on)

1.CSS Shapes

CSS Shapes is a new standard, designed to allow Web designers to use a variety of shapes.
CSS Shapes contains two new attributes, one for setting the contents of the box shape effects, the other for setting the shape of the peripheral shape elements influence the content stream.

shape-outsideProperties can only be applied to the float. This property does not change the appearance of the element itself, which only affect the outer shape by setting the content flow.
shape-outsideValue of the property is the shape function , for example circle(), ellipse(), polygon(), inset(). Shape function parameters can be passed, do not pass the parameter default values are used.

.fig-moon {
    float: right;
    max-width: 40%;
    shape-outside: circle();
}

Create a polygon will be very troublesome are based on complex picture. Fortunately, we can directly create a shape based transparency on the source file picture .
By default, the shape of the contour will be completely transparent along an edge image generating region, but this value can shape-image-thresholdbe modified property, the default value is 0.0 (completely transparent).

.fig-planet {
    float: right;
    max-width: 65%;
    shape-outside: url(../img/saturn.png);
    /*shape-outside: polygon(41.85% 100%, 22.75% 92.85%, 5.6% 73.3%, 0.95% 52.6%, 5.6% 35.05%, 21.45% 17.15%, 37.65% 12.35%, 40% 0, 100% 0%, 100% 100%);*/
    shape-image-threshold: 0.9;
}

Use border-radius to create a circle:

.fig-moon {
    float: right;
    max-width: 40%;
    border-radius: 50%;
    shape-outside: border-box;
}

.fig-moon {
    float: right;
    max-width: 40%;
    border-radius: 50%;
    shape-outside: margin-box;
    margin: 2em;
}

.fig-planet {
    float: right;
    max-width: 65%;
    shape-outside: url(../img/saturn.png);
    shape-margin: 1em; /* shape-margin属性用于给整个形状添加外边距。 */
}

2. Cut and masks

Shear (Clipping) using a path defined shape hard boundaries, the visibility can be completely switched based on the boundary element.
Mask (Masking) for the element to certain areas more transparent or opaque.
Shear will affect the response area of the object, but the mask will not.

2.1 Cut

It was first cut through clipproperty introduced. However, this property can only be applied to absolutely positioned elements, and these elements can only cut a rectangle.
The new clip-pathproperties can be substantially in the shape of shape functions CSS define how shear element. It also cut the use of SVG document elements, as long as referenced by a URL 元素即可。
剪切路径只影响元素渲染后的外观，而不会影响页面流。

<nav class="stacked section nav-section inverted">
    <ul class="wrapper">
        <li><a href="#moon">The Moon</a></li>
        <li><a href="#sun">The Sun</a></li>
        <li><a href="#planets">Planets</a></li>
        <li><a href="#milky-way">Galaxy</a></li>
        <li><a href="#universe">Universe</a></li>
    </ul>
</nav>

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100">
    <clipPath id="saturnclip">
        <circle cx="50" cy="50" r="40.1" />
        <ellipse transform="" cx="" cy="" rx="" ry="" />
    </clipPath>
</svg>

.nav-section [href="#planets"] {
    /* #saturnclip表示引用图片剪切路径 */
    clip-path: url(img/clip.svg#saturnclip);
}

目前，只有Firefox支持在CSS引入外部剪切源并影响HTML内容。

不支持引用外部剪切源的浏览器其实支持SVG剪切路径，只不过CSS、HTML和SVG都必须在一个文件中。
使用行内SVG作为剪切路径的方法适用于大多数现代浏览器。

对于复杂的形状，建议大家还是使用图片编辑器来创建，然后再将最终的图片作为剪切路径的源。

2.2 蒙版

<header class="page-header stacked inverted">
    <h1 class="header-title">Stargazing</h1>
</header>

/* 使用CSS渐变来创建蒙版。 */
.header-title {
    mask-image: radial-gradient(ellipse 90% 30% at 50% 50%, rgba(0,0,0,0) 45%, #000 70%);
    mask-size: 100% 200%;
}

以SVG中的<mask>元素作为蒙版源：

.header-title {
    mask: url(#ellipseMask);
}

<svg xmlns="http://www.w3.org/2000/svg" height="0" viewBox="0 0 100 100">
    <defs>
        <!-- 省略 -->
        <mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
            <radialGradient id="radialfill" r="0.9" cy="1.1">
                <stop offset="45%" stop-color="#000"/>
                <stop offset="70%" stop-color="#fff"/>
            </radialGradient>
        </mask>
    </defs>
</svg>

参考资料：

• 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德