DEV Community

Nadia Laasri
Nadia Laasri

Posted on • Originally published at nadialaasri.me

Make your first CSS art ๐Ÿ˜

Many people know how to use CSS to style websites, but when it comes to CSS artwork, they get confused on how they are made.

So i thought it might be helpful if i share my humble experience with you, I am going to discuss some important CSS knowledge you will need to have, in order to make your own CSS art and enjoy it as i do, letโ€™s start๐Ÿš€

Useful CSS properties :

1. Gradient

We can declare gradient in both background or background-image properties, it can take as much colors as you want separated by a comma โ€œ , โ€.

We have two types of gradients:

-Linear Gradients: can be controlled by directions(left,top,right,bottom) or angles.

-Radial Gradients: can be controlled by giving each color a percentage, setting a shape(circle,ellipse).

โ€ข Great website to generate gradients: cssgradient

2. box-shadow

Give your element one or multiple shadows by separating them with a comma โ€œ , โ€.

I found that the โ€œinsetโ€ property value is so much useful, it changes the shadow from an outer shadow to an inner shadow, this makes your element looks a little bit real.

โ€ข Great website to generate box-shadow: cssmatic

3. clip-path

Clip-path is a very useful property when it comes to CSS artwork, this property will make it easy to draw a path that probably will take you so much time to do in a different way.

This helps to draw circle, polygon and paths by specifying which region you want to show.

โ€ข Great website to generate clip-path: bennettfeely

Make your first CSS art

After we discussed these properties above, you are now ready to make your first CSS art.

This is the one we will make together ๐Ÿ˜

Alt Text

This is the HTML :

    <div class="coffee-cont">
        <div class="coffee-cup"></div>
        <div class="coffee-hand"></div>
        <div class="coffee-tasse"></div>
    </div>
Enter fullscreen mode Exit fullscreen mode

The first thing we will do is style our coffee container :
we will give it position:relative
and position:absolute to the other elements inside this div (except the coffee-cup div ) so that their positions will depend on their parentโ€™s position.

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

letโ€™s style our second div, the coffee cup :
we will use the radial-gradient for the background to make the center a little bit brighter than the sides.

    .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%;
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

Again a radial-gradient to the element before the coffee-cup to generate our coffee's color. notice that we give it z-index:9 so that it goes over the cup.

    .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;
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

this code will generate the top of the cup:

    .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;
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

Letโ€™s add the coffee-hand div, we will give it z-index:-1, this way it goes behind the cup element

    .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%;
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

Now we take care of the element in the bottom, we will use a circular radial-gradient, the center will be brighter.
we need a shadow to add a nice effect to this element, for this we will use the box-shadow property with a darker color.

    .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;
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

I added this ::after selector to generate another blurry shadow which will be displayed at the very bottom of this element.

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

Alt Text

That's it โ˜•.
Congratulations on making your first CSS art ๐ŸŽ‰, now it is your turn to use all the things you have learnt and make something fancier! ๐Ÿ‘

Check all the code here : @codepen

If you want to see more of my CSS artwork, check out my twitter, i tweet a lot about CSS there. ๐Ÿ˜Š

Top comments (49)

Collapse
 
keemosty profile image
Hakeem Abdul

This is really good
Thank you Nadiaโ•

Collapse
 
laasrinadiaa profile image
Nadia Laasri

You're welcome :)

Collapse
 
eakorita profile image
โœจืึตืœึดื™ึผึธื”ื•ึผ

Amazing ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿš€

Collapse
 
laasrinadiaa profile image
Nadia Laasri

Thank you :)

Collapse
 
withtoms profile image
Coding with Toms๐Ÿ’ปโ˜•๐Ÿš€

Thanks for the awesome guide!

Collapse
 
laasrinadiaa profile image
Nadia Laasri

You're very welcome!!

Collapse
 
emmabostian profile image
Emma Bostian โœจ

This is great thank you!

Collapse
 
laasrinadiaa profile image
Nadia Laasri

You're welcome
Happy you liked it :)

Collapse
 
nicolasdw profile image
Nicolas-DW

Really nice!

Collapse
 
laasrinadiaa profile image
Nadia Laasri

Thank you:)

Collapse
 
mafarah profile image
mafarah

This is very nice!

Also, the twitter link at the end of your post is broken.

Collapse
 
laasrinadiaa profile image
Nadia Laasri

Thank you, just fixed it :))

Collapse
 
devbyrayray profile image
Dev By RayRay

This is so nice!! Thanks for writing this post ๐Ÿ™

Collapse
 
laasrinadiaa profile image
Nadia Laasri

Happy you liked it :)

Collapse
 
fkhadra profile image
Fadi Khadra

Awesome and so simple ! Well done

Collapse
 
laasrinadiaa profile image
Nadia Laasri

Thank you :)

Collapse
 
lucytyex profile image
lucy h

Awesome guide! Thanks so much <3

Collapse
 
laasrinadiaa profile image
Nadia Laasri

You're very welcome !

Collapse
 
floracalvodev profile image
Flora

Amazing post Nadia๐Ÿ™Œ๐Ÿฅณ

Collapse
 
laasrinadiaa profile image
Nadia Laasri

Thank you so much :)