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

很多人都知道如何用CSS来实现网页的各种效果，但是提到用来CSS来创造艺术，都不是特别清楚它是做什么的。本文会首先介绍一些CSS的基础，然后会和你一起看看如何来实现一个CSS艺术品，下面让我们开始吧：

一些重要的CSS特性

渐变（gradient）

我们可以在背景或者背景图片中定义渐变，你想使用多少颜色都可以，不同的值之间用逗号分开即可。梯度有两种：

• 线性渐变：可以有方向（上下左右）或者角度来控制。
• 径向渐变：可以通过给每种颜色设定一个百分比，并设置形状来控制。

下面是一个很好的产生渐变的网站：cssgradient

阴影效果 (box-shadow)

同样你可以设置一个或多个阴影效果，中间用逗号分隔开即可。

我发现inset这个属性特别有用，他可以把阴影效果从外阴影改成内阴影，看起来就真实多了。

关于阴影效果的网站可以使用这个：cssmatic

剪切路径（clip-path)

剪切路径在CSS艺术品中非常有用，没有它你可能需要花费很多时间才能达到同样的效果。通过指定要显示的区域，他可以帮助你画圆形，多边形和路径。

一个非常好的剪切路径的网站：bennettfeely

创作你的第一个CSS艺术品

了解了上面一些基础信息后，下面来开始创作我们的第一个艺术品吧。我们的目标就是做出下面这个图形：

下面是HTML的内容：

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

第一件事就是为coffee container实现相关的风格（coffee-cont），我们把他设为 position:relative，然后他里面的div都设为absolute （除了coffee-cup div），这样里面的位置就会取决于他的父节点的位置。

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

下面就是coffee-cup相关的设置，我们使用了radial-gradient来设置背景，这样可以让中间比两边看起来稍微亮一点：

    .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%;
    }

这时的效果如下所示：

然后，我们使用radial-gradient来设置这个coffee-cup的before元素。注意这里我们使用了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;
    }

下面我们来画杯子的手柄了，这里我们使用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%;
    }

下面我们来画下面这个杯托，我们适应一个圆的radial-gradient，让中间明亮一点。我们同时还需要一个阴影，让它看起来更自然，我们使用黑色的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;
    }

大功告成，我们想要的杯子就这样实现了。恭喜你，去画一个你喜欢的图形吧。

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