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プロパティ、寸法調整部分を再学習しなければならないようです.(こんなに早く食べるの忘れちゃった)