ブログデザイン備忘録～2022年のトレンドカラー

今年最初の記事は、2022年のWebデザインのトレンドカラーについて取り上げたい。

によると2022年の色は「最も幸せで暖かいブルー」ベリーペリ（Very Peri）と名付けられ、カラーコード：#6667ab　具体的には以下のラベンダー系の色になる。

早速Very Periを使って背景デザインを行ってみた。元のデザインは

サイトの引き立て役はコレ！おしゃれすぎる背景をコピペで実装【 HTML/CSS 】 - デシノン

の"ふわふわ四角"でHTMLとCSSのみでアニメーション背景が作成できる。HTMLは以下の通りで、基本的にはlist構造の部分を利用して四角形が回転移動するアニメーションを作成する。

<div class="context">
        <h1>Color of the year 2022</h1>
    </div>

<div class="area" >
            <ul class="circles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
            </ul>
    </div >

CSSでは背景をVery Periにするためbackground:#6667ab;に変更する。四角形はlist-style:none;としてマーカーをなしにして代わりにbackgound: rgba(255, 255, 255, 0.3);とすることで背景を白の透過色に設定、サイズはwidthとheightで設定、位置はleftで設定できる。10個のリストに対してそれぞれサイズ、位置を適当に設定することで様々な大きさの四角形を表示できる。縦の移動と回転については@keyframes animate内のtransform: translateY(-1000px) rotate(720deg);として、タイミング・速度はanimation-delayやanimation-durationで調整できる。

.area{
    background:#6667ab;  
    width: 100%;
    height:100vh;   
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

/* 中略 */
@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}