CSS Ugly Sweater: Millennium Falcon

Winter means cold weather. Cold weather means sweaters. Sweaters mean ugly sweater CSS. My CSS ugly sweater posts were inspired by the LEGO Star Wars advent calendars.

This year LEGO has a Millennium Falcon Holiday set. I built it over the Thanksgiving break. Which means I don't have to wait till December for Ugly sweater CSS.

This is the Millennium Falcon Holiday set. Rey and Finn are wearing ugly sweaters. This post is about the Millennium Falcon sweater. I will attempt to draw Finn's sweater later.

Basic sweater

Here is Rey wearing a Millennium Falcon sweater.

I've written about this before in Ugly Sweater BB-8 but a short explanation is the sweater body is a green background with a collar and a hem. Inside the collar and hem are rows of decorative boxes.

In some parts of this series, the collar and decorative rows are separate. Here a design choice was too combine them. In the torso center is the focus or character of the sweater. For more details read the BB-8 post.

<div class="sweater">
  <div class="collar"></div>
    <div class="ship">
//* Wrapper for all parts of the spaceship.
// ...
    </div> 
  <div class="hem"></div>
</div>

The Spaceship

I started with a basic circle for the ship's body. Then placed a triangle on top of the circle. Circles are squares with a large border radius. Triangles are made by borders on a square. In this project the bottom border has color and the other borders are transparent. That makes the triangle point up.

More on triangles in my Squid Game post

.ship_body {
    background-color: white;
    height: 212px;
    width: 212px;
    border-radius: 50%;
//...
    display: flex;
    justify-content: center;
    align-items: center;

}


.falcon_front {
    height: 0px;
    width: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 180px solid white;
/...
}

Right now it looks like a tear drop or upside down ice cream cone. Time to add some character.

Hallways

For the hallway and center of the ship, I added white shapes with green borders. The green is the same shade as the main sweater. These shapes are layered on top of the ships body.

        <div class="ship_body">

          <div class="mid"> //wrapper
            <div class="hall"></div>
            <div class="circle"></div>
            <div class="hall"></div>
           </div>
        </div>  

.mid{
    display: flex;
    flex-direction: row;
    gap: 3px;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.circle {
    width: 42px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 4px solid var(--sweatergreen);
    z-index: 94;
    position: relative;
}

.hall {
    width: 70px;
    height: 14px;
    background: white;
    border: 4px solid var(--sweatergreen);

}

Front

For the opening on the front of the Falcon I added a rectangle that matched the color of the sweater. Then added a white rectangle on top of the green rectangle.

.fal_gap{
    width: 20px;
    height: 150px;
    background: var(--sweatergreen);
    position: absolute;
    margin-top: 150px;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.fal_gap_line {
    width: 16px;
    height: 40px;
    background: white;
    margin-top: 120px;

}

Cockpit

The Cockpit is an oval. Similar to a circle it's made by altering a rectangle but here width and length are of different sizes and the border radius is less than the 50% needed for a circle.

.cockpit {
    width: 40px;
    height: 80px;
    border-radius: 40%;
    background: white;

    margin-left: -50px;
    position: relative;
}

"What a Piece of Junk" - Luke

This is what my version of the sweater looks like.

"The garbage will do" - Rey

In the mini-fig sweater there are pops of color on the ship. These are to represent greebles. Which are little parts the movie model makers put on the ship to make them more interesting.
I attempted to add some but it just didn't look right. So I colored the whole back end of the ship for some variety.

Transform(rotate)

.ship {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    transform: rotate(45deg);
}

Here The entire ship wrapper div is rotated to make it look like the spaceship is in motion.

Wrap up

I made this rather quickly. I had a self imposed deadline and wanted it done before December. There's more stuff I'd like to do like adding more sections of color to the ship to be closer to the sweater.

But I'm happy with what I made in a short time.

Post Credits Scene

I had a deadline for the art work and the blog. Finished the art and while writing the blog I saw more stuff I wanted to fix. Still had some time so I updated the ship.

I added a drop shadow to show some movement. Plus put z-index to the circle to stack the body over the cockpit. This allowed me to add a border to the cockpit but only see the border on the front part of the ship.

.ship_body {
    z-index: 1;
    filter: drop-shadow(2px 10px 2px white);
}

.cockpit {
    border: 2px solid var(--SweaterDkGreen);
    z-index: 0;
}

Even though the sweater ship had a white line in the front gap I didn't like it. It didn't look like the Millennium Falcon may have been too thin. I took that class and changed the size and color. Then moved it to the front of the ship to cover the points on the triangles.

.fal_gap_line {
    width:  53px;
    height: 20px;
    background: var(--sweatergreen);
    position: absolute;
    margin-bottom: 221px;
    z-index: 1;
}

Here's the newest version.

May the Force be with you!

-$JarvisScript git push

Comments

[Rachel Fazio]

Love this!!!