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