DEV Community

Cover image for Ugly Sweater CSS: Winter Wampa Land.
Chris Jarvis
Chris Jarvis

Posted on

4

Ugly Sweater CSS: Winter Wampa Land.

It's cold so I made a Wampa. This is based on the version of the Wampa is from the animated Forces of Destiny series. I had to more creative on this one. I don't have a Wampa on my shelf to use as reference so I had to build it. The other sweater builds were based on some LEGO figures. This one was sketched from a screen grab.

Alt Text

The head is made from a circle and a triangle. For lack of a better word I called the triangle beard. The blue V, or beardPart, is a blue triangle that is covered up by a white triangle.


.wampa {
    background-color: #fff;
    height: 200px;
    width: 220px;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: visible;
    flex-direction: column;

    border-top-right-radius: 40%;
    border-top-left-radius: 45%;
    border-bottom-right-radius: 48%;
    border-bottom-left-radius: 48%; 
    border: 6px dashed #fff;
    margin-bottom: 80px;
    justify-content: space-between;
    z-index: 0;
}
.beard {
    border-top:100px solid white;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent; 
    margin-top: 156px;
    z-index: 0;
    display: flex;
    justify-content: space-between;
}

.beardPart {
    position: relative;
    margin:0 auto;
    margin-top: -170px;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-top: 67px solid #6eb7d7;
    height: 0;
    width: 0;
}
.beardPart:before {
    border-top: 54px solid white;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    content: "";
    left: -50px;
    margin-top: -68px;
    position: absolute;
}

Enter fullscreen mode Exit fullscreen mode

I modified the mouth from Halloween alien. The major change to the mouth is the border. The border color changes for each side. Reminder the mouth is a rectangle that been modified with border radius, so the browser still thinks it has four sides. The top is white to help contrast from the face. The sides are blue to match the mouth, The bottom is black.

.mouth {
    width: 120px;
    height: 60px;
    background: #6eb7d7;
    border-radius: 100px;

    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-top: -29px;
    margin-left: -138px;

    border: 4px solid white;
    border-bottom-left-radius: 25%;
    border-bottom-right-radius: 25%;
    border-bottom-color: #000000;
    border-left-color: #6eb7d7;
    border-right-color: #6eb7d7;
    z-index: 8; 
}
Enter fullscreen mode Exit fullscreen mode

The face is an oval. The nostrils are made from a black circles inside slightly larger white circles.

      <div class="nostrils">
    <div class="nostrilsInside"></div>
      </div>
    <div class="nostrils">
     <div class="nostrilsInside"></div>
     </div>
Enter fullscreen mode Exit fullscreen mode
.nostrils {
    width: 25px;
    height: 25px;
    background-color: white;
    border: solid 2px black;
    border-radius: 50%;
    margin-top: -90px;
    margin-left: -63px;
    z-index: 7;
    display: flex;
    justify-content: center;
}

.nostrilsInside {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    margin-top: 3px;
    z-index: 4;
}
Enter fullscreen mode Exit fullscreen mode

For the eyes I played with the border-radius on the corners to add some expression.

.eyes {
    background-color: black;
    height: 54px;
    width: 54px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; 
    border-top-right-radius: 13%;
        border-top-left-radius: 20%;
        border-bottom-right-radius: -38%;
}


.pupil {
    background-color: white;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    margin-top: -8px;
    margin-right: -4px;
}

Enter fullscreen mode Exit fullscreen mode

Alt Text

The sweater itself is almost the same. I change the background color to black and added tie fighters to the boxes on the top and bottom of the sweater.

This was challenging since I had to draw it from a image a try to reduce the detail and still represent the original creation.

Have you ever made something cool with CSS? Share it.

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay