DEV Community 👩‍💻👨‍💻

Cover image for Ugly Sweater CSS: That's no moon.
Chris Jarvis
Chris Jarvis

Posted on • Updated on

Ugly Sweater CSS: That's no moon.

On Christmas Eve the last door of the LEGO Advent Calendar was opened. It's Darth Vader in a Death Star ugly sweater. I'm not coding on Christmas Eve. So this post is coming days later.

The sweater is red with white designs. I used a couple shades of red, white, and cornsilk. The red and white by themselves was too jarring so I used the few shades.

I've done a few of these now and have a bit of a template. The featured character goes in the center of the sweater in Character div. The Death Star itself is only 3 divs.

       <div class="character">
         <div class="deathStar">       
            <div class="outer_dish"></div>
            <div class="trench"></div>
          </div>            
       </div>
Enter fullscreen mode Exit fullscreen mode

The character div is for positioning the featured character in this case the Death Star. The Death Star is a black square. I applied border-radius: 50% to make it a circle. The dashed border gives the edge of the circle an 8-bit look. this works because the border color matches the sweater background color. see the image where the border id green you see the border and looses the effect of 8 bit.
Death star drawn as black circle on red background.  mid Circle theres' a red line.
Alt Text

.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
}


.deathStar {
    background-color: #000000;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 2px dashed #bb3634;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

The gun dish is much smaller so I used a dotted border. The trench is a straight line across the center of the div, just like Beggar's canyon back home.


.outer_dish {
    background-color: #000000;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    border: 2px dotted #bb3634;
    margin-right: 70px;
    margin-top: -95px; 
}

.trench {
    background-color: #bb3634;
    height: 5px;
    width: 100%;
    position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

That wraps up this short build. Like I said just three divs for the Death Star but some styling makes it a recognizable image.

Top comments (0)

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.