HTML + CSSでリアルなビールを作る

新年あけましておめでとうございます。
今年もよろしくおねがいします。かんぱーい！

完成品はこちら

See the Pen Pure CSS Beer by Nishihara (@Nishihara) on CodePen.

概要

ビールの図形自体は左右対称なので、半分作って残り半分はtransform: scaleX(-1)で反転しています。左半分のHTMLは以下のようになっています。

<div class="beerLeft">
  <div class="beerLeftSkew">
    <div class="beerBody"></div>
    <div class="bubbleTop"></div>
    <div class="beerGlassBottom"></div>
    <div class="beerBodyBottom"></div>
    <div class="beerGlassEdge"></div>
    <div class="bubbleBody"></div>
    <div class="beerBodyTop"></div>
  </div>
</div>

ななめのグラス

ななめの部分はtransform: skew(7deg)で平行四辺形に変形させたあと、親要素（.beerLeft）のoverflow: hiddenで隠しています。.beerLeftSkewでななめに変形させているので、子要素たちも同じようにすべて変形します。

.beerLeft {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.beerLeftSkew {
  width: 100%;
  height: 100%;
  transform: skew(7deg);
  transform-origin: 0 0;
  overflow: hidden;
}

上部の泡

泡部分は楕円形と左側（グラスの端）が少しだけ暗い矩形を組み合わせて作っています。filter: blur(5px)を矩形にかけることでぼかして境界をなじませています。

.bubbleTop {
  width: 200%;
  height: 22%;
  position: absolute;
  top: 5%;
  left: 0;
  background-color: mix(#e9e6e1, #e9e6e1, 80%);
  border-radius: 50%;
}

.bubbleBody {
  width: 100%;
  height: 20%;
  overflow: hidden;
  position: absolute;
  top: 15%;
  left: -5%;
  background-image: linear-gradient(
    90deg,
    mix(#d9cfc3, #e9e6e1, 80%) 0%,
    #e9e6e1 30%
  );
  filter: blur(5px);
}

グラスの底

グラスの底はグラデーションで表現しています。左下をborder-radiusで曲線にしています。

.beerGlassBottom {
  width: 100%;
  height: 10%;
  position: absolute;
  top: 89%;
  left: 0;
  border-bottom-left-radius: 35%;
  background-image: linear-gradient(
    90deg,
    #a77619 0%,
    #fffde6 10%,
    #fffef9 30%,
    mix(#fffef9, #dfb336, 80%) 40%,
    #dfb336 55%
  );
  filter: blur(2px);
}

さらにビールの底をビールより少し暗い色で楕円をつくり、ブラーでぼかしています。

.beerBodyBottom {
  width: 208%;
  height: 4%;
  position: absolute;
  top: 87%;
  left: -4%;
  background-color: mix(#fbc80b, #834b00, 80%);
  border-radius: 50%;
  filter: blur(5px);
}

さいごにグラスの底の一番下部のエッジ部分を少し暗い線をいれて屈折を表現します。

.beerGlassEdge {
  width: 200%;
  height: 15%;
  position: absolute;
  top: 84%;
  left: 0%;
  border-bottom: 2px solid #a77619;
  border-radius: 25%;
  filter: blur(2px);
}

泡の底

上部の泡部分の底にも影をつけて立体感をだします。

.beerBodyTop {
  width: 208%;
  height: 8%;
  position: absolute;
  top: 30%;
  left: -4%;
  background-color: mix(#fbc80b, #834b00, 80%);
  border-radius: 50%;
  filter: blur(5px);
}

これでビール本体は完成です。

気泡をいれる

立ち上る気泡をいれていきます。

<div class="beerLeft">
  <div class="beerLeftSkew">
    <div class="beerBody"></div>
    <div class="bubbleTop"></div>
    <div class="beerGlassBottom"></div>
    <div class="beerBodyBottom"></div>
    <div class="beerGlassEdge"></div>
    <div class="bubbles bubbles1"></div>
    <div class="bubbles bubbles2"></div>
    <div class="bubbles bubbles3"></div>
    <div class="bubbles bubbles4"></div>
    <div class="bubbles bubbles5"></div>
    <div class="bubbles bubbles6"></div>
    <div class="bubbleBody"></div>
    <div class="beerBodyTop"></div>
  </div>
</div>

.bubbles要素が泡です。基本的には同じかたちですがアニメーションを少しずつわけています。

.bubbles {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #fcd044;
  border-radius: 50%;
  border: 1px solid #c17b11;
  filter: blur(1.5px);
  box-shadow: 0px 2px 1px #af7101;
  animation-name: bubble;
  animation-duration: 1200ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
  &:before {
    content: "";
    width: calc(100% + 4px);
    height: 100%;
    position: absolute;
    top: -15%;
    left: -2px;
    border-radius: 50%;
    border-bottom: 3px solid #d99b01;
  }
  &:after {
    content: "";
    width: 80%;
    height: 80%;
    position: absolute;
    top: -5%;
    left: 10%;
    border-radius: 50%;
    background-color: #faec87;
  }
}

@keyframes bubble {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  8% {
    transform: translate(10px, -20px);
    opacity: 1;
  }
  100% {
    transform: translate(20px, -300px);
    opacity: 0;
  }
}

泡の作り方はタピオカと同じような作りで、その簡易版です。

アニメーションは左右にゆられながら最後は透明になるアニメーションです。これを開始位置とアニメーションの時間をずらして実行させています。

.bubbles1 {
  top: 72%;
  left: 35%;
}
.bubbles2 {
  top: 75%;
  left: 48%;
  transform: scale(0.6);
  animation-delay: -150ms;
}
.bubbles3 {
  top: 63%;
  left: 57%;
  transform: scale(0.8);
  animation-delay: -350ms;
}
.bubbles4 {
  top: 87%;
  left: 44%;
  transform: scale(0.7);![Screen Shot 2020-12-31 at 23.37.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/034bd638-e7fb-0c2e-fc16-5115ac7a45c1.png)

  animation-delay: -550ms;
}
.bubbles5 {
  top: 82%;
  left: 35%;
}
.bubbles6 {
  top: 78%;
  left: 48%;
  transform: scale(0.6);
  animation-delay: -650ms;
}

右半分と微調整

これで半身ができたので、同じようなHTMLで左側もつくります。

<div class="beerRight">
  <div class="beerRightSkew">
    <div class="beerBody"></div>
    <div class="bubbleTop"></div>
    <div class="beerGlassBottom"></div>
    <div class="beerBodyBottom"></div>
    <div class="beerGlassEdge"></div>
    <div class="bubbles bubbles7"></div>
    <div class="bubbles bubbles8"></div>
    <div class="bubbles bubbles9"></div>
    <div class="bubbles bubbles10"></div>
    <div class="bubbles bubbles11"></div>
    <div class="bubbles bubbles12"></div>
    <div class="bubbleBody"></div>
    <div class="beerBodyTop"></div>
  </div>
</div>

気泡は違う動きをさせるので、違う番号を振っています。

最後に底に影を敷いてあげて完成です。

.shadow{
  width: 60%;
  height: 25px;
  box-shadow: 0px 12px 35px 25px #b1850e;
  border-radius: 50%;
  position: absolute;
  left: 20%;
  bottom: 2%;
}