如何使用CSS Shapes创建出色的效果

A Clipping Demo title

前端开发人员倾向于用矩形思考;矩形内的矩形内部矩形内的矩形。我们可能会使用带边框的技巧来制作圆形或三角形,但实际上它们仍然只是伪装的矩形框。那么这就要改变了CSS形状,aW3C候选人推荐会改变你的想法。

CSS Shapes允许您使用形状函数创建几何形状:circle(),省略号(),inset()和polygon(),并将它们应用于剪切和滤镜等元素或效果。更重要的是,形状可以影响内容的流动,允许您整齐地环绕文本,如圆形化身。

也许最强大的形状函数是polygon(),因为它允许您使用使用坐标对定义的无限点来创建复杂的任意形状。如果你已经习惯了SVG,这对你来说很熟悉。

在本教程中,我们将使用具有clip-path属性的多边形从文本中剪切几何形状,以便只有多边形内的区域可见。我们还将添加一些简单的过渡以使效果生动。您可以从此repo中获取每个步骤的代码Github,在这里

01.从HTML开始

首先,让我们准备好HTML。我们只需要一个

, 我们的。夹Class和我们的文本,但是由于我们将使用伪元素来实现此效果,我们还将添加一个与文本具有相同值的属性,以便我们可以将其读入CSS而不是硬编码。

剪辑演示

接下来,我们想让它填满屏幕并对齐文本死点 - 我们可以使用一些Flexbox的这个的魔力。我们还要对文本进行样式和大小调整。

.clip {//填充屏幕位置:绝对;顶部:0;左:0;宽度:100%;身高:100%; // alignment display:flex; //使用flex进行对齐justify-content:center; //水平对齐align-items:center; //垂直对齐//文本样式字体系列:'Work Sans',Arial,Helvetica,sans-serif; // Work Sans可从Google Fonts获得font-weight:800; font-size:8rem; text-align:center; text-transform:大写; }

02.添加一些风格

现在我们可以设计风格了::之前::后伪元素,每个元素都成为文本顶部的一个层。默认情况下,::后将具有最高的z指数。方便ATTR()选择器将读取我们的值数据内容属性。

伪元素将共享位置和Flexbox属性,因此我们可以稍微重构CSS并利用SCSS的强大功能来保持样式表的整洁。字体样式将被继承。我们正在使用...表示我们已经涵盖的属性。

.clip {... //定位self(&)和伪元素(before / after)&,&:: before,&:: after {position:absolute;顶部:0;左:0;宽度:100%;身高:100%;显示:flex; //使用flex进行对齐justify-content:center; //水平对齐align-items:center; // vertical alignment}&:: before,&:: after {content:attr(data-content); //使用属性值作为内容}}

浏览器中的结果看起来应该相同,因为伪元素直接位于文本的顶部。你可以修改他们的样式DevTools看看它们是如何分层的。

03.设置背景和颜色

是时候给每一层赋予不同的颜色和背景 - 让我们选择一些我们预先定义为变量的大胆的,趋势性的霓虹色。我们还可以使用CSS填充技巧强制文本换行到多行,而不是在HTML中添加这些行。

这很有用,否则我们必须使用两种不同类型的换行符:
在 - 的里面

而且更加模糊\一个在属性中。

.clip {...&,&:: before,&:: after {padding:0 50%; box-sizing:border-box; }&:: before {color:$ white;背景:$ pink; }&:: {color:$ pink;背景:$ blue; }}

填充技巧的工作原理是将文本设置为零水平宽度,迫使浏览器将每个单词换行到一个新行。

04.剪辑文字

有趣的时间 - 我们已准备好开始剪切我们的文本。我们将创建一个对角线剪辑,将屏幕从左下角到右上角切成两个三角形。

::之前伪元素只能在左上角的三角形中看到::后伪元素只能在右下角三角形中看到。这是实现这一目标的代码:

.clip {...&:: before {clip-path:polygon(0 0,100%0,0 100%,0 100%); }&:: {clip-path:polygon(100%0,100%100%,0 100%,100%0)之后; }}

这会创建具有四个点的多边形。每个点由坐标对描述;只是一个X(从左到右)和Y(从上到下)的值。值可以是绝对值(例如:px)或相对值(例如:%)。这些点以左上角为参考,所以点在100%100%在右下角。

想象一下,按照列出的顺序连接每个点以形成形状的线条。在里面::之前多边形从左上角开始(0 0),在屏幕上移动到右上角(100%0),然后向下到左下角(0 100%)

希望您现在可以看到剪辑的文本。调整浏览器大小,您将看到裁剪相应的反应。

如果您使用的是Chrome,则可能会在调整大小时看到一些重复问题,这是由Chrome的复合图层引起的。不幸的是,因为演示是全屏的,所以推荐将改变:转变财产和变换:translateZ(0)黑客不纠正这个。但是,如果你切换。夹位置:固定;有用。

clip {&,&:: before,&:: after {position:fixed; }}

请记住,Chrome正试图提供帮助,此解决方法将对性能产生影响。在生产中执行此类操作时,请务必了解性能。

05.添加过渡

现在我们已经获得了剪切文本,让我们通过一些过渡来实现它。好消息是你可以简单地过渡夹路径属性使浏览器完成所有的艰苦工作。让我们在伪元素上启用转换,然后定义四个不同的状态以在它们之间转换。

状态1:这是初始状态,所以让我们创建另外三个状态

随时随地添加CSS底部的每个块,以便您可以看到它的外观。

状态2:略微移动三角形以显示背景

这看起来有点像刚果共和国的旗帜。从每个多边形三角形的尖端移除20%将起到作用。

状态3:将三角形变为矩形

这与法国三色相似,相反。

那第四副坐标怎么样?嗯,这是有用的地方。事实证明,过渡夹路径仅当使用的形状函数相同(因此多边形>多边形)并且使用的点数相同时才有效 - 浏览器将转换每个单独的点。这就是为什么我们有第四个隐藏点 - 它允许我们从三角形无缝过渡到矩形,我们只需要在需要时显示第四点。

.clip {&:: before {clip-path:polygon(0 0,40%0,40%100%,0 100%); }&:: {clip-path:polygon(100%0,100%100%,60%100%,60%0)之后; }}

状态4:扭曲那些多边形

坚持我们的旗帜主题,这将类似于海洋旗帜信号世界中的“我需要拖船”。

在这里,我们扭曲多边形,使它们在中心交叉,每个形成两个三角形。这是转换可以帮助您理解坐标对。通过真正减慢转换速度,您可以看到每个点如何在屏幕上移动到新位置,并开始了解对的排序如何影响转换。它实际上为您提供了很多对转换的控制。

.clip {&:: before {clip-path:polygon(100%0,0 0,100%100%,0 100%); }&:: {clip-path:polygon(100%0,100%100%,0 0,0 100%)之后; }}

包起来

我们已经完成了所有设置,但我们还无法改变状态,这意味着你无法看到行动中的转变。有很多方法可以达到这个目的,所以这取决于你。在repo和CodePen中,我使用了100%无JavaScript的解决方案,带有隐藏的单选按钮和〜一般的兄弟选择器 - 看一看。您还可以查看本教程的CodePen这里

本文最初出现在第298期 ,专业网页设计师和开发人员杂志 - 提供最新的网络趋势,技术和技术。 在这里购买第298期 要么 在这里订阅网络

特别圣诞节优惠: 订阅net时节省高达47% 为你或朋友圣诞节。这是一个有限的报价,所以快速行动......

相关文章:



翻译字数超限