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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay