HTMLコーディング

cssでグラデーションを描いてみよう

年末に向けていろいろと身辺周りが慌ただしくなってきましたね。
こんにちは、ともさんです( ^ω^ )

グラデーションをcssで描けることはもうご存知でしょう。
それを改めて残しておこうと思います。

自分のために。

今日は顔文字挟む余裕があります。
ふふ。

線形グラデーション

上からとか、下からとかのグラデーションです。
よく見るやつ。
一番ベースになるコードです。

See the Pen 線形グラデーションを描いてみよう by tomosan (@tomosan) on CodePen.0

グラデーションの指定はコレだけです。

background: linear-gradient(to bottom, orange, white);

to bottomの部分を変更すれば、下からとか右からとかにできます。

ななめグラデーション

線形グラデーションに角度を設定すると、ななめからのグラデーションになります。

See the Pen ななめグラデーション by tomosan (@tomosan) on CodePen.0

角度の指定を入れた箇所はこちら。

background: linear-gradient(225deg, orange, white);

225degの部分が角度になります。
任意の数値を入れてみて、遊んでください。

円形グラデーション

丸いグラデーションも作れます( ^ω^ )

See the Pen 円形グラデーション by tomosan (@tomosan) on CodePen.0

円形グラデーションの指定箇所はこちら。

background: radial-gradient(red, yellow);

あと、%を入れたものとか

background: radial-gradient(red 10%, yellow 40%, white);

円の大きさを中心から一番近い辺までの間の距離として認識させるものとか

background: radial-gradient(circle closest-side, red, yellow);

closest-sideについては、設定がいろいろあったりするので調べてみてください。
ボックスを円に外接する長方形として認識させて、円の中心からボックスの一番近い辺までの距離をグラデーションのサイズとするものもあります。
(説明が難しいけど、長方形のボックスだと楕円になると思ってください。正方形だと正円。円の外周が常にボックスにくっつく感じ。)

まとめ

グラデーションがcssで表現できるようになって本当に便利になりましたねー
今回ご紹介しているものは基本となるものです。
オプションとか調べればいろいろとやり方があるので、興味のある方はぜひ調べてみてください(/・ω・)/

コーディングやってると無になれる自信しかないともさんでした。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    棒グラフをcssで表現してみよう

    何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。ちなみに、私のおすすめは「美少年」です。先日の案件で、サイト内に棒グ…

  2. HTMLコーディング

    【WordPressでGO!】WordPressの子テーマを作ってみよう

    前回の記事から1週間も経っていないことに軽く衝撃を感じているともさんです、こんにちわ。もう正月気分も抜けて、いよいよ体重が気になりだしたころでしょ…

  3. HTMLコーディング

    【PHP】ページ毎に表示を変えるサイドメニューの分岐の方法

    先日会社の人たちと初登山へ行ってきましたが3回ほど盛大にコケてオシリが痛くなったともさんです、こんにちわ。・・・いや、登山楽しかったですよ。次回は…

  4. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

    こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。今更ながらあけましておめでとうございます。作業がひと段落したので重い腰を上げて201…

  5. HTMLコーディング

    とっても簡単なベーシック認証(Basic認証)のかけ方

    日本酒のひやおろしがおいしい季節になりました、お久しぶりですこんにちわ。ともさんです。久しぶりに業務でベーシック認証(Basic認証)をか…

  6. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置してみよう

    もう年の瀬ですね。当社の営業日も実質今日で終わりです。あとは大掃除を残すのみ(/・ω・)/そんな中でのこんなブログ記事です。仕事熱…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    投稿記事を複製しよう!Duplicate Postの使い方
  2. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置…
  3. HTMLコーディング

    css3だけで立体的でアニメーション付きのボタンを作ろう
  4. WEBデザイン

    色相環でグラデーションを描いてみよう
  5. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
PAGE TOP