DEV Community

Cover image for CSS Halloween: Return of Sweater Weather.
Chris Jarvis
Chris Jarvis

Posted on • Updated on

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.

red christmas sweater with death star
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; 
}

Enter fullscreen mode Exit fullscreen mode

The Christmas sweaters were Star Wars themed so lets change the Tie-Fighters to bats.

{-o-}  => } } 
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

line of boxes on black background. boxed are shown as dashed lines. one box is tilted. it has brackets in it.
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>
Enter fullscreen mode Exit fullscreen mode
.bat {
  transform: rotate(45deg);
  font-size: 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode

all boxes are now straight. but the content is tilted.
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;
}


Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

I just repeated this pattern and changed the bat class as needed.

.eyes{
    font-size: 2rem;
    padding-top: 2px;
}
Enter fullscreen mode Exit fullscreen mode

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.

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
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
jimmiejack12 profile image
jimmiejack12

Love the idea of combining Halloween with ugly sweaters! The updated colors and designs are going to look fantastic grinchcostumes for the season. Can't wait to see the final result.

Collapse
 
vivianemartini profile image
Viviane Martini • Edited

i really like this series, a really nice way to use criativity and code o/

Collapse
 
jarvisscript profile image
Chris Jarvis

Thank you, It's fun to write.