DEV Community

Cover image for Ugly sweater CSS: The Child Christmas outfit
Chris Jarvis
Chris Jarvis

Posted on • Edited on

5 2

Ugly sweater CSS: The Child Christmas outfit

This is a short Christmas Eve post. Life has been busy this past couple weeks so I haven't finished any new CSS sweaters. So I'm updating last years the Child sweater.

Here's what the final Grogu sweater looked liked.

Alt Text

I learned some CSS in the year since this version was made. All I'm doing to update it is change the colors and add some Holiday cheer.

Here are the new colors for the cradle and the clothes.

:root {
    --MainRed: #a42624;;
    --DarkRed: #611913;
    --Green: #3d8425;
}
Enter fullscreen mode Exit fullscreen mode

I changed Grogu's clothes from a robe to a sweater and added some snowflakes to it.

    <div class="childRobe">
       <div class="childHands"></div>
      <div class="snow"> * * * * </div>
       <div class="childHands"></div>
    </div>
Enter fullscreen mode Exit fullscreen mode
.childRobe {
    background-color: var(--MainRed);
    height: 40px;
    width: 88px;
    margin-top: -70px;
    margin-right: -108px;
    display: flex;
    justify-content: space-between;
}

.snow {
    color: white;
    font-size: 1em;
    margin-top: -6px;
}
Enter fullscreen mode Exit fullscreen mode

To finish it off I added a hat. This took the longest time of the updates. I had to add a new div without changing the positions of the rest of divs that make the Character. I placed the hat div before all the character divs and used Z-index to force the hat to show on top of ever thing.

.hat {
    background-color: var(--MainRed);
    height: 32px;
    width: 58px;
    border: 1px solid black;
    border-bottom: 2px solid white;
    margin-top: -442px;
    margin-right: 20px;
    border-top-left-radius: 62%;
    border-top-right-radius: 62%;
    z-index:2;
}
Enter fullscreen mode Exit fullscreen mode

Grogu in a hovering cradle. Grogu is a alien child.

And there is the final Christmas version of the Child made with CSS. It was fun to update an old project with new skills. I hope you enjoyed it.

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay