Ugly sweater CSS: Gotta Cache Them All

I'm continuing my CSS ugly sweaters series. This time a Pokeball.

I reused the basic sweater structure from earlier projects. Then changed the colors for the theme. The basic version of the sweater is in this post. I won't go into much construction detail here. Below is what the final image looked like.

Updating the Sweater

I needed some styling changes for the Pokemon themed sweater.

1. Change the colors.
2. Change the icons. Replace the row of tie fighters to Pokemon theme icons.
3. Change the boxes. Alter row of boxes to match theme.

Changing the Colors

I found a style guide to use for colors. I used dev tools color picker to get colors here. I'm using CSS variables for some of the colors along with standard white, black and red.

:root {
    --pokeblue: #029bde;
    --pokeyellow: #fef002;
}

Changing The Icons

The basic sweater used rows of boxes as to mimic rows on an actual sweater. One row had icons in it the other row was boxes of alternating colors.

I wanted to replace the Star Wars ships with Pokemon energy type icons. I searched for icons to get an idea how to recreate them. Then I remembered Font Awesome. I found some icons for a energy bolt, water drops, and fire. Once I added color to the icons they didn't look right. The water didn't look right if it was yellow and too many colors threw off the aesthetic.

Tip
Use Color: to style Font Awesome icons. Background-color: effects the background of the icon. Normally it's transparent but if you change the Background-color you get a colored rectangle behind the symbol.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
.
.
.
<div class="stitch"><i class="fa fa-lg fa-bolt" aria-hidden="true"></i></div>

.fa {
  color: var(--pokeyellow);
  filter: drop-shadow(0 0 0.1rem black);
}

I decided to stick with yellow color for the icon row. But I didn't want yellow water or fire icons, so I needed another yellow element. Why not Pikachu.

I used ovals for the head and ears. The ears were thinned and rotated to resemble the character. I added a drop shadow to help make the icons stand out.

    <div class="stitch">
        <div class="iconHead">
            <div class="leftear"></div>
            <div class="rightear"></div>
        </div>
    </div>

.iconHead {
    background-color: var(--pokeyellow);
    height: 10px;
    width: 14px;
    border-radius: 40%;
    filter: drop-shadow(0 0 0.2rem black);
    margin-top: 5px;
}

.leftEar {
    transform: rotate(60deg);
    background-color: var(--pokeyellow);
    height: 4px;
    width: 12px;
    border-radius: 40%;
    margin-left: -5px;
    margin-top: -3px;
    position: absolute;
}

.rightEar {
    transform: rotate(-60deg);
    background-color:var(--pokeyellow);
    height: 4px;
    width: 12px;
    border-radius: 40%;
    margin-left: 5px;
    margin-top: -3px;
    position: absolute;
}

Changing Boxes to Pokeballs

Next I changed the row of colored boxes to pokeballs. This was done by adding a border-radius to make the squares round. The border color was changed to black and border style to solid.

I changed the box width from percentage to pixels. The percentage was better for responsiveness. A user could change the window size and the boxes would scale lengthwise to fill space. But since I wanted symmetric circles I had to maintain a consistent pixel size. This meant that I had to add more pokeball divs to fill the same space.

In the example the older code is commented out to show changes.

.redStitch {
    /* background-color: red;</S>
    border: 2px dotted cornsilk; */

    background-color: #f00;
    border: 2px solid #000;

    height: 10px;
    /* width: 10%; */
    width: 10px;

    display: flex;
    justify-content: center;
    align-items: center; 

        border-radius: 50%;
}

.transpStitch {
    /*background-color: #ffffff;
    border: 2px dotted cornsilk; */

    background-color: #fff;
    border: 2px solid #000;

    height: 10px;
    /*width: 10%; */
    width: 10px;

    display: flex;
    justify-content: center;
    align-items: center;

        border-radius: 50%;
}

That's the basic sweater body. In the sweater body between rows of pokeballs, I added the character div. Inside the character div is a div for a specific character for this post it has a class of Pokeball_red.

    <div class="character">
        <div class="pokeball_red">     
            <div class="centerLine"></div>
            <div class="centerCircle"></div>
            <div class="pokeball_white"></div>
        </div>
    </div>

As you can see the ball itself is just four divs. The pokeball_red contains all the other divs. It is a circle that makes the upper part of the ball. The lower part is a white semi-circle. The white part cover sup the lower half of the red circle.
The center line and center circle hide where the two halves meet.

.pokeball_red {
    background-color: red;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    border: 6px solid #000000;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
}

.pokeball_white {
    background-color: white;
    height: 125px;
    width: 250px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    margin-top: 125px;
}

.centerCircle {
    background-color: #ffffff;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 14px solid black;
    position: absolute;
}

.centerLine {
    background-color: #000000;
    height: 14px;
    width: 100%;
    position: absolute;
}

Final Pokeball

Wrap up

This was another fun challenge. It took a few shapes to make the ball. But It looks good with a low amount of divs.

Chris Jarvis | Fullstack Developer | Documentation

@jarvisscript

I made an ugly sweater Pokeball with CSS.
dev.to/jarvisscript/u… #CSS #css_art #uglt_sweater

21:02 PM - 14 Dec 2021