How To Make Wine Glasses With Pure HTML & CSS

#css #codenewbie #html #100daysofcode

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>

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>

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

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.

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

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.

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

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.

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

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.

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.

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!