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.

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

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay