CSS复活节彩蛋回来了
#css #教程 #前端 #艺术

小时候您是否为复活节彩蛋着色？

您的家人现在为他们着色吗？

现在可能不是因为目前鸡蛋价格超高。就像我小时候一样，它们太昂贵了，无法在院子里或茶壶中丢失和丢失。那么为什么不制作数字鸡蛋？

我制作了CSS Eggs last year，这很有趣，所以我又做了。基本设置摘要中本文的本文。更改从Updates New Colors。

开始

复活节最好

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

去年的鸡蛋篮子。

以前的CSS系列是基于万圣节毛衣。该项目已被修改为复活节主题。这是基本的毛衣。更改了颜色，并更换了装饰盒中的物品。 Click to see how it was made.

带有一排浅紫色盒子的紫色背景。在那排交替的绿色和蓝色盒子下。然后，毛衣躯干是一个巨大的紫色区域，然后是一排排的盒子。

将character div放置在该torso div中。角色div内部是该职位的特定字符的DIV，它具有一类“鸡蛋”。每个蛋div将使用某种梯度的某种版本进行颜色。

是时候把所有鸡蛋都放在一个篮子里了。

four pink and white eggs.

四个复活节彩蛋

<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;

}

鸡蛋是由矩形制成的，顶部和底部都添加了border-radius。底部的边界是长袍的较少，可以使其更平坦。
鸡蛋类具有所有鸡蛋都将使用的整体形状和大小。将第二类添加到鸡蛋中以改变颜色或修改它们的显示方式。

更新新颜色

第一件事是将后台更改为深紫色。这种小变化增加了对比度，并通过一些关键笔触改善了整体外观。去年我尝试了粉彩。

Dark purple rectangle with rows of light purple boxes.

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

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

油漆的鸡蛋

线性梯度在上到底部的线性梯度使鸡蛋具有太阳的外观。

Easter Egg colored to look like a sunset.

    <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));
}

egg_layers类从颜色顺序变化。这双紫色颜色是在粉红色和黄色面前放置的。

2 Easter Eggs colored like sunsets

接下来，我使用to-right改变了梯度的方向。现在它是从左到右的垂直垂直的，而不是上到底的。数字是颜色停止。他们指定颜色停止并开始的位置。

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%);
}

最后是基本的径向梯度。它从中心向外扩展。

4 colorful Easter eggs

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

完成触摸

将其从小鸡和兔子中添加到设计中。它们只是使用一些键盘符号制成。 font-size: 1.5rem和font-size: 2rem之间的尺寸差异很小。

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

回顾一下，我应该在整个过程中都使用相同的颜色，以使示例更加清晰。我有兴趣使它看起来不错，而不是更容易理解的东西。

请参阅我的CSS gradient post，如果您想了解更多信息，我会说明不同的渐变。

-$JarvisScript git push