CodeNewbie Community šŸŒ±

Cover image for Ugly Sweater CSS: The Imperial Logo
Chris Jarvis
Chris Jarvis

Posted on • Originally published at dev.to

Ugly Sweater CSS: The Imperial Logo

Last year I made CSS ugly sweaters based off of Star Wars characters. Some of those were minifigures included in the LEGO Star Wars Advent calendar. I'm not sure if there are sweaters in this year's advent. But Hallmark has released LEGO Minifigure ornaments with ugly sweaters. The ornaments are available at Hallmark stores and online.

LEGO Darth Vader wearing a red sweater with the Death Star on it.

The Darth Vader ornament is a larger version of the figure from last year's advent calendar. I did the sweater with this post. There also is a new figure, a Stormtrooper wearing a sweater with the Imperial Crest.

LEGO Stormtrooper wearing<br>
 a blue sweater. The sweater has the imperial crest on it

I reused the basic sweater HTML from last year. I changed the colors to match the new blue sweater. A previous version of the sweater is in this post. I won't go into much detail here. Below is what the final image looked like. I just changed the colors.

red christmas sweater with death star

  1. Main sweater to blue
  2. Boxes to blue and white
  3. Stitching to black.

I'm learning CSS variables, so I'm trying them in the code this time.

:root {
    --sweaterblue: #558fbf;
}

.imperialCrest {
    background-color: var(--sweaterblue);

}

Enter fullscreen mode Exit fullscreen mode

That's the basic torso. I placed a character div in that torso. Inside the character div is a div for a specific character for this post it has a class of Imperial Crest.

Add the Crest

I started the Crest with a big circle with a background of --sweaterblue and a border of black #000000. The blue matches the blue from the main sweater background. But it sweater has stars as a background image. The inside of the crest is solid blue.

large black ring on blue back ground

<div class="torso"> 
   <div class="character">
     <div class="imperialCrest"></div>  
   </div character>
</div>
Enter fullscreen mode Exit fullscreen mode
:root {
    --sweaterblue: #558fbf;
}
.imperialCrest {
    background-color: var(--sweaterblue);
    height: 300px;
    width: 300px;
    border-radius: 50%;
    border: 12px solid #000000;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
}

Enter fullscreen mode Exit fullscreen mode

Add circles

Next I added two circles inside the main ring.

A large black ring, inside it a black circle, with a small blue circle in the center

<div class="imperialCrest">  
  <div class="bigCircle">
   <div class="centerCircle"></div>
 </div>
</div> 

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

.centerCircle {
    background-color: var(--sweaterblue);
    height: 100px;
    width: 100px;
    border-radius: 100%;
    position: absolute;
}

Enter fullscreen mode Exit fullscreen mode

Struts and Spokes

Right now it just looks like circles. But after adding some shapes, the logo will appear. The process for the rest of the build follows this pattern; build a shape, get sizes approximately right, duplicate the shape, modify the sizes and shape as the copies are moved around.

First I made some black struts. The first one was vertical. Then used transform: rotate(xxdeg); to change the angle of the right and left struts. Since I'm building around a symmetrical circle, once I have the placement for the left side all I have to do is give the right side the opposite number. Left is 60degress, so right side is -60 degrees.

A large black ring, inside it a black circle, with a small blue circle in the center. There is a vertical line and an X in the center of the ring.

<div class="struts vertical"></div>
<div class="struts diagonalLeft"></div>
<div class="struts diagonalRight"></div>
Enter fullscreen mode Exit fullscreen mode
.struts {
    background-color: #000000;
    height: 100%;
    width: 16px;
    position: absolute;

}

.diagonalLeft {
  transform: rotate(60deg);
}

.diagonalRight {
  transform: rotate(-60deg);
}
Enter fullscreen mode Exit fullscreen mode

Next I made some trapezoid blocks where the struts meet the black circle. To make a trapezoid with CSS you make a square using borders, give one side a color make the other sides transparent. Add some width or height and background color to the item. It took a while had to adjust margins to get placement right. I used dev tools to select the element and adjust their positions in the browser.

    <div class="block top"></div>
    <div class="block lefttop"></div>
    <div class="block leftbottom"></div>
    <div class="block righttop"></div>
    <div class="block rightbottom"></div>
    <div class="block bottom"></div> 
Enter fullscreen mode Exit fullscreen mode
.block {
    height: 20px;
    width: 30px;
    position: absolute;

    border-top: 50px solid black;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top-right-radius: 10%;
    border-top-left-radius: 10%;
}

.top {
    margin-top: -210px;
}

.bottom {
    margin-bottom: -210px;
    transform: rotate(180deg);
}

Enter fullscreen mode Exit fullscreen mode

A large black ring, inside it a black circle, with a small blue circle in the center. There is a vertical line and a X in the center of the ring. Where the line and black circle meet are retangles

Next I added blue spokes made of of an hourglass shape. The hourglass is made of two elongated triangles. In CSS triangles are made by building a rectangle with borders but no background. The top and bottom borders have color, the sides are usually transparent. To make it easy to see here, I gave the left and right a color of white and removed the blue circle. In final project the sides will be transparent and not seen. The points will blend into the circle.

Large rectangle. made of four rectangle. top and bottom are blue. right and left are white.

Made one in center then two more using same transform: rotate attributes as the spikes. So they cross like an X in the center of the circle.

Odd thing here When viewed on Firefox, the rotated blue spokes have a thin black line through the center. It doesn't show on Chrome. I used dev tools to change the black items under the spoke to other colors but there still was a black line on the blue.

Any CSS or browser experts out there know what's going on?

Final Look

Here's the final look with the all the spokes. it now looks like the Imperial Crest from the sweater. I was extremely happy when I refreshed the browser and saw this final image.

The Imperial Crest worm by the empire in Star Wars

LEGO Stormtrooper wearing<br>
 a blue sweater. The sweater has the imperial crest on it

Follow me on Twitter.

Top comments (2)

Collapse
 
theague profile image
Kody J Ague

hey that's awesome. As a SW nerd I love this!

Collapse
 
ben profile image
Ben Halpern

Neat :)