Pure CSS Pumpkin の作り方。

ハッピーハロウィーン。不気味な季節の雰囲気を味わうために、この 100% CSS かぼちゃを最近作りました。どうやって作ったのか知りたい人もいるでしょう。

ペンを参照
100% CSS のパンプキン by micfun123 (@micfun123)
CodePen で。

それでは、それがどのように機能するかを説明しましょう。コードだけが必要で、プロセスを見たくない人のために、ここに CodePen があります。

私はこれまでこのようなことをしたことがなかったので、最初の目標は 3 つのオレンジ色の楕円形でした。

そこで、HTML から始めました。

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pumpkin</title>
    <link rel="stylesheet" href="pumpkin.css">


    <div>



<p>The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.<br>
</p>

<pre class="brush:php;toolbar:false">body {
display: flex;
justify-content: center; 
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}  
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}  
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}

これにより、3 つの完璧なオレンジ色の楕円形が並べて出力されます。 ここで何が起こっているのでしょうか？ まず、body タグを使用して、pumpkin div をページの中央に配置します。最初の 3 行でこれを実行します。次に、高さを使用します: 100vh; body タグが画面の 100% を占めていることをコードに伝えます。これがないと、body タグはコンテンツと同じ大きさしかなくなり、楕円形がページの上部の中央に配置されることになります。 これが次のようなものです。

次に、円を重ねたいと思います。これは、左右の楕円に負のマージンを与えることで非常に簡単に行うことができます。

.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}

ここでは、右のオベルを左に 45 ピクセル移動し、左のオベルを右に 45 ピクセル移動します。 (写真の保存方法がまだ決まっていないので、この段階の写真は追加しません)

ここからは難しい部分です (Google がかなり使用されました)

.stem {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
width: 30px;
height: 60px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}
.curve{
position: absolute;
top: -47px;
left: 43%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
transform: rotate(-15deg);
width: 30px;
height: 30px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}

つまり、 width 、 height 、 border-radius 、 background-color は一目瞭然です。 だから私はそれをスキップするつもりです。 位置から開始: 絶対。 これは、Web サイトのフローから div を削除することを意味します。代わりに、最も近いアンカー ポイントに基づきます。 位置: 絶対; 任意の要素の上に配置できます。次に、Stem を水平方向に中央に配置するには、left: 50% とtransform: translationX(-50%); を使用します。考えてみれば当然のことですが、左から開始することを考える必要があります。 50% カボチャの div 内のステムの左端を中央に配置します。ヘタの中心がカボチャの中心に来るようにします。変換: 変換X(-50%);ステムをステム サイズの半分だけ左側に戻します。上: -47px;ほぼ期待どおりの結果をもたらします。上端を 47 ピクセル上に移動します。 z-index は私が最近見つけたもので、基本的には要素の高さです。 Z インデックスをカボチャの後ろに配置したいので、カボチャのデフォルトのインデックスが 0 であるのに対し、Z インデックスを -1 に設定します。これは次のようになります。

最後に目、口、背景です。まずは目から始めましょう

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pumpkin</title>
    <link rel="stylesheet" href="pumpkin.css">


    <div>



<p>The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.<br>
</p>

<pre class="brush:php;toolbar:false">body {
display: flex;
justify-content: center; 
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}  
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}  
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}

これは、border-width: 0 50px 41px 30px; よりも怖く見えます。ここで正方形の各辺の長さを設定します。上から始まり時計回りに進みます。したがって、正方形の上部の長さは 0 になります。これは、三角形には 3 つの辺があるためです。このトリックを使用すると、三角形を構成する辺の 1 つを削除できます。次に、右側の長さは 50 ピクセル、下側は長さ 50 ピクセル、左側は長さ 30 ピクセルになります。右目の場合は、左右の値を反転して、別の方向を指すようにします。 境界線の色: 透明 透明 #000000 透明; それでは、なぜ透明なものがこんなにたくさんあるのか疑問に思うかもしれません。ここには実際には 3 つの三角形があることがわかります (そのうちの 1 つは幅が 0 であるため存在しません)。一番下の三角形に色を付けたいだけなので、他の 3 つは透明に設定します。 ボーダースタイル: ソリッド;三角形を塗りつぶしたいので、スタイルを Solid に設定する必要があります。三角形を実際に塗りつぶしていない代わりに、非常に大きな境界線があるので、塗りつぶされているように見えます。これらすべてを経て、私たちは目を手に入れました。

最後のステップは笑顔です。

.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}

border-top-left-radius: 110px;そして border-top-right-radius: 110px;上隅の丸みをどの程度にするかを定義します。これは半円を作るビットですが、これにより曲線が上部に配置されます。これを修正するために、変換を追加しました。中心から少しずれるようにします。 最終結果は次のとおりです。

ペンを参照
100% CSS のパンプキン by micfun123 (@micfun123)
CodePen で。

これが最も美しいソリューションや最も効率的なソリューションではないことは認めますが、CSS で何かを描画しようとしたのは初めてで、かなり満足しています。いつものように、お気軽に Discord または reddit にフィードバックを残してください。