3个闪亮的新css属性,供您今天试用。

CSS是任何网页设计师最重要的工具之一。它为页面添加了设计样式,但它已经变得更重要了。能够向页面添加动画并提供交互反馈是创建引人注目的用户体验的关键。

CSS现在执行许多以前需要JavaScript的任务,如屏幕外菜单、下拉菜单、灯箱、手风琴和视差滚动。这使你的网站更有表现力。继续阅读三个尖端的属性,你可以从今天开始调查。

想进一步探索吗?尝试重新创造这些酷CSS动画示例,或者试试这些10种惊人的新CSS技术

01.显示裁剪设计

手机上越来越多的凹槽会切断屏幕空间。

屏幕上出现了带有“断线”或“凹槽”的手机,这意味着网页设计师必须考虑如何为这些页面设计。目前,这些设备上的网页浏览器增加了额外的空间,以适应这些剪贴画。网页设计师经常喜欢使用全屏,现在有一种方法可以做到这一点,Chrome是其中的佼佼者。

将此元标记添加到文档中:

然后使用CSS安全环境变量来布局内容:

内容{填充:16 px;填充-左:env(安全区域-嵌入-左);填充-右:env(安全区域-嵌入-右);}

现在,您只需测试您的设计在设备上的景观和肖像。这里展示剪贴画的设计或者看下面的视频。

02.CSS剪辑路径

CSS剪辑路径是那些真正帮助推动视觉效果的属性之一。最初,这是CSS剪辑,用于裁剪元素的一部分。有很多种方法可以使用这个方法,包括inset,它可以将元素嵌入每个边的多少像素:

剪辑路径:嵌入(10px20px30px40px);

还有一个多边形,它可以添加多个点,这样就可以做出一些更模糊的形状。圆圈和椭圆非常简单,但也可以引用SVG图像中的路径:

剪辑路径:URL(路径svg#c1);剪辑路径:多边形(5%5%,100%0%,100%75%,75%75%,75%100%,50%75%,0%75%);

03.CSS圆锥梯度

Different conical gradient options, by Lea Verou

你可以用圆锥梯度做一些径向梯度不可能的事情。

圆锥梯度与径向梯度非常相似。然而,你不能创建一个彩色车轮的径向梯度,而你可以用锥形梯度。当径向梯度在点之间辐射时,圆锥形在圆圈周围移动,并在颜色之间混合。

一开始,你可能会认为这并不是什么特别的事情,但只要有一点创造力,就能在正确的地方添加止损点,就能取得一些很好的效果。目前,这只能通过多填充来实现。检查本指南由LeaVerou撰写

本文最初发表于创意网页设计杂志Web Designer。买第282期要么订阅

阅读更多:



翻译字数超限