How To Make Wine Glasses With Pure HTML & CSS
Tags: css, codenewbie, html, 100daysofcode
Published: 2021-02-28 17:27:49

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 - <a href="https://9elements.github.io/fancy-border-radius/" target="_blank">Fancy Border Radius Generator</a>. Now who's ready for some CSS art?!

<h2>Research</h2>
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.

<h2>Setting up base</h2>

```html
<!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:
<ul>
<li>Body - upper part that contains the wine</li>
<li>Middle - the handle of the wine glass</li>
<li>Base - the bottom part of the wine glasses</li>
<li>And the wine itself</li>
</ul>

<h2>Replicate the same for Wine glass 2 & 3 </h2>

```html
        <!--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>
```

 
<h2>Diving into CSS</h2>

<h3>Body</h3>

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


>Ps: I used <a href="https://9elements.github.io/fancy-border-radius/" target="_blank">Fancy Border Radius Generator</a> to get the <code>border-radius</code>.



![wg body](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sauoc2nfsjaj13crkt3.PNG)

<h3>Wine</h3> 

```css
.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 <code>background</code> 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 <code>width, height & border-radius</code> used in *.body* so they fit properly into each other.

![wg wine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc3g7p2iqkl4smmuj453.PNG)

<h3>Middle</h3> 

```css
.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 <code>width & height</code> of the handle of the wine glass. Use the same values of <code>background, border, filter: blur() & box-shadow</code> given to *.body* in order to maintain uniformity. Finally, add <code>position</code> and use <code>left & bottom</code> to place the handle underneath the body of the wine glass where it should be.

![wg handle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cu0izng1raqwk93vmnmu.PNG)

<h3>Base</h3> 

```css
.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 <code>width & height</code> of the base of the wine glass, add a <code>border</code>. Use the same values of <code>background, filter: blur()</code> given to *.body* in order to maintain uniformity. You then add another <code>filter: drop-shadow()</code> to give it a shadow effect. Finally, add <code>position</code> and use <code>left & top</code> to place the base underneath the handle of the wine glass just at the center.

![wg full](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzl17sas63oiudvz5opc.PNG)
 
<h2>Tips</h2>
 
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 <code>width, height and border-radius</code> of the body of the glass, the <code>width & height</code> of the handle of the glass and the <code>width & height</code> of the base of the glass. 

![wg new](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3icese9zup7664xpnoe.PNG)


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 


<h2>Conclusion</h2>

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!