May The 4th be with you.
Tags: humor, css, maythefourth
Published: 2023-05-04 15:10:35

It's May the Fourth. so I'm reposting some of my Star Wars content.

This is part of my CSS ugly sweater series. A previous version of the sweater is in [this post.](https://dev.to/jarvisscript/return-of-css-halloween-4idg) 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](https://dev-to-uploads.s3.amazonaws.com/i/a0znzci2r1kjq0rcyixp.jpg)

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


I added CSS variables in the code this time.

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

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

}

```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhtnzth81sgvhpv15vtj.jpg)

```HTML
<div class="torso"> 
   <div class="character">
     <div class="imperialCrest"></div>	
   </div character>
</div>
```

```css
: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;
}

```


##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/078g9h501x1ktrey8s42.jpg)

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

```
```css
.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;
}

```


##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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpuwitgqltbx2tue2tem.jpg)

```html
<div class="struts vertical"></div>
<div class="struts diagonalLeft"></div>
<div class="struts diagonalRight"></div>
```

```css
.struts {
    background-color: #000000;
	height: 100%;
	width: 16px;
    position: absolute;

}

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

.diagonalRight {
  transform: rotate(-60deg);
}
```
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. 

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

```


![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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j877uwmr646kdfv3gy7g.jpg)

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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ua5h2zq80twt391cox4.jpg)

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.


##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 worn by the empire in Star Wars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2e7hckmgca7xb75jnnf1.jpg)

![LEGO Stormtrooper wearing
 a blue sweater. The sweater has the imperial crest on it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8d2uwxcpw095jw1sz2sk.jpg)

##More Content

Here's last year's [May the fourth post](https://dev.to/jarvisscript/may-the-4th-in4) that has links to more Star Wars developer content.


Do you know of other Star Wars posts? Put them in the comments.

May the fourth be with you.
```
-$JarvisScript git push
```