Ugly sweater CSS: The Child
Tags: css, frontend, tutorial, todayilearned
Published: 2020-12-14 15:38:03

Last time I made a [ugly sweater](https://dev.to/jarvisscript/ugly-sweater-css-36am) based off of a LEGO figure. No fig this time but I reused the sweater design and added a new character. 

![Poe Dameron wearing a gaudy sweater. It has a pic of bb-8 on it.](https://yodaarchives.files.wordpress.com/2020/12/poe.jpg)

## The Sweater ##
The sweater is almost the same as the one in the BB-8 post so I won't go into depth about it again. The only change was to switch the seams from black to white. Design tip if you are reusing NONFUNCTIONAL code or following a tutorial change something. Always explore what can be done.

## Reuse of code ##
BB-8's bottom is a sphere. I noticed I could reuse that part of code for another character. I altered the shape by changing the `border-radius`. It was 50% all around. I removed it from the top, making that part flat. The bottom still has `border-radius` applied so it is rounded.


![Semi circle only bottom half of a circle.](https://dev-to-uploads.s3.amazonaws.com/i/7ie62oy1zhcv9tf63qi6.jpg)

```HTML
 <div class="cradleBody">

 </div> 
```

```CSS
.cradleBody {
	background-color: white;
	height: 50px;
	width: 120px;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center; 
	border: 2px solid black;
	border-top: 0;
	overflow: visible;
	flex-direction: column;
}

```
![bar placed on top of semi circle.](https://dev-to-uploads.s3.amazonaws.com/i/iy7m47gr6ocbjiln85ry.jpg)

Next I added a rectangle to show the lip of the cradle.

```HTML
		   <div class="cradleBody">
	   		<div class="cradleLip"></div>
		   </div> 
```
```CSS
.cradleLip {
	background-color: white;
	height: 12px;
	width: 128px;
	border: 2px solid black;
	margin-top: -66px;
	
}

```

## An Alien ##

Next I built the body from a couple of rectangles, `childRobe` and `childRobeCollar`. I used the lower one to hold the blocks for the Child's hand. `justify-content: space-between;` forced the hands to set at each end of the `childRobe`. There's no border on it so it blends in with the body.

![tan block on top of white cradle.](https://dev-to-uploads.s3.amazonaws.com/i/k58oq4zma2a10uckqkmt.jpg)

```HTML
	   <div class="childRobeCollar"></div>
	   <div class="childRobe">
	   	<div class="childHands"></div>
	   	<div class="childHands"></div>
	   </div>
```

```CSS
.childRobe {
	background-color: #d7bfa6;
	height: 40px;
	width: 88px;
	margin-top: -70px;
	margin-right: -108px;
	display: flex;
	justify-content: space-between;
}

.childRobeCollar {
	background-color: #d7bfa6;
	height: 50px;
	width: 94px;
	margin-top: -90px;
	margin-right: -92px;
	border-top-left-radius: 34%;
	border-top-right-radius: 34%;
	border: 1px solid black;
}
```
## And I'll form the Head ##

Next the head: the head is made of two rectangles modified with `border-radius`. The ears are one long rectangle that was moved under the head div by adjusting the margins. Then the head sits on top. Then the eyes add some expression. 

The Child and cradle are wrapped in a div called The child. The `filter: drop-shadow(0 0 1.5rem white)` give the glow effect to the character.

![The child from the  mandalorian. Young alien that appears to be same species as Yoda.](https://dev-to-uploads.s3.amazonaws.com/i/c5yij4mrgzr8qx1h8rsf.jpg)

```HTML
	   		<div class="childEars"></div>
	   	<div class="childHead">
	   		<div class="childEyes">
	   			<div class="pupil"></div>
	   		</div>
	   		<div class="childEyes">
	   			<div class="pupil"></div>
	   		</div>
	   	</div>
```
```CSS
.childHead {
	background-color: #88af90;
    height: 40px;
    width: 60px;
    border: 1px solid black;
    margin-top: -150px;
    margin-right: -76px;
    border-top-left-radius: 34%;
	border-top-right-radius: 34%;
	display: flex;
	justify-content: space-evenly;
	overflow: visible;
}

.childEyes {
	background-color: black;
	height: 14px;
	width: 14px;
	border-radius: 50%;
	margin-top: 8px;
	display: flex;
	justify-content: center;
	align-items: center; 
}


.pupil {
	background-color: white;
	height: 4px;
    width: 4px;
    border-radius: 50%;
    margin-top: -8px;
    margin-right: -4px;
}
  
```
Final step is to add the back to the cradle. This is two semi-circles like I used for the cradle body. I just adjusted the height and width till it formed a good backdrop.
 
![grogu in his cradle](https://dev-to-uploads.s3.amazonaws.com/i/gvc4s5mr760rhmv3asw5.jpg)

And there is the final version of the Child made with CSS. This was another fun build hope you enjoyed it.

UPDATE: A year later I changed the color scheme to be even more festive. See it [here](https://dev.to/jarvisscript/ugly-sweater-css-the-child-christmas-outfit-2ac1)

```
-$JarvisScript git push
```