DEV Community

Cover image for More CSS Easter Eggs
Chris Jarvis
Chris Jarvis

Posted on • Edited on

More CSS Easter Eggs

Alvaro Montoro post's "Drawing an egg with CSS" had a tip to make the eggs look more egg like. I took his advice to modify the oval I used in previous egg posts. CSS Eggs are Back

After reading his post I changed the Border radius which made the egg look more like an egg. See the code changes.

.egg {

    background: 
    height: 364px;
    width: 225px;


    border-top-right-radius: 51%;
    border-top-left-radius: 51%;
    border-bottom-left-radius: 40%;
    border-bottom-right-radius: 40%;
}

Enter fullscreen mode Exit fullscreen mode

Changed to this.

.egg {

    border-radius: 100% / 125% 125% 80% 80%;
}

Enter fullscreen mode Exit fullscreen mode

Changes these eggs...

four colorful Easter eggs

..to this. That gave them a more realistic slope.

four colorful Easter eggs with a more realistic shape.

Time to paint the eggs

Looks like I need to paint some more. I stated at the end of my last post I should have used the same gradient through out the article. That's what I'm doing here.

Same gradient Pink, Yellow, Purple, Dark Purple. The only change between eggs, is the direction of the gradient.

Starting at default of top to bottom and moving clockwise around the egg.

<div class="character">

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

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

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

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

    </div character>
Enter fullscreen mode Exit fullscreen mode
.egg_gradient_bottom {
  background: linear-gradient(
    var(--Pink), 
    var(--Yellow), 
    var(--Purple), 
    var(--DarkPurple));
}

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


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

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

Enter fullscreen mode Exit fullscreen mode

four Easter Eggs

The linear-gradient(to right, Changes the direction to flow from left to right and Pink to Dark Purple. The to direction controls which way the colors flow. It's where you want the final color to end.

You notice that the first egg is the same gradient as the previous post.

Easter Egg colored to look like a sunset.

This was a nice way to improve my CSS eggs and fix a couples thing I didn't like about the previous post.

Thanks Alvaro Montoro for the tip.

Thanks for reading.

Top comments (2)

Collapse
 
danieltott profile image
Dan Ott

Fun - thanks for posting!

I bet radial-gradient would make some cool-looking easter eggs next year 😁

Collapse
 
jarvisscript profile image
Chris Jarvis

I tried a few, Just wasn't happy with what I had. I need to work with them more to get the results I want. So maybe next year.