创作你的第一个 CSS 艺术作品 😍

许多人知道如何使用 CSS 来设计网站，但是当谈到 CSS 艺术作品时，他们却对如何制作它们感到困惑。

所以我认为如果我与你分享我的卑微经验可能会有所帮助，我将讨论一些你需要掌握的重要 CSS 知识，以便制作你自己的 CSS 艺术并像我一样享受它，让我们开始吧🚀

有用的 CSS 属性：

1.渐变

我们可以在背景或背景图像属性中声明渐变，它可以采用任意数量的颜色，用逗号“，”分隔。

我们有两种类型的渐变：

-线性渐变：可以通过方向（左、上、右、下）或角度控制。

-径向渐变：可以通过赋予每种颜色一个百分比、设置一个形状（圆形、椭圆形）来控制。

• 生成渐变的优秀网站：cssgradient

2. 盒子阴影

通过使用逗号“ , ”分隔，为您的元素提供一个或多个阴影。

我发现“inset”属性值非常有用，它将阴影从外阴影更改为内阴影，这使你的元素看起来有点真实。

• 生成 box-shadow 的优秀网站：cssmatic

3. 剪辑路径

当谈到 CSS 艺术作品时，Clip-path 是一个非常有用的属性，这个属性可以让您轻松绘制路径，而如果采用其他方式则可能需要花费您大量的时间。

这有助于通过指定要显示的区域来绘制圆形、多边形和路径。

• 生成剪辑路径的优秀网站：bennettfeely

制作你的第一个 CSS 艺术作品

在我们讨论了上述这些属性之后，您现在就可以制作您的第一件 CSS 艺术品了。

这是我们将一起制作的😍

这是 HTML：

    <div class="coffee-cont">
        <div class="coffee-cup"></div>
        <div class="coffee-hand"></div>
        <div class="coffee-tasse"></div>
    </div>

我们要做的第一件事就是设计我们的咖啡容器的样式：
我们将赋予它position:relative
和position:absolute这个 div 内的其他元素（咖啡杯 div 除外），以便它们的位置取决于其父级的位置。

    .coffee-cont {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        position: relative;
    }

让我们设计第二个 div，即咖啡杯：
我们将使用径向渐变作为背景，使中心比侧面稍微亮一点。

    .coffee-cup {
        position: relative;
        width: 250px;
        height: 190px;
        margin: 0 auto;
        background: radial-gradient(circle,rgba(208, 208, 208, 1) 5%,rgba(189, 189, 189, 1) 51%);
        border-radius: 0 0 150px 150px;
        top: 50%;
    }

再次对咖啡杯前的元素进行径向渐变以生成咖啡的颜色。请注意，我们将其赋予咖啡杯，z-index:9以便使其覆盖杯子。

    .coffee-cup::before {
        content: '';
        display: block;
        height: 30px;
        width: 230px;
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(132, 102, 76, 1) 5%,rgba(86, 44, 8, 1) 96%);
        top: -7px;
        left: 10px;
        z-index: 9;
    }

此代码将生成杯子的顶部：

    .coffee-cup::after{
        content: '';
        display: block;
        height: 45px;
        width: 242px;
        position: absolute;
        border-radius: 50%;
        background: #cccccc;
        top: -25px;
        left: -1px;
        border: 5px solid #e6e6e6;
    }

让我们添加咖啡手 div，我们将给它z-index:-1，这样它就位于杯子元素后面

    .coffee-hand{
        width: 52px;
        height: 32px;
        position: absolute;
        background: #ffffff;
        border-radius: 32px;
        transform: rotate(-36deg);
        z-index: -1;
        border: 15px solid #dbdbdb;
        top: 56%;
        left: 66%;
    }

现在我们来处理底部的元素，我们将使用圆形径向渐变，中心会更亮。
我们需要一个阴影来为这个元素添加一个漂亮的效果，为此我们将使用颜色较深的 box-shadow 属性。

    .coffee-tasse{
        width: 400px;
        top: 68%;
        left: 10%;
        height: 139px;
        background: radial-gradient(circle,rgba(69, 69, 69, 1) 
        13%,rgba(176, 176, 176, 1) 45%,rgba(143, 141, 141, 1) 
        96%);
        border-radius: 50%;
        position: absolute;
        z-index: -1;
        border: 2px solid #f0f0f0;
        box-shadow: 1px 3px 0px 1px #323232;
    }

我添加了这个::after 选择器来生成另一个模糊阴影，它将显示在该元素的最底部。

    .coffee-tasse::after{
        content: '';
        display: block;
        width: 405px;
        top: 68%;
        border-radius: 50%;
        height: 145px;
        background: transparent;
        box-shadow: 2px 5px 8px 3px #bababa;
    }

就这样☕。
恭喜你完成了你的第一幅 CSS 作品🎉，现在轮到你运用所学知识，创作出更精美的作品了！👏

在这里检查所有代码：@codepen

如果你想看更多我的 CSS 艺术作品，请查看我的Twitter，我在那里发布了很多关于 CSS 的推文。😊

文章来源：https://dev.to/laasrinadiaa/make-your-first-css-art-29jo