新年あけましておめでとうございます。
今年もよろしくおねがいします。かんぱーい！
完成品はこちら
See the Pen Pure CSS Beer by Nishihara (@Nishihara) on CodePen.
概要
ビールの図形自体は左右対称なので、半分作って残り半分はtransform: scaleX(-1)で反転しています。左半分のHTMLは以下のようになっています。
<divclass="beerLeft"><divclass="beerLeftSkew"><divclass="beerBody"></div><divclass="bubbleTop"></div><divclass="beerGlassBottom"></div><divclass="beerBodyBottom"></div><divclass="beerGlassEdge"></div><divclass="bubbleBody"></div><divclass="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:00;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%,#e9e6e130%);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,#a776190%,#fffde610%,#fffef930%,mix(#fffef9,#dfb336,80%)40%,#dfb33655%);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:2pxsolid#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);}これでビール本体は完成です。
気泡をいれる
立ち上る気泡をいれていきます。
<divclass="beerLeft"><divclass="beerLeftSkew"><divclass="beerBody"></div><divclass="bubbleTop"></div><divclass="beerGlassBottom"></div><divclass="beerBodyBottom"></div><divclass="beerGlassEdge"></div><divclass="bubbles bubbles1"></div><divclass="bubbles bubbles2"></div><divclass="bubbles bubbles3"></div><divclass="bubbles bubbles4"></div><divclass="bubbles bubbles5"></div><divclass="bubbles bubbles6"></div><divclass="bubbleBody"></div><divclass="beerBodyTop"></div></div></div>.bubbles要素が泡です。基本的には同じかたちですがアニメーションを少しずつわけています。
.bubbles{position:absolute;width:4px;height:4px;background-color:#fcd044;border-radius:50%;border:1pxsolid#c17b11;filter:blur(1.5px);box-shadow:0px2px1px#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:3pxsolid#d99b01;}&:after{content:"";width:80%;height:80%;position:absolute;top:-5%;left:10%;border-radius:50%;background-color:#faec87;}}@keyframesbubble{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);animation-delay:-550ms;}.bubbles5{top:82%;left:35%;}.bubbles6{top:78%;left:48%;transform:scale(0.6);animation-delay:-650ms;}右半分と微調整
これで半身ができたので、同じようなHTMLで左側もつくります。
<divclass="beerRight"><divclass="beerRightSkew"><divclass="beerBody"></div><divclass="bubbleTop"></div><divclass="beerGlassBottom"></div><divclass="beerBodyBottom"></div><divclass="beerGlassEdge"></div><divclass="bubbles bubbles7"></div><divclass="bubbles bubbles8"></div><divclass="bubbles bubbles9"></div><divclass="bubbles bubbles10"></div><divclass="bubbles bubbles11"></div><divclass="bubbles bubbles12"></div><divclass="bubbleBody"></div><divclass="beerBodyTop"></div></div></div>気泡は違う動きをさせるので、違う番号を振っています。
最後に底に影を敷いてあげて完成です。
.shadow{width:60%;height:25px;box-shadow:0px12px35px25px#b1850e;border-radius:50%;position:absolute;left:20%;bottom:2%;}
