純粋な CSS3 でペットの鶏のサンプルコードを実現

最近、CSS3に関する知識や記事をたくさん読んできましたが、CSS3はとても便利に使えると思います。CSS3を使用すると、ページレイアウトで不要なコードを大幅に節約できます。そこで最近、毎日世話をしているペットの鶏の見た目を CSS3 で模倣してみました。初めて書いたので細かいところがうまく処理できていないところもあります。

まず、最終的な効果の画像を見てみましょう。

私が書いた手順は次のとおりです。

まず、雲、鶏の体、冠、目、口、赤面、羽、鶏の足を HTML で書き出します。

<本文>
    <div class="content">
        <!-- 空に雲-->
        <div class="クラウド">
            <div class="content"></div>
        </div>
        <!--鶏冠-->
        <div class="crest"></div>
        <!--翼-->
        <div class="hand"></div>
        <!-- ペットの鶏の体 -->
        <div class="egg">
            <!--目-->
            <div class="目"></div>
            <!--赤面-->
            <div class="blush"></div>
            <!--口-->
            <div class="口"></div>
            <!--足-->
            <div class="フィート"></div>
        </div>

    </div>
</本文>

次は CSS スタイル設定です。

まず、linear-gradientを使用して全体の背景色を設定し、青空の色と草の色を設定し、要素を中央に配置するように設定します。

。コンテンツ {
        幅: 100%;
        高さ: 800ピクセル;
        背景: 線形グラデーション(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px);
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
        }

空の雲: 最初に特定の幅、高さ、背景色を指定し、border-radius を使用して境界の丸み効果を設定し、左上隅と右上隅のみを設定します。効果は以下のとおりです。

境界線の半径: 100% 100% 0 0;

::before および ::after 疑似要素を使用して完全なクラウドを描画します。

.content::before、
 .content::after {
                コンテンツ： '';
                位置: 絶対;
                下部: 0;
            }
  .content::before {
                幅: 40px;
                高さ: 40px;
                背景: 現在の色;
                左: -20px;
                境界線の半径: 100% 100% 0 100%;
            }
   .content::after {
                幅: 35px;
                高さ: 30px;
                背景: 現在の色;
                右: -20px;
                境界線の半径: 100% 100% 100% 0;
            }

次に影を使って 2 つの雲を描きます。

。コンテンツ、
.content::before、
.content::after {
                ボックスシャドウ: 
                -200px 50px 0 -5px rgb(191, 232, 252),
                 200ピクセル 60ピクセル 0 10ピクセル rgb(191, 233, 253);
            }

雲が実体化した。

次はペットの鶏です。まず、体を描きます。border-radius を使用して境界半径効果を設定します。卵の形を描き、背景色を設定し、box-shadow を使用して内側の影を設定します。

。卵 {
            幅: 220ピクセル;
            高さ: 260px;
            境界線の半径: 100%;
            背景: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213));
            位置: 絶対;
            ディスプレイ: フレックス;
            flex-direction: 列;
            アイテムの位置を中央揃えにします。
            ボックスシャドウ: 0 -10px 10px 3px rgba(211, 194, 194,0.4) インセット;
}

鶏冠と雲の書き方は似ています。

.クレスト{
            位置: 相対的;
            最高: -17%;
            幅: 30ピクセル;
            高さ: 25px;
            背景: rgb(233, 19, 19);
            境界線の半径: 50% 100% 20% 20%;
        }
  .crest::before、
  .crest::after {
            コンテンツ： '';
            位置: 絶対;
            下部: 0; 
            幅: 20px; 
            背景: rgb(233, 19, 19);
        }
  .crest::before {
            左: -5px;
            高さ: 20px;
            境界線の半径: 100% 50% 0 20%;
        }
  .crest::after {
            右: -15px;
            高さ: 15px;
            背景: rgb(233, 19, 19);
            境界線の半径: 20% 200% 20% 30%;
        }

目、翼、頬紅は、疑似要素を使用して左右に配置し、サイズを設定することで実現できます。変換を使用して口を 45° 回転させ、線形グラデーションを使用して鶏のくちばしの影の効果を設定します。

すべての CSS コードは次のとおりです (SASS プラグインをインストールしたので、SCSS で記述されています)。

体 {
    マージン: 0;
    幅: 100%;
    高さ: 100%;
    >.コンテンツ{
        幅: 100%;
        高さ: 800ピクセル;
        背景: 線形グラデーション(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px);
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
        >.クラウド{
            位置: 絶対;
            上位: 5%
            色: rgb(216, 242, 254);
            >.コンテンツ{
                幅: 50px;
                高さ: 50px;
                背景: 現在の色;
                境界線の半径: 100% 100% 0 0;
            }
            >.content::before、
            >.content::after {
                コンテンツ： '';
                位置: 絶対;
                下部: 0;
            }
            >.content::before {
                幅: 40px;
                高さ: 40px;
                背景: 現在の色;
                左: -20px;
                境界線の半径: 100% 100% 0 100%;
            }
            >.content::after {
                幅: 35px;
                高さ: 30px;
                背景: 現在の色;
                右: -20px;
                境界線の半径: 100% 100% 100% 0;
            } 
            >.コンテンツ、
            .content::before、
            .content::after {
                ボックスシャドウ: -200px 50px 0 -5px rgb(191, 232, 252),
                             200ピクセル 60ピクセル 0 10ピクセル rgb(191, 233, 253);
            }
        }
        >.卵{
            幅: 220ピクセル;
            高さ: 260px;
            境界線の半径: 100%;
            背景: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213));
            位置: 絶対;
            ディスプレイ: フレックス;
            flex-direction: 列;
            アイテムの位置を中央揃えにします。
            ボックスシャドウ: 0 -10px 10px 3px rgba(211, 194, 194,0.4) インセット;
            >.eye::before,
            .eye::after {
                コンテンツ： '';
                位置: 絶対;
                上位: 15%
                幅: 12px;
                高さ: 28px;
                境界線の半径: 100%;
                背景: 放射状グラデーション(白 1px、rgb(57, 56, 57) 5%);
            }
            > .eye::before{
                左: 28%;
            }
            >.eye::after {
                右: 28%;
            }
            >.blush::before、
            .blush::after {
                コンテンツ： '';
                位置: 絶対;
                上位: 30%
                幅: 25px; 
                高さ: 5px;
                変換: 回転(0度); 
                背景: rgb(250, 108, 127);
                境界線の半径: 100%;
                ボックスの影: 0 0 5px 4px rgb(250, 108, 127);
            }
            >.blush::before {
                残り：20%
            }
            >.blush::after {
                右: 20%;
            }
            >.口{
                位置: 絶対;
                上位: 32%
                幅: 20px;
                高さ: 20px;
                背景： 
                    線形グラデーション(135度, rgb(255, 207, 0) 50%, 
                    rgb(224, 184, 2) 50%);
                変換: 回転(45度);
                境界線の半径: 5% 15%;
            }
            > .feet::before、
            .feet::after{
                コンテンツ： '';
                位置: 絶対; 
                下: -12px;
                幅: 10px;
                高さ: 15px;
                境界線: 7px実線rgb(71, 49, 20);
            }
            > .feet::before{
                左: 60px;
                境界線の半径: 80% 100% 100% 50%;
                変換: 回転(-10度);
                境界線の色: 透明 透明 透明 rgb(71, 49, 20);
            }
            > .feet::after{
                右: 60px;
                境界線の半径: 100% 80% 50% 0%;
                変換: 回転(10度);
                境界線の色: 透明 rgb(71, 49, 20) 透明 透明 ;
            } 
        }
        >.クレスト{
            位置: 相対的;
            最高: -17%;
            幅: 30ピクセル;
            高さ: 25px;
            背景: rgb(233, 19, 19);
            境界線の半径: 50% 100% 20% 20%;
        }
        >.crest::before,
        .crest::after {
            コンテンツ： '';
            位置: 絶対;
            下部: 0; 
            幅: 20px; 
            背景: rgb(233, 19, 19);
        }
        >.crest::before {
            左: -5px;
            高さ: 20px;
            境界線の半径: 100% 50% 0 20%;
        }
        >.crest::after {
            右: -15px;
            高さ: 15px;
            背景: rgb(233, 19, 19);
            境界線の半径: 20% 200% 20% 30%;
        }
        > .手{
            位置: 相対的;
            上位: -5%;
        }
        > .hand::before、
        .hand::after{
            コンテンツ： '';
            位置: 絶対;
        }
        > .hand::before{
            左:-135px;
            幅: 20px;
            高さ: 80px;
            変換: 回転(15度);
            背景: rgb(250, 242, 242);
            境界線の半径: 100% 0 50% 50%;
        }
        > .hand::after{
            右: -110px;
            幅: 20px;
            高さ: 80px;
            変換: 回転(-15度);
            背景: rgb(250,242,242);
            境界線の半径: 50% 100% 50% 50%;
        }
    }
}

要約する

上記は、エディターが紹介した純粋な CSS3 ペットチキンのサンプルコードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: vagrant+virtualBoxで仮想マシンを構築する方法

>>: JavaScriptはオブジェクトの不要なプロパティを削除します