Help us understand the problem. What is going on with this article?

HTML + CSSでリアルなタピオカを作る

最近、[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●●リアルな眼球を描く。HTMLとCSSだけで。のようなHTML+CSSだけで作る表現が流行っていた(?)ので自分も作ってみました。

完成品はこちら

See the Pen Only HTML + CSS Tapioca by Nishihara (@Nishihara) on CodePen.

概要

HTML + CSSタピオカ完成画像

そこまで複雑なHTMLやCSSのトリックは使っていません。background: radial-gradient()filter: bluer()を使ってグラデーションを表現しつつ、transformプロパティで変形させたものを組み合わせて作っています。

タピオカ本体を作る

まずは、タピオカの本体部分のHTMLとCSSを作成します。

<div class="wrapper">
  <div class="tapioka"></div>
  <!-- 中略 -->
</div>
.wrapper{
  width: 130px;
  height: 120px;
  position: relative;
}
.tapioka{
  width: 130px;
  height: 120px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side at 49% 49%,rgba(4,4,0,1) 0%,rgba(25,21,21,1) 75%,rgba(90,77,77,1) 92%,rgba(150,135,135,0.6) 98%);
}

タピオカ本体部分

タピオカ全体を包むラッパーを作ります。ラッパーはタピオカの大きさと同じにしています。positionを使って配置していくのでラッパーにはposition: relativeを指定しています。

タピオカ本体は楕円を作り、backgroundradial-gradientを使って円形グラデーションにしています。わずかに扁平な楕円にしているのは、タピオカの自重により少し潰れているからです。

立体感を出すためにグラデーションの中心は1%ずつ左上にずらしています。グラデーションの端は透過させ、タピオカ表面にある水分を表しています。

ハイライトをいれていく

タピオカは表面がつるっとして、水分を含んでいるので反射をしています。それを表現するためにハイライトを入れていきます。

左側円形のハイライト

まず、左側に円形のハイライトを入れます。

<div class="highlight1"></div>
.highlight1{
  position: absolute;
  top: 40%;
  left: 8%;
  z-index: 1;
  width: 12px;
  height: 15px;
  background: radial-gradient(farthest-side at center,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,0) 100%);
  border-radius: 50%;
  transform: skewY(-10deg) skewX(-5deg) rotate(8deg);
  filter: blur(0.7px);
}

タピオカ本体に1つ目のハイライトを入れた図

ハイライトの位置は相対的に決めています。ハイライトも少し楕円形にし、外側は完全透過になるような白色のグラデーションで着色しています。

transformプロパティのskewを使って平行四辺形に変形させ、さらにrotateを使って回転させています。

ここでもブラーを使っていますが、タピオカ表面はつやつやしていても、完全な平坦ではなく、微細なデコボコがあります。そのため反射のハイライトは少しボカしたようなハイライトになります。(参考:鏡面ハイライト - Wikipedia

線状のハイライトを入れる

続いて、左上の線状のハイライトを入れます。

<div class="highlight2"></div>
.highlight2{
  position: absolute;
  top: 14%;
  left: 18%;
  z-index: 1;
  width: 44px;
  height: 20px;
  border-radius: 50%;
  border-top: 5px solid #fff;
  transform:rotate(-70deg) scaleX(0.9) scaleY(1.5) skewY(18deg);
  filter: blur(0.6px);
}

タピオカ本体に2つ目のハイライトを入れた図

左上の線状のハイライトは長方形を作り、その上辺のみに5pxの白いボーダーを入れています。それにborder-radiusをかけて弧状にし、さらにtransformをこねくり回して変形させています。先程と同様にブラーを少しかけます。

右下のハイライトを入れる

これだけでもつやつや感が出てきましたが、さらに出すために右下にも入れていきます。

<div class="highlight3"></div>
.highlight3{
  position: absolute;
  top: 59%;
  left: 57%;
  z-index: 1;
  width: 24px;
  height: 24px;
  background: radial-gradient(farthest-side at center,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 65%,rgba(255,255,255,0) 100%);
  border-radius: 50%;
  transform: skewY(-20deg) rotate(8deg);
  filter: blur(0.6px);
  opacity: 1;
}

タピオカ本体に3つ目のハイライトを入れた図

こちらも最初にいれたハイライトと同様の手順で入れています。だいぶつやつやしてきました。

下部のハイライトを入れる

今回は白い床(?)に置かれている想定なので、表面には床面も反射で写り込みます。それを描き込んでいきます。

<div class="highlight4"></div>
.highlight4{
  position: absolute;
  top: 38%;
  left: 0%;
  z-index: 1;
  width: 122px;
  height: 90px;
  background: radial-gradient(farthest-side at center,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 64%,rgba(255,255,255,0) 100%);
  border-radius: 50%;
  transform: rotate(8deg);
  filter: blur(2px);
  opacity: 0.15;
}

タピオカ本体に4つ目のハイライトを入れた図

opacity: 0.15の大きな楕円形をとはみ出すように下部に入れています。他の比べて存在感は薄いですが、これを入れるとなんか立体感が出ます。

ハイライトの描き込みは以上です。

タピオカ内にシャドウを入れる

光あるところに影はあるので、ハイライトと同じ用にシャドウを入れていきます。

<div class="shadow"></div>
.shadow{
  position: absolute;
  top: 69%;
  left: 64%;
  z-index: 1;
  width: 51px;
  height: 18px;
  border-radius: 50%;
  border-top: 1px solid #211;
  transform:rotate(130deg) ;
  filter: blur(1px);
}

タピオカ本体にシャドウを入れた図

一見、どこに入れたか分かりづらいですが、右下のところが少し黒くなっているかと思います。球体でつやつやした表面なので陰影はつかないですが、表面の水分が屈折により暗くなる部分が生じます。その部分にシャドウを入れました。

タピオカ自体の影をつける

最後に、床に落ちるタピオカ自身の影をつけます。

<div class="dropshadow"></div>
.dropshadow{
  width: 90px;
  height: 30px;
  position: absolute;
  left: 50%;
  top: 85%;
  z-index: -1;
  transform: translateX(-50%);
  background: radial-gradient(farthest-side at center,rgba(20,0,10,0.8) 25%,rgba(0,0,0,0) 100%);
  filter: blur(0.5px);
}

タピオカ本体の影を落とした図

もう説明は不要かもしれませんが、これまでのハイライトと同じようにグラデーションで丸い影を落としています。left: 50%で中央に配置し、transform: translateX(-50%)で要素の半分の大きさだけ戻して真ん中に配置しています。

これでリアルなタピオカの完成です。

メイキングのgifアニメ

最後に

HTMLとCSSだけタピオカを表現しなくてはいけない場面など、おそらくないのです。CSS芸の範疇です。画像なり、SVGなりで表現した方が豊かで圧倒的に楽です。

なお、途中途中で物理現象をもとにしたハイライトなどの説明は行っていますが、あくまで、それっぽく見えるような絵作りの工夫です。そのため厳密にそのような現象が起こっているとは限りません。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away