エッグハント

あなたが小さいときにイースターエッグを着色しましたか?あなたは、現在彼らに色をつけますか?私が成長していたとき、子供たちは色の卵形のポスター板を持っていました.それから、彼らはイースターシーズンの間モールに彼らを掛けるでしょう.いくつかの家族がモールを歩いて卵を見つける.
私は、速いポストのために2、3のCSS卵を作りました.私は、CSSグラデーションを使用する4つの異なる方法を示すつもりです.

イースターベスト

前のCSSシリーズからハロウィンセーターを変更しました.これは基本的なセーターです.私は色を変えて、箱にあったアイテムを取り除きました.
紫色のボックスの行と紫色の背景.その下で緑と青のボックスを交互に行.それから、セータートルソー(紫の大きい開いた領域)は、逆順に箱の列に続きました.
Aを置くcharacter div その中でtorso div . 文字の内部には、このポストの特定の文字のdivです.各卵のdivグラデーションのいくつかのバージョンを使用して着色されます.

卵を加える

<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 上部と下部に追加.底は、それをより平らにしておくために境界半径の少ないです.
卵クラスは、すべての卵が使用される全体的な形とサイズを持っています.私は色を変更するには、卵に2番目のクラスを追加します.
線形勾配は、私が加えた主な卵のために上から下へ行きますto bottom right いくつかのグラデーションは右上隅に開始し、左下隅に移動します.

紫色の卵の一番上のグラデーション

The egg_purple クラスは2番目の色の背景を追加します.これは、紫色から青への一番上への一番上のフェードです.30 %の停留所は紫色のスタートがトップに青に近い変更を持っている.通常、変更は途中です.ピクセルまたはパーセントを使用して設定できます.

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

.egg_purple {
    background: 
linear-gradient(
      var(--Purple) 30%, 
      var(--Blue)
    );
border: 2px var(--Purple) solid;

}

放射勾配

   <div class="egg egg_radial"> 

.egg_radial {
    background: 
radial-gradient(
      var(--Purple) 30%, 
      var(--Blue)
    );
border: 2px var(--Purple) solid;

}

これは、ライナー勾配卵と同じ色を使用していますが、今回は最初の色が卵の中心で始まり、円形のパターンで外側に広がります.これはラジアルグラデーションです.

三色

この卵は卵のクラスと同じ斜めの色を使用しますが、最後に3番目の色を追加します.また、その右側のグラデーションに合わせて青の右側の色があります.

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

.egg_3color {
  background: linear-gradient(to bottom right, var(--Pink), 
        white, var(--Blue));
  border-right: 2px var(--Blue) solid;
}

レビュー

これは楽しい.もっとグラデーションのグラデーションでプレイする時間がもっとあればいいのに.私が時間があれば、私はより深いダイビングをして、色で増分変化を示します.私が彼らをもう一つ考えることができるならば、私は将来のポストで勾配を再訪します.
CSSで何かクールなことがありますか?それを共有する.

-$JarvisScript git push

クリスJarvisは、フルスタック開発者

dev.to/jarvisscript/c… CSSグラデーションブログ.
午後22時28分