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 :)

Collapse
 
g33knoob profile image
G33kNoob

Mantaaap mbak nadiaaa

Collapse
 
laasrinadiaa profile image
Nadia Laasri

Thank you

Collapse
 
akhilarjun profile image
Akhil Arjun
Collapse
 
laasrinadiaa profile image
Nadia Laasri

Great one !

Collapse
 
nirbhayvashisht profile image
Nirbhay Vashisht

As a person who prefers working on back-end:
I liked your blogπŸ’―
Well doneπŸ˜„

Collapse
 
laasrinadiaa profile image
Nadia Laasri

Happy to hear that :) Thanks !

Collapse
 
fajarsiddiq profile image
Fajar Siddiq

WOOOWWW this is beautiful

Collapse
 
laasrinadiaa profile image
Nadia Laasri

Thank you so much!

Collapse
 
abiolaesther_ profile image
Abiola Esther

Thanks for this
I learnt a lot 😊

Collapse
 
laasrinadiaa profile image
Nadia Laasri

That's the goal! You're very welcome