Pure CSS lamp: step-by-step
Tags: css, beginners, tutorial, codenewbie
Published: 2020-08-25 14:14:18

I wrote about the basic concepts for CSS art in the [first part of the series](https://dev.to/poulamic/intro-to-creating-css-art-1ep5). In this part, we will create a lamp from scratch.

Before starting, let's break down the objects into the component shapes. Here we have three - the shader, the leg and the foot are the basic parts. So, let's create the markup.

```HTML
<div class = "lamp">
  <div class = "shade"></div>
  <div class = "leg"></div>
  <div class = "foot"></div>
</div>
```

Now, we will start with CSS.
First, we will set up the document to take complete span the complete window, and to prevent any scroll. Also we want the lamp to be in the center - we can achieve that with `grid` and `place-items`.

Within the lamp, we want the components center-aligned. We can achieve that with flex-box.

```CSS
body{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.lamp{
  display: flex;
  flex-direction: column;
  align-items: center;
}
``` 
Now, let us create the basic shapes for the components
```CSS
.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  border: 1px solid black;
}
.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  border: 1px solid black;
}
.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;
  border: 1px solid black;
}
```
This is the result:
![Boxes for the elements](https://dev-to-uploads.s3.amazonaws.com/i/edf2fc0fyn5pit2fmbxo.png)
(Border used here to show overlaps of the shape in the next step)
I am using `vh` as the unit for both height & width to make it responsive and preserve aspect ratios.

Now, we will use positioning for minor adjustments - move the leg and the foot a bit higher for perspective. For slight adjustments from an elements default position, we can use relative postioning. 

In addition the leg needs to be in the front of the stand - we will change that with z-index. (Note:  in simple cases such as this, what appears on top can also be adjusted through markup - the later the element appears, higher it will be in the stacking context. Using it here just as a demo use for more complex cases ).

```CSS
*{
  position:relative;
}

.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  border: 1px solid black;

  z-index: 3;
}
.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  border: 1px solid black;

  top: -2vh; 
  z-index:2;
}
.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;
  border: 1px solid black;

  top: -4vh; 
}
```
Result:
![Boxes with positioning](https://dev-to-uploads.s3.amazonaws.com/i/zlfj7l2im7l6aezhqj2c.png)

Next, we will move to detailing each shape.

For the shade, we want rounded corners and a trapezium - we will create those with `border-radius` and `clip-path`. 

For a 3d effect, we will use gradients. We can set the gradients on either `background` or `background-image`. In cases, where the gradients are used only to show shadows, I prefer to set the primary color as background, and add the shadows with black/white with alpha value in combination with `transparent`.

Also, as gradients are applied from bottom to top, we need to be conscious of the order.

In case of the `shade`, we are applying four layers (from bottom to top) - along the right slanted side, along the left slanted side, left to right, ellipse at the top.
Figuring out the opacity and angles for each may be through trial and error.

```CSS
.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  z-index: 3;

  border-radius: 50% / 10%;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  background-image: 
    radial-gradient(closest-corner at 50% 2%, #EEE4CF 70%, transparent 78%),
    linear-gradient(to right, transparent 48%, #ffffff66 58% 75%, transparent 88%),
     linear-gradient(-253deg, #ffffffcc, #E5CB9A 15%, #DBB97C 20%, #EDDBB7 36%, #ffffff33 54%, transparent 95%),
    linear-gradient(253deg, #F8EFDD 20%, transparent)    
}
```
![Shade styled](https://dev-to-uploads.s3.amazonaws.com/i/a2rmony2pkjx58oez8b9.png)

Similar for the leg: shadows to create a 3d effect
```CSS
.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  top: -2vh; 
  z-index:2;

  background-image: 
    linear-gradient(#00000044, transparent 20% 99.8%, #00000033 100%),
    linear-gradient(to right, transparent 15%, #00000055 36% 44%,  #00000011 60%, #ffffff4f 78% 95%, #9B5539 95%)
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uj31fleq221mqxyixiry.png)

For the foot, we will use radius to make it an oval, use gradients and shadow to give it dimension.

```CSS
.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;  
  top: -4vh; 
  border-radius: 50%;
  box-shadow: 0 0.4vh #773321;
  
  background-image: 
    linear-gradient(to right, transparent 11vh, transparent 12vh, transparent 13vh),
    linear-gradient( 40deg, transparent 5% 24%, #0000001f 28% 36%, #00000011 37% 44%, transparent 50%, #ffffff1c 56%, #ffffff44 68%, #ffffff1c 92%, transparent)
}
```
![completed](https://dev-to-uploads.s3.amazonaws.com/i/7p1l3jqx5rbbgxi33v6h.png)

That's it!
You can find the pen here:
{% codepen https://codepen.io/poulamic/pen/bGpgyrV %}