公開日:
CodingDiary-5

Blog

CssAnimation

-linear-gradient＆radial-gradient-

目次

1.linear-gradient
2.特定色の範囲指定
3.特定色を半透明
4.radial-gradient


こんにちは
普段 バナー風にしてCSSのアニメーションで遊んでいます 今回は背景で利用しているlinear-gradientとradial-gradientです


Demo

町イラスト：いらすとや


1.linear-gradient

Demoでは夜をイメージしたグラデーション

HTML 

        <div class="sky">
            <span></span>
            <span></span>
            <span></span>
            ・
            <p></p>
            <p></p>
            <p></p>
            ・
            <img  alt="">
        </div>

CSSで背景の設定
カッコ内の最初の「0,」は下から色着けする設定
「180,」にすると上から色着け

CSS 

        .sky{
            background: linear-gradient(0, #555, yellowgreen 10%, #999, #777, #555, #333, #111);
        }


2.特定色の範囲指定

上記では「yellowgreen 10%,」としていますがこれを50%にしてみると

こんな感じ↓



3.特定色を半透明

「yellowgreen 10%,」をrgbaにして半透明に

CSS 

        .sky{
            background: linear-gradient(0, #555, rgba(154, 205, 50, .5) 10%, #999, #777, #555, #333, #111);
        }



4.radial-gradient

色着けは closest-side で中心から外へ Demoでは花火風に

CSS 

        .sky{
            background: radial-gradient(closest-side, red, blue, yellow, snow 95%, #111);
            background: -webkit-radial-gradient(closest-side, red, blue, yellow, snow 95%, #111);
        }



参考サイト:
・いらすとや
　https://www.irasutoya.com/

▲ ● ● ● ● ● ▼

最後までご覧いただきありがとうございました
しばらくanimationで遊んでみたいと思っています
お付き合い頂けたら幸いです

Mail


Blog作業環境:
・Windows 11 Home
　13インチノート(JISキー）
・Codingソフト
　Microsoft Visual Studio Code
・写真編集
　Microsoft フォト

過去のブログはこちら↓
1)CssAnimation -Google iconの{font-variation-settings:}の変更-
2)CssAnimation -絵文字でパラパラ漫画風アニメ-
3)CssAnimation -iframeのscrollbarを消す-
4)CssAnimation -iframeの活用-
5)CssAnimation -LinearGradient&RadialGradient-

TOP