DEV Community

Cover image for CSS Ugly Sweater: Millennium Falcon
Chris Jarvis
Chris Jarvis

Posted on

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.

Interior of LEGO Millennium Falcon from Star Wars. It is decorated for Christmas. Rey and Finn are wearing ugly sweaters.

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.
Rey wearing a green sweater. the sweater has a image of the  Millennium Falcon on it.

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>

Enter fullscreen mode Exit fullscreen mode

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;
/...
}
Enter fullscreen mode Exit fullscreen mode

White shape that looks like a tear drop on a green background

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>  


Enter fullscreen mode Exit fullscreen mode
.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);

}

Enter fullscreen mode Exit fullscreen mode

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;

}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

"What a Piece of Junk" - Luke

This is what my version of the sweater looks like.

drawing of the millennium Falcon from Star Wars

"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.

stylized drawing of the millennium Falcon from Star Wars. one this one the back side is dark green.

Transform(rotate)

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

Enter fullscreen mode Exit fullscreen mode

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

stylized drawing of the millennium Falcon from Star Wars. one this one the back side is dark green. But it is rotated 45 and facing to the right and up.

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

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Here's the newest version.

drawing of Millennium Falcon facing the 2'o clock position.

May the Force be with you!

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
rachelfazio profile image
Rachel Fazio

Love this!!!