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

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

一些重要的CSS特性

渐变(gradient)

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

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

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

阴影效果 (box-shadow)

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

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

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

剪切路径(clip-path)

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

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

创作你的第一个CSS艺术品

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

Alt Text

下面是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%;
    }

这时的效果如下所示:

Alt Text

然后,我们使用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;
    }
Alt Text

下面我们再来把杯子口设置一下:

    .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;
    }
Alt Text

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

下面我们来画下面这个杯托,我们适应一个圆的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;
    }
Alt Text

最后,我们再在::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;
    }
Alt Text

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

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

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *