CSS Eggs are back.

Did you color Easter eggs when you were little?

Does your family color them now?

Maybe not now cause eggs prices are super high at the moment. They're too expensive to be hidden and lost in the yard or a tea pot, like we did when I was little. So why not make digital eggs?

I made CSS Eggs last year, it was fun so I've done it again. This early part of this article in the summary of the basic set up. The changes start at Updates New Colors.

Easter Best

A previous CSS series was based on Halloween sweaters. That project was modified for an Easter Theme. This is the basic sweater. The colors were changed and the items that were in the decorative boxes were replaced. Click to see how it was made.

A purple background with a row of light purple boxes. Under that a row of alternating green and blue boxes. Then, the sweater torso, a large open area of purple, followed by the rows of boxes in reverse order.

A character div was placed in that torso div. Inside the character div is a div for a specific character for this post, it has a class of "egg". Each Egg div will be colored using some version of a gradient.

It's time to put all your eggs in one basket.

<div class="torso"> 
`
`
`
   <div class="character">
     <div class="egg"></div>    
   </div character>
`
`
`
</div>

/* CHARACTER //////////////// */

.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
    margin: -10px 0 0 0;
}

.egg {
    background: 
    linear-gradient(to bottom right, var(--Pink), 
        white );
    height: 364px;
    width: 225px;
    border-top-right-radius: 51%;
    border-top-left-radius: 51%;
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 40%;
    border: 2px var(--Pink) solid;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: 30px; 
    margin-top: 10px;
    overflow: hidden;

}

The eggs are made from rectangles with border-radius added to the top and bottom. The bottom has less of a border-radius to keep it flatter.
The egg class has the overall shape and size that all the eggs will use. A second class was added to the eggs to change the colors or modify how they displayed.

Updates New Colors

The first thing was to change the back ground to a darker purple. That small change added contrast and improves the overall look with a few key strokes. Last year I tried for pastels.

:root {
    --MainPurple: #7d3b74;
    --DarkPurple: #1f1d21;
}

.main {
    background: var(--DarkPurple);
}

Painted Eggs

A linear gradient running top to bottom gives the eggs the look of a sun set.

    <div class="character">

           <div class="egg sunset"></div>

        <div class="egg sunset_reflection"></div>

    </div character>

:root {
    --MainPurple: #7d3b74;
    --DarkPurple: #1f1d21;
    --Yellow: #ffd700;
    --LgGreen: #00ff58;
    --Blue: #0028ff;
    --Pink: #ff00a7;
    --Purple: #d700ff;
    --Red: #ff0000f2;
}

.sunset {
  background: linear-gradient(
 var(--Pink),
 var(--Yellow), 
 var(--Purple), 
 var(--DarkPurple));
}

.sunset_reflection {
  background: linear-gradient(
 var(--Purple),
 var(--DarkPurple),
 var(--Pink),
 var(--Yellow));
}

The egg_layers Class changed from the color order. The pair of purple colors was put before the pink and yellow pair.

Next I used to-right to change the direction of the gradient. It now is vertical left to right, instead of top to bottom. The numbers are color stops. They specify where the colors stop and start.

.eggshape-gradient {
  background: linear-gradient
(to right, 
var(--Purple) 10% 20%, 
var(--DarkPurple) 30% 40%, 
var(--Pink) 50% 60%, 
var(--Yellow) 90%);
}

There Are Four Eggs

Finally a basic radial gradient. It expands from the center outward.

.radial_basic { 
background: radial-gradient
(var(--Purple), 
var(--Pink), 
var(--Red));
}

Finishing Touches

Count your chickens before the hutch

To finish it off chicks and bunnies were added to the design. They were just made using some keyboard symbols. The slight size difference is between font-size: 1.5rem and font-size: 2rem.

No more time for crying over spilled milk.

Looking back I should have used the same colors through out to make the examples clearer. I got interested in making it look good and not what might be easier to understand.

See my CSS gradient post where I illustrate different gradients if you want to learn more.

-$JarvisScript git push

1. For non English readers there several idioms references in the headings. These idioms were used in "Dare to Be Stupid" by Weird AL.

2. There are four eggs references a Captain Picard quote from Star Trek Next Generation.