CSS 円形グラデーションで皿を作成方法 レストランメニューに

2021.09.24

CSSのグラデーション機能を利用し、お皿を作成してみました。
このお皿の上に、飲食店であれば、ページのメニューの文字を入れてみるのも面白いかなと思いました。

円形または楕円形グラデーション

グラデーションの範囲（末端図形・キーワード）

円形グラデーション、正確に言うと radial-gradient()（放射）となりますが、の範囲（末端図形）を指定するキーワードが4つあります。
より詳細が知りたい方は、MDN CSS カスケーディングスタイルシートをご覧ください。

キーワードを要約
  • closest-side　グラデーション範囲(円・楕円形の末端図形）は、中心から最も近い辺に内接
  • closest-corner　グラデーション範囲(円・楕円形の末端図形）は、中心から最も近い頂点に接する
  • farthest-side　グラデーション範囲(円・楕円形の末端図形）は、中心から最も遠い辺に内接
  • farthest-corner　既定値、グラデーション範囲(円・楕円形の末端図形）は、中心から最も遠い頂点に接する

しかし、文章での説明は分かりにくいため、実際に試してみます。

CODEPENで確認

以下を条件としています。
  • グラデーション範囲の図形は既定値のellipse（楕円）とする。
  • 単純に赤から青へのグラデーションで経由点は中間点とする。
  • 中心点はボックスの中心ではなく、左から30％、上から20％の位置とする。
  • グラデーション塗りされるボックスは長方形と正方形とそれぞれ作成する。

See the Pen gradation_description by blue moon (@blue-moon) on CodePen.

実際に目で見た方が分かりやすいと思います。
closest-から始まるキーワードの方がグラデーション範囲が狭いことが分かります。

下記では、放射状グラデーションの他、扇形グラデーションにもふれています。

テキスト文字を斜め分割で色を変更、複数分割で色を変更・グラデーション、放射状に色を変更・グラデーションする方法
conic-gradient()（扇形）、radial-gradient()（放射）によって、テキスト文字をグラデーションする方法について説明します。背景をグラデーションにしテキストで切り抜きます。
b-moon.net
2021.09.19

では、次項から実際にグラデーションで作成したものを見てみてください。

グラデーションでお皿を作成

CODEPEN

「Run Pen」をクリックしてください。

See the Pen plate_1 by blue moon (@blue-moon) on CodePen.

HTMLファイル

<body>
  <div class="menu">
    <ul>
      <li class="plate">
        <a href=""><p>lunch</p></a>
      </li>
      <li class="plate">
        <a href=""><p>dinner</p></a>
      </li>
      <li class="plate">
        <a href=""><p>dishes</p></a>
      </li>
      <li class="plate">
        <a href=""><p>drink</p></a>
      </li>
    </ul>
  </div>
</body>

CSSファイル

body {
  color: #444;
  background-color: #fffafa;
}

ul {
  margin: 10px auto 0;
  padding: 0;
  width: 250px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  margin: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(#fcfcfc, #fcfcfc 43%, #e7e7e7 51% 52%, #fff 53% 66%, #e0e0e0 70%, #c0c0c0);
  filter: drop-shadow(2px 3px 4px #888);
  display: flex;
  justify-content: center;
  list-style: none;
}

a {
  margin-top: 30px;
  width: min-content;
  height: 20px;
  text-decoration: none;
  cursor: pointer;
}

p {
  text-align: center;
  line-height: 0;
  font-size: 12px;
  font-weight: 700;
  color: transparent;
  background: #000;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 2px 2px 2px #fff, 0 0 #808080;
}

li:hover {
  animation: pulse 2s ease-in-out forwards;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

補足説明

グラデーションの説明
  • グラデーションの中心は既定値である中心
  • 0% ～ 43％まで#fcfcfc(ほぼ白)
  • 43％ ～ 51％までは#fcfcfcから#e7e7e7（やや灰色い無彩色）へとグラデーション
  • 51％ ～ 52％まで#e7e7e7
  • 52 ％ ～ 53％まで#e7e7e7から#fff（白）へとグラデーション
  • 53% ～ 66%まで#fff
  • 66％ ～ 70％までは#fffから#e0e0e0（#e7e7e7より若干暗めの、やや灰色い無彩色）へとグラデーション
  • 70％ ～ 100%までは#e0e0e0から#c0c0c0（#e0e0e0より若干暗めの、やや灰色い無彩色）へとグラデーション

円の中心から43%までほぼ白ってなってるけど、実際は違うように見えるけど…

グラデーション塗りの範囲が、既定値の「farthest-corner」が適用されているためです。
下記の図を見ていただけると、分かりやすいと思います。

radial-gradient

グラデーション塗りされる範囲（キーワード）を「closest-side」にすれば、上記図の水色の部分とグラデーション塗りされる範囲（上記図のピンクの点線）が一致します。
次項でこのキーワードに変えて、同じようなお皿を作成してみます。

テキスト切り抜き

Pタグの背景をグレーにし、テキストの形で背景を切り抜いています。
あわせて、テキストシャドウを追加することで、お皿に彫られたような仕上がりになっています。

グラデーションでお皿を作成（キーワードを変更）

CODEPEN

See the Pen plate_2 by blue moon (@blue-moon) on CodePen.

CSSファイル

変更したのは、liタグのbackgroundプロパティの部分のみで、同じようなものができました。

li {
/* 省略 */
   background: radial-gradient(closest-side, #fcfcfc, #fcfcfc 60%, #e7e7e7 71% 73%, #fff 75% 94%, #e0e0e0 98%, #c0c0c0);
/* 省略 */
}

色は前述と同じですが、キーワードを既定値の「farthest-corner」から「closest-side」に変更したため、色の経由点（％）も変更しています。
但し、グラデーション塗りの範囲と円の大きさが一致するため、最後のグラデーションが急激に変化してしまいました。

グラデーションの説明
  • グラデーションの中心は既定値である中心
  • 0% ～ 60％まで#fcfcfc(ほぼ白、無彩色)
  • 60％ ～ 71％までは#fcfcfcから#e7e7e7（やや灰色い無彩色）へとグラデーション
  • 71％ ～ 73％まで#e7e7e7
  • 73％ ～ 75％まで#e7e7e7から#fff（白）へとグラデーション
  • 75% ～ 94%まで#fff
  • 94％ ～ 98％までは#fffから#e0e0e0（#e7e7e7より若干暗めの、やや灰色い無彩色）へとグラデーション
  • 98％ ～ 100%までは#e0e0e0から#c0c0c0（#e0e0e0より若干暗めの、やや灰色い無彩色）へとグラデーション
タイトルとURLをコピーしました