#oDoC 20.12.06
20.12.06
昨日作成したJs Gradient作業を背景に、UIスタイルのひとつであるGlossMorphicsを応用してウェブデザインを行いました.
*本日提出
<div class="container"></div>
コンテナを作った後、.container {
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
border-radius: 5px;
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(5px);
}
CSS効果で不透明なglass divが生成されます.バックグラウンド-塗りつぶし(Background-Fill)は互換性がありませんが、まず最もクリーンなコードで開始します.
大きなdivの作成に成功しましたが、divに複数のコンテンツを作成するために.container-wrap divを作成し、aラベルリンク付きのボックスを作成するcontainerを作成します.
デザインは...後で修正してここで終わります
思ったより透明度が高く、タイトルボックスは透明ではありません.ホバーシーの箱にも透明度を加えます.
反応型を作るのに苦労(反応型といってもちょっと…)flex、Gridプロパティ、寸法調整部分を再学習しなければならないようです.(こんなに早く食べるの忘れちゃった)
Reference
この問題について(#oDoC 20.12.06), 我々は、より多くの情報をここで見つけました
https://velog.io/@yuhwanjun/oDoC-20.12.05-3gewhtbv
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<div class="container"></div>.container {
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
border-radius: 5px;
background-color: rgba(255, 255, 255, .15);
backdrop-filter: blur(5px);
}Reference
この問題について(#oDoC 20.12.06), 我々は、より多くの情報をここで見つけました https://velog.io/@yuhwanjun/oDoC-20.12.05-3gewhtbvテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol