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

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

![Screen Shot 2020-12-31 at 23.51.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/108980b5-bee5-dd08-ac3a-a3dfbac71552.png)

# 完成品はこちら

<p class="codepen" data-height="600" data-theme-id="light" data-default-tab="css,result" data-user="Nishihara" data-slug-hash="LYRQrZe" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Pure CSS Beer">
  <span>See the Pen <a href="https://codepen.io/Nishihara/pen/LYRQrZe">
  Pure CSS Beer</a> by Nishihara (<a href="https://codepen.io/Nishihara">@Nishihara</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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

![Screen Shot 2020-12-31 at 23.09.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/8876c6fc-fe3c-9898-a81d-52bb689b1d18.png)


```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 `でななめに変形させているので、子要素たちも同じようにすべて変形します。

![Screen Shot 2020-12-31 at 23.11.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/06d484cc-79fb-65f0-6ac6-ad93747fcc3e.png)

```css
.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)`を矩形にかけることでぼかして境界をなじませています。
![Screen Shot 2020-12-31 at 23.14.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/78e1130a-531c-242d-f722-34e3eb44b0d7.png)

![Screen Shot 2020-12-31 at 23.14.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/9f0eb779-026d-29c9-a4d5-b4b101e4e19c.png)

```css
.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`で曲線にしています。
![Screen Shot 2020-12-31 at 23.22.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/a81f3927-d1b6-eeba-095a-b377ae1484b8.png)


```css
.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);
}
```

さらにビールの底をビールより少し暗い色で楕円をつくり、ブラーでぼかしています。
![Screen Shot 2020-12-31 at 23.24.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/aa11dc4a-e063-ce0d-9ddc-0d996ee2e4e7.png)

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

さいごにグラスの底の一番下部のエッジ部分を少し暗い線をいれて屈折を表現します。
![Screen Shot 2020-12-31 at 23.26.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/8548d35c-d18c-1e6b-a6cc-63a3910de3ec.png)

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

# 泡の底
上部の泡部分の底にも影をつけて立体感をだします。
![Screen Shot 2020-12-31 at 23.28.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/b2552d83-4de6-c4ac-72d3-b0a22a8f820f.png)

```css
.beerBodyTop {
  width: 208%;
  height: 8%;
  position: absolute;
  top: 30%;
  left: -4%;
  background-color: mix(#fbc80b, #834b00, 80%);
  border-radius: 50%;
  filter: blur(5px);
}
```
これでビール本体は完成です。

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

```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="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`要素が泡です。基本的には同じかたちですがアニメーションを少しずつわけています。
![Screen Shot 2020-12-31 at 23.32.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/5ecef756-b141-e68c-4eca-38a40f56c6f9.png)


```css
.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;
  }
}
```
泡の作り方は[タピオカと同じような作り](https://qiita.com/nishihara_zari/items/d893650b4c6484abd2f1)で、その簡易版です。

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

```css
.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で左側もつくります。
![Screen Shot 2020-12-31 at 23.37.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/7a7d4ecc-ef5c-6148-6f82-5ca8148a1f25.png)


```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>
```

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

最後に底に影を敷いてあげて完成です。
![Screen Shot 2020-12-31 at 23.37.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/4df8c0dc-a9e6-4d3d-5a3d-dad8affe4ccc.png)

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

![beer_animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463699/6b6fc356-73e1-4c14-27a5-a59c69d8fe08.gif)