DEV Community

Cover image for How To Make Wine Glasses With Pure HTML & CSS
Florence O.
Florence O.

Posted on • Edited on

How To Make Wine Glasses With Pure HTML & CSS

We see a lot of developers these days replicating real life objects using coding languages such and HTML, CSS and even JavaScript to bring more life and functionalities into the object. It's fascinating how much coding can do outside the normal web dev, app dev, AI etc. I mean how awesome is that?!

In this article, I'll be showing you how to make wine glasses - not one but three different types using pure HTML & CSS. Before we get into it, you'll be needing this amazing tool - Fancy Border Radius Generator. Now who's ready for some CSS art?!

Research

I started with reading on the different types of wine glasses we have. After a minor research, I decided to do a mockup of sparkling wine glass, burgundy wine glass, & sweet wine glass.

Setting up base

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="wg.css">
    <title>Wine glass</title>
</head>
<body>
    <div class="container">
        <!--First wine glass -->
        <div class="body">
            <div class="wine"></div>
        </div>
        <div class="middle"></div>
        <div class="base"></div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Writing the HTML - I decided to divide parts of my wine glass into:

  • Body - upper part that contains the wine
  • Middle - the handle of the wine glass
  • Base - the bottom part of the wine glasses
  • And the wine itself

Replicate the same for Wine glass 2 & 3

        <!--Second wine glass -->
        <div class="container2">
        <div class="body2">
            <div class="wine2"></div>
        </div>
        <div class="middle2"></div>
        <div class="base2"></div>
        </div>
        <!--Third wine glass -->
        <div class="container3">
        <div class="body3">
            <div class="wine3"></div>
        </div>
        <div class="middle3"></div>
        <div class="base3"></div>
        </div>
Enter fullscreen mode Exit fullscreen mode

Diving into CSS

Body

body{
    display: flex;
  justify-content: center;
  padding-top: 50px;
}
.container{
    float: left
}

.body{
    background: rgba(180, 180, 180, 0.3);
    width: 200px;
    height: 300px;
    border-radius: 53% 47% 49% 51% / 0% 0% 100% 100%;
    border: 1px solid transparent;
    filter: blur(0px);
    box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white,
        inset 0 -6px 3px #444444;
}
Enter fullscreen mode Exit fullscreen mode

I used flex and justify-content to center the glasses and gave the body tag a padding-top of 50px. Next, for the container and body of the first wine glass, I added background to give it a glass-like color, width & height to specify the size of the wine glass, border-radius to specify the shape/type of wine glass, border to add thickness to the glass and finally filter & box-shadow to give it a blur effect and that glass-like look.

Ps: I used Fancy Border Radius Generator to get the border-radius.

wg body

Wine

.wine{
    background: linear-gradient(to bottom, transparent,
        transparent, transparent, #b86b77, #b86b77, #b86b77);
    width: 200px;
    height: 300px;
    border-radius: 53% 47% 49% 51% / 0% 0% 100% 100%;
}
Enter fullscreen mode Exit fullscreen mode

Give it an effect of a wine inside the glass by adding a background color to .wine, I decided to add transparent colors to give it a half-full effect (I mean who pours their wine to the brink of the glass? haha)
. Maintain the same values of width, height & border-radius used in .body so they fit properly into each other.

wg wine

Middle

.middle{
    background: rgba(180, 180, 180, 0.3);
    width: 20px;
    height: 250px;
    border-radius: 0 0 5px 5px;
    border: 1px solid transparent;
    filter: blur(0px);
    box-shadow: inset 0 1px 0px #444444, inset 0 2px 0 white, 
        inset 0 -6px 3px #444444;
    position: relative;
    left: 90px;
    bottom: 5px;
}
Enter fullscreen mode Exit fullscreen mode

Next, specify the width & height of the handle of the wine glass. Use the same values of background, border, filter: blur() & box-shadow given to .body in order to maintain uniformity. Finally, add position and use left & bottom to place the handle underneath the body of the wine glass where it should be.

wg handle

Base

.base{
    background: rgba(180, 180, 180, 0.3);
    width: 130px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #777;
    filter: blur(0px);
    filter: drop-shadow(8px 8px 8px black);
    position: relative;
    left: 30px;
    bottom: 10px;
}
Enter fullscreen mode Exit fullscreen mode

For the final part of the wine glass, specify the width & height of the base of the wine glass, add a border. Use the same values of background, filter: blur() given to .body in order to maintain uniformity. You then add another filter: drop-shadow() to give it a shadow effect. Finally, add position and use left & top to place the base underneath the handle of the wine glass just at the center.

wg full

Tips

You can make more different types of wine glasses by using these line of codes, the only thing you have to do to make them different is to specify the size and shape of each glasses by changing the width, height and border-radius of the body of the glass, the width & height of the handle of the glass and the width & height of the base of the glass.

wg new

Tadaaa! There you have it. Can you identify the types of wine glass ? Drop a comment in the comment section.

CodePen link to live code - https://codepen.io/TheFlorz/pen/WNrLmME

Conclusion

CSS art is really a fun and challenging task, it helps us to master our skills as devs and opens us to more amazing things. Will you give it a try ? I think you should, you'll love it!

Top comments (8)

Collapse
 
afif profile image
Temani Afif

it would be good to insert the code within the post instead of using images :)

Collapse
 
theflorz profile image
Florence O.

Thank you, this is actually my first article. I’ll take note in my next post ☺️

Ps: there’s a link to the live code on codepen in the article 😃

Collapse
 
afif profile image
Temani Afif

true, but while reading we may want to do some copy/paste and build the code step by step.

PS: you can still edit your article to correct this. You will find on the right a guide that will help with code insertion.

Thread Thread
 
theflorz profile image
Florence O.

I just did that, it looks even better!! I love it, thank you for the recommendation.

Collapse
 
mustykhot profile image
mustykhot

Sincerely, this Is really explanatory you made it look really simple

Collapse
 
theflorz profile image
Florence O.

Thank you Raji! Would love to see you try it out ❤️

Collapse
 
sittisukintaruk profile image
Sitthisak Intharak

Nice tip thx!

Collapse
 
theflorz profile image
Florence O.

You’re welcome! 😃