WEBサイト制作効率化のための、
デザイン・wordpressの試作や覚え書き

css

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

2019-08-20

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

グラデーションの種類

  • 基本

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

  • 角度

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

  • 3色

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

  • 円形

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

  • オーバーレイ

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

背景色のアニメーション

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

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

-css

関連記事

CSSで影をつける

CSSでドロップシャドウをつける方法を二つ紹介します。

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

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

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

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

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

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

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。普段は埼玉のWeb制作会社に勤務しています。