ホームページ >ウェブフロントエンド >CSSチュートリアル >Pure CSS Pumpkin の作り方。

Pure CSS Pumpkin の作り方。

Barbara Streisandオリジナル: 2024-12-29 11:48:17728ブラウズ

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
</head>
<body>
    <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 タグはコンテンツと同じ大きさしかなくなり、楕円形がページの上部の中央に配置されることになります。これが次のようなものです。

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

.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 に設定します。これは次のようになります。

How I made a Pure CSS Pumpkin.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
</head>
<body>
    <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 に設定する必要があります。三角形を実際に塗りつぶしていない代わりに、非常に大きな境界線があるので、塗りつぶされているように見えます。これらすべてを経て、私たちは目を手に入れました。

How I made a Pure CSS Pumpkin.

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

.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 にフィードバックを残してください。

以上がPure CSS Pumpkin の作り方。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html edge define for while using Length finally default this position margin border background transform Other

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS のネストされた @media ルールに対するブラウザーのサポートはどの程度一貫していますか?次の記事：CSS のネストされた @media ルールに対するブラウザーのサポートはどの程度一貫していますか?

続きを見る