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

css

2019-08-20

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

グラデーションの種類

  • 基本

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

  • 角度

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

  • 3色

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

  • 円形

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

  • オーバーレイ

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

背景色のアニメーション

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

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

-css

関連記事

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

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

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

CSSで上下センター揃え

上下センター揃え フレックスボックス 「display: flex」を使います。

左右センターは「justify-content: c …

CSSで縦書き

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。

1月11日 数字の回転 二桁の数字など英 …

tableのCSS設定

tableのCSSデザイン

社名 〇〇株式会社 所在地 〒000-0000 埼玉県〇〇〇〇〇〇 連絡先 048-000-0000 … …

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