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!
Top comments (8)
it would be good to insert the code within the post instead of using images :)
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 😃
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.
I just did that, it looks even better!! I love it, thank you for the recommendation.
Sincerely, this Is really explanatory you made it look really simple
Thank you Raji! Would love to see you try it out ❤️
Nice tip thx!
You’re welcome! 😃