DEV Community

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

Posted on • Edited on

1

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.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs