Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8656

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

$
0
0

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

Screen Shot 2020-12-31 at 23.51.32.png

完成品はこちら

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

概要

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

Screen Shot 2020-12-31 at 23.09.18.png

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

Screen Shot 2020-12-31 at 23.11.12.png

.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)を矩形にかけることでぼかして境界をなじませています。
Screen Shot 2020-12-31 at 23.14.22.png

Screen Shot 2020-12-31 at 23.14.28.png

.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で曲線にしています。
Screen Shot 2020-12-31 at 23.22.03.png

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

さらにビールの底をビールより少し暗い色で楕円をつくり、ブラーでぼかしています。
Screen Shot 2020-12-31 at 23.24.32.png

.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

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

泡の底

上部の泡部分の底にも影をつけて立体感をだします。
Screen Shot 2020-12-31 at 23.28.02.png

.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要素が泡です。基本的には同じかたちですがアニメーションを少しずつわけています。
Screen Shot 2020-12-31 at 23.32.21.png

.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);![ScreenShot2020-12-31at23.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

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

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

最後に底に影を敷いてあげて完成です。
Screen Shot 2020-12-31 at 23.37.54.png

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

beer_animation.gif


Viewing all articles
Browse latest Browse all 8656

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>