如何使用CSS形状创建金字塔布局

这是CSS最伟大的时代之一。我们不再需要坚持基于矩形的网站;我们现在拥有必要的工具来进行布局,并同时享受高水平的浏览器支持。

在这篇文章中,我将阐述一下世界夹路径属性和CSS形状。为此,我将向您展示如何创建和动画食物金字塔。演示分为两个:左侧是金字塔,右侧是一些Potter Ipsum文本,使用CSS Shapes环绕金字塔。

需要注意的重要一点是,我们的金字塔分为四个部分:顶部有一个三角形,下面有三个梯形。这些部分彼此独立,使我们能够自由地为金字塔的每个部分制作动画。

标记

为了使这个演示工作,保持HTML清洁非常重要,因为这将是我们所有CSS的基础。

三角形
梯形
梯形
梯形

标题

第1段

第2段

第3段

第4段

.wrapper元素有一个上边距5VH和侧面的自动值,以保持所有元素居中。在这个例子中,。金字塔浮动到左侧(这是我们稍后将添加的外形属性的要求)。

我们四个。区元素的顶部和底部将有40px的填充。宽度,背景图像和动画延迟在每个上都不同。出于这个原因,我们将使用:第n个孩子()选择器以独立应用这些样式。

食物金字塔顶部有一个三角形,下面有三个梯形。每个部分由a定义。区元素,每个都有不同的宽度。顶部的三角形(.zone:第n个孩子(1))宽度为25%,梯形低于50%,第三要素为75%,金字塔底部宽度为100%。

现在,我们应该在它下面有一个正方形和三个矩形。是时候申请了夹路径

剪辑路径属性

夹路径Property是隐藏元素部分(图像,段落甚至div)的绝佳工具,而不是显示整个块。夹路径提供一些基本形状,如插入,圆形,椭圆和多边形。但是,我们也可以使用SVG创建更复杂的形状和后备。

谢谢夹路径,我们的布局可以更具创意,并且在我们的设计中包含非矩形形状。该属性诞生于一个现已弃用的剪辑属性,过去需要绝对或固定的定位。

Clippy

Clippy是Bennet Feely的一个很棒的工具,可以帮助你完成剪辑路径

虽然夹路径财产是每个浏览器都不支持,我们可以通过SVG后备和数据获得几乎完全的支持-webkit-字首。目前唯一不支持它的主要浏览器是Edge。

为了创建我们的金字塔,我们需要申请夹路径我们的四个.zones。我们将使用多边形形状并使用以百分比形式定义X和Y值的每个点的坐标:第n个孩子独立选择每个元素。

.zone:nth-child(1){clip-path:polygon(50%0,100%100%,0%100%); } .zone:nth-child(2){clip-path:polygon(25%0,75%0,100%100%,0 100%); } .zone:nth-child(3){clip-path:polygon(16.5%0,83%0,100%100%,0 100%); } .zone:nth-child(4){clip-path:polygon(12.5%0,87.5%0,100%100%,0 100%); }

通过我们的代码编辑器在正确的位置获取坐标似乎是不可能的。如果我们希望避免试图随机猜测坐标,我强烈建议添加-webkit-在浏览器中添加前缀和编辑代码。 Chrome DevTools会让我们在编写代码时看到代码,从而更容易绘制形状。

形状外的财产

现在我们的金字塔已经建立起来,是时候让文字在它周围流动了。获取文本以包围元素的最佳方法是使用形状外属性。虽然浏览器支持不好(仅在Webkit和Blink浏览器中支持-webkit-前缀)有一个可用的polyfill将帮助我们访问其余的浏览器。

In-browser editing

避免猜测坐标并利用Chrome上的Inspect Element

夹路径属性,形状外还有一些预定义的基本形状,例如插入,圆形,椭圆和多边形。对于这个演示,我们将使用多边形创建直角梯形,使文本环绕我们的金字塔。

应该应用这些坐标的值。金字塔看起来像这样:

.pyramid {shape-outside:polygon(310px 0,130px 405px,558px 405px); }

请记住,这些数字只是示例 - 您可以根据您的品味和必需品调整形状的角度。

互动

由于金字塔的每个部分都是独立的,我们可以轻松地执行:徘徊对他们的事件。这带来了许多机会。我们可以做每个。区显示不同的信息,或者只是让它打开一个新窗口。

对于这个演示,我决定使用混合模式:悬停效果。混合模式在Photoshop中比在CSS中更常见,让您告诉浏览器您希望元素如何融合在一起。

有多种混合模式可供选择:变暗,变亮,叠加,色调和倍增等。了解它们的一个很好的工具是Sara SoueidanCSS Blender

我选择了RGBA背景颜色和alpha值为0.7的背景图像。我选择的混合模式变亮了:徘徊我改变了背景颜色Alpha通道为0.2,转换为0.5秒。

顶部三角形的代码如下所示:

.zone:nth-child(1){background:rgba(202,197,94,0.7)url(“img / vegetables.jpg”); background-blend-mode:减轻;过渡背景色0.5s; } .zone:nth-child(1):hover {background-color:rgba(202,197,94,0.2); }

介绍动画

Introductory animation

金字塔的部分从上到下落下,加速度模仿重力的影响

这是最有趣的部分:当我们定义每个元素将如何进入页面时。在这种情况下,金字塔的每个部分都将从顶部进入变换:translateY(-500%);Transform:translateY(0%);。每一个。区是独立的,累积的动画延迟很理想。注意第四个元素(金字塔的底部)是如何首先落下的。

.zone:nth-child(1){animation-delay:2s; } .zone:nth-child(2){animation-delay:1.5s; } .zone:nth-child(3){animation-delay:1s; } .zone:nth-child(4){animation-delay:0.5s; }

对于这段代码,我们还应该补充一下动画填充模式:前锋;为了在动画结束后将元素保持在正确的位置。当元素从上到下落下时,如果我们应用轻松定时功能,动画将看起来更逼真,因为这会模拟由于重力引起的加速度(与预定义的缓动值不同)。

H1元素和段落有一个更简单的动画。它们从具有0不透明度的RGBA值变为1.它们也将具有不同的延迟。

最后的话

实施夹路径可能会有点慢,但它正在前进,并且有可用的后备。因此,现在是开始在生产中使用它的好时机。通过这些属性,我们可以制作更具创意的网站,并探索全新的布局。从...中得到快乐夹路径随着布局革命打破模具!

真实文章:



翻译字数超限