CSS Halloween: Return of Sweater Weather.

Last year I made some Halloween characters faces using CSS. Then for Christmas I made Ugly Sweaters. 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.

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.

.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.

.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); 
}

Oops, that rotated the whole section. Better add a div to house the bat. Once the bats their own class. They can be rotated.

    <div class="stitch">
      <div class="bat">} }</div>
    </div>

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

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.

.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.

<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.

.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?

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 and Ugly Sweaters.

-$JarvisScript git push