cssで作るいろいろなグラデーション

css

2019-08-20

鮮やかなグラデーションを取り入れたサイトをよく見ます。
様々なタイプのグラデーション記述方法をまとめてみました!

グラデーションの種類

  • 基本

    グラデーションはbackgroundで指定します。先に書いた色が開始色(黄緑)、後の色が終了色(青緑)です。

    セレクタ{background: linear-gradient(#C0F9A3, #06AA61);}

     

  • 角度

    30度の角度をつけた、黄色と水色のグラデーション。

    セレクタ{background:linear-gradient(30deg, #13F2F9, #FFE603);}

     

  • 3色

    青、水色、ピンクの3色グラデーション。こちらは60%の部分まで青と水色のグラデーションという指定になります。

    セレクタ{background:linear-gradient(90deg,#0567F7,#7EF2FB 60%,#F874CB);}

     

  • 円形

    円のグラデーションは「radial-gradient」というプロパティを使います。こちらは最初の色が中央色(白)、後の色が外側の色(水色)。

    セレクタ{background:radial-gradient(#FFF, #77C9F7);}

     

  • オーバーレイ

    写真の上にグラデーションをかぶせました。画像が透けて見えるように、カラーはrgbaで指定しています。

    セレクタ{linear-gradient( rgba(255, 0, 168, 0.54), rgba(3, 255, 250, 0.65)) ,url(画像のurl)}

     

背景色のアニメーション

セレクタ {
background: #0567F7;
animation: gradation 7s infinite alternate;
}
 
@keyframes gradation {
0% { background: #0567F7; }
25% { background: #7EF2FB; }
50% { background: #F874CB; }
75% { background: #FF7E5E; }
100% { background: #FFF169; }
}

 

グラデーションのアニメーション

セレクタ{
background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c);
background-size: 500% 500%;
animation: gradation02 10s ease infinite;
}
 
@keyframes gradation02 {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

 

3色の斜めのグラデーションをbackground-sizeで大きいサイズにし、キーフレームのbackground-positionで位置をずらして表示させています。こちらは下記のサイトを参考に作ってみたものです。ありがとうございました。

-css

関連記事

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!

CSSで縦書き

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing …

CSS Animationでアニメーションを表現する

JavaScriptを使わずにCSSだけでアニメーションを表現!CSS Animationキーフレームは0%(アニメーションの開始)から100%(終わり)まで細かく指定できます。

テキストに縁や影をつける

cssでテキストに縁や影をつけます。

スマホ対応の見やすい表を作りたい! tableのCSS設定

よく使うtableのCSSデザイン サイト制作の会社概要や比較表、料金表などでよく使うtable。css設定についてまとめました。例にあげたのは、全部tdの場合です。thが入ると変わってくるものもあり …