CSS Halloween: Return of Sweater Weather.
Tags: css, halloween
Published: 2021-10-02 00:02:53

Last year I made some [Halloween characters faces](https://dev.to/jarvisscript/css-halloween-faces-4lo3) using CSS. Then for Christmas I made [Ugly Sweaters](https://dev.to/jarvisscript/ugly-sweater-css-36am). Now that's it's October I'm putting them together for ugly Halloween sweaters.

I'm reusing the main sweater body from last year. But changing the color to fit the Halloween theme. 

![red christmas sweater with death star](https://dev-to-uploads.s3.amazonaws.com/i/a0znzci2r1kjq0rcyixp.jpg)
I changed the overall background to black. The stitching to white. And the alternating color blocks to orange and white with a dotted black border.

```css
.orangeStitch {
	background-color: orange;
	border: 2px dotted black;
	height: 15px;
	width: 10%;
	display: flex;
	justify-content: center;
	align-items: center; 
}

.whiteStitch {
	background-color: white;
	border: 2px dotted black;
	height: 15px;
	width: 10%;
	display: flex;
	justify-content: center;
	align-items: center; 
}

```

The Christmas sweaters were Star Wars themed so lets change the Tie-Fighters to bats.
```  
{-o-}  => } } 
```
That sort loots like a couple of bats. But maybe they can be rotated. 
```Css
.stitch, .stitchb{
	border: 2px dashed white;
	border-right: 1px dashed white;
	border-left: 1px dashed white;
	height: 30px;
	width: 10%;
	display: flex;
	justify-content: center;
	align-items: center; 
}

.stitchb {
  transform: rotate(45deg); 
}

```
![line of boxes on black background. boxed are shown as dashed lines. one box is tilted. it has brackets in it. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8rdju1mgwhfi0wl2o5c.jpg)
 Oops, that rotated the whole section. Better add a div to house the bat. Once the bats their own class. They can be rotated.

```html
	<div class="stitch">
	  <div class="bat">} }</div>
	</div>
```
```css
.bat {
  transform: rotate(45deg);
  font-size: 1.5rem;
}
```
![all boxes are now straight. but the content is tilted.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bf07ohubjxq2f9ti2mlr.jpg)
That's better. Battier? 

You can also see me testing a few things to make eyes and faces. The bats worked so I added more and made them fly right, left, up and down. 

```css
.batLeft {
  transform: rotate(45deg);
  font-size: 1.5rem;
}

.batRight {
  transform: rotate(145deg);
  font-size: 1.5rem;
}

.batUp {
  transform: rotate(-90deg);
  font-size: 2rem;
}

.batDown {
  transform: rotate(90deg);
  font-size: 2rem;
}


```

Then I added some spooky eyes to finished the sweater.

```html
<div class="stitch"><div class="eyes">•.•</div></div>
<div class="stitch"><div class="batLeft">} }</div></div>
<div class="stitch"><div class="eyes">º.º</div></div>
```
I just repeated this pattern and changed the bat class as needed.

```css
.eyes{
	font-size: 2rem;
	padding-top: 2px;
}
```
That completes the main body of the sweater. Next time I will add a movie monster. Any requests?

![ugly black sweater. it has a row white stitching to make boxes. under that a row of alternating square of orange and white.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3fry4f8avukgih8i9rx.jpg)

## What I learned ##

I reused HTML from previous exercises. I just added some class names and renamed others for clarity. I changed most of the styling. I used rotate to alter the direction of the brackets that would become bats for this project. 

If you want to see my other CSS creations look here, [Halloween characters faces](https://dev.to/jarvisscript/css-halloween-faces-4lo3) and [Ugly Sweaters](https://dev.to/jarvisscript/ugly-sweater-css-36am).
```
-$JarvisScript git push
```