自从CSS3推出后,使用CSS新推出的一些属性,我们可以实现很多以前只能使用图片才能实现的视觉效果。比如,圆角、圆形、平行四边形等视觉效果。
不过随着浏览器对CSS新属性支持的越来越好,借助CSS的形状(clip-path)、蒙版等属性,我们可以创建更多有趣的视觉效果,下面就选10个使用CSS实现的形状视觉效果的实例来展示下形状的魅力。
凹凸视觉效果
这个实例来CSS-Tricks网站的一篇文章,它使用clip-path实现了一个凹凸的视觉效果。如下图所示:
全屏剪裁图片,倒三角视觉效果
现在网页上,全屏图片应用的越来越广泛。比如下面这个实例,就是使用了CSS中的transform来实现的一个倒三角的视觉效果:
使用圆角,修饰内容
下面这个实例是使用圆角来实现的:
视窗视觉效果
使用CSS中的clip-path,我们实现任意的形状,并且还可以实现一些交互效果。比如,下面这个实例,使用clip-path实现了一个带有形状的鼠标滑过的交互效果。
菱形菜单视觉效果
斜角动画视觉效果
爆炸视觉效果
使用SVG可以实现类似文字的爆炸动画效果:
曲线环绕效果
图片环绕文字排列在之前的web中是一种很难实现的效果。不过有了最新CSS的shape-outside属性,要实现下面文字环绕图片的效果是很容易的:
拐角视觉效果
按钮是设计中经常出现的一个元素,一般也都是加一些圆角之类的视觉效果。不过,有时候只要稍微发挥点想象力,我们还是可以设计一些其它的拐角的视觉效果的。
荣誉勋章视觉效果
勋章的视觉效果能很好的突出重要的内容。不过,在以前的web开发中,我们一般都是使用图片来实现的。现在,可以直接使用CSS来实现。
总结
使用各种形状的视觉效果,可以大大的丰富视觉创意效果。特别是现在随着 CSS Grid 的推出,结合形状,可以创造出更加具有创意的视觉效果。
上面的例子,可能不是在每一个地方都适用,但是却可以展现技术在不断推动着web视觉创意向前发展。所以,我们更加要不断在web中来尝试新技术,这样才能做出更加具有创意的视觉效果。
本文主要是从10 Examples of Unorthodox Container Shapes Created with CSS整理而来,有删减,有疏漏或者理解不到位的地方,还请多多指教!