CodeNewbie Community 🌱

Cover image for CSS Eggs are back.
Chris Jarvis
Chris Jarvis

Posted on • Originally published at dev.to

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

4 eggs, one egg that is purple at the top and changes to blue towards, one eggs is purple in the center and change to blue. One pink and white egg. one eggs goes from pink to white to blue

Last year's basket of eggs.

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.

four pink and white eggs.
Four Easter Eggs

<div class="torso"> 
`
`
`
   <div class="character">
     <div class="egg"></div>    
   </div character>
`
`
`
</div>
Enter fullscreen mode Exit fullscreen mode
/* 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;

}

Enter fullscreen mode Exit fullscreen mode

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.

Dark purple rectangle with rows of light purple boxes.

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

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

Enter fullscreen mode Exit fullscreen mode

Painted Eggs

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

Easter Egg colored to look like a sunset.

    <div class="character">

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

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

    </div character>
Enter fullscreen mode Exit fullscreen mode
: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));
}

Enter fullscreen mode Exit fullscreen mode

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

2 Easter Eggs colored like sunsets

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.

3 multi colored Easter Eggs


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

Enter fullscreen mode Exit fullscreen mode

There Are Four Eggs

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

4 colorful Easter eggs

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

Enter fullscreen mode Exit fullscreen mode

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.

four colorful eggs. baby chickens and bunnies drawn with symbols.

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
Enter fullscreen mode Exit fullscreen mode
  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.

Top comments (0)