• TOP
  • WordPress
    • まとめ
    • JavaScript
    • 記事
    • 画像/動画
    • 管理
    • アクセス/SEO対策
    • カテゴリ
    • サイドバー/ヘッダー
    • アイキャッチ
    • パスワード
    • コメント
  • プラグイン
  • CSS
  • ユーザー限定
Plus WordPress ワードプレスの基本・応用テクニックを紹介
ホーム › CSS › CSS3 グラデーション

CSS3 グラデーション

グラデーションの基本

基本(線形)

1
<div class="demo gradation">線形</div>

1
2
3
4
5
6
7
8
9
10
11
12
.demo {
width:90%;
height:200px;
margin-top: 40px;
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
padding-top: 20px;
padding-left: 20px;
background-color: #CCC;
color: #FFF;
}

1
2
3
4
5
.gradation {
background: linear-gradient(to bottom, #666, #000, #666);
background: -moz-linear-gradient(top, #666, #000, #666);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));
}

グラデーションの種類 (線形、linear)

  • mozilla系ブラウザ

    background: -moz-linear-gradient(top, #666, #000, #666); 

  • webkit 系ブラウザ

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));

グラデーションの方向(共通)

background: linear-gradient(to bottom, #666, #000, #666);

to top 下から上へグラデーション
to bottom 上から下へ
to left 右から左へ
to right  左から右へ
to right bottom  左上から右下へ

グラデーションの方向 (mozilla系とwebkit系ブラウザ)

  • mozilla系ブラウザ

    background: -moz-linear-gradient(top, #666, #000, #666); 
    top 上から下
    bottom 下から上
    left 左から右
    right  右から左

    top -45deg 左上から右下

  • webkit系ブラウザ

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));

    left top, left bottom 上から下

    left bottom, left top 下から上

    left top, right bottom 左から右

    right top, left bottom 右から左

    left top, right bottom 左上から右下

開始の色から終了の色

  • mozilla系ブラウザ

    background: -moz-linear-gradient(top, #666, #000, #666); 

    開始 #666 → #000 → #666 終了

    %を使って色の領域を指定することもできます。
    開始 #666 0% → #000 30% → #666 終了

  • webkit 系ブラウザ

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(0.5, #000), color-stop(1.0, #666));

    開始 color-stop(0, #666) → color-stop(0.5, #000) → color-stop(1.0, #666) 終了

    開始色from(色のみ) → color-stop(0.5, #000) → ,終了色to(色のみ)でもOK
    開始 from(#666) → color-stop(0.5, #000) → to(#666) 終了

色はRGBaで指定することもできますが、とりあえず基本はこれで十分だと思います。

グラデーションの種類 (円形、radial)

background: radial-gradient(#F00, #fff 33%, #000);

円形

アクアブルー

アクアブルー

1
2
3
4
5
6
7
8
.gradation2 {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #b6e2fd), color-stop(0.20, #91bae4), color-stop(0.50, #8fbff0), color-stop(0.51, #6ba8e4), color-stop(0.75, #87c2fb), color-stop(1.00, #bcf4fd));
background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: linear-gradient(to bottom, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
}  

クリスタルレッド

クリスタルレッド

1
2
3
4
5
6
7
8
.gradation3 {
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c21b00), color-stop(0.77, #ff6600), color-stop(0.52, #ea2804), color-stop(0.50, #e86a55), color-stop(0.33, #f49c8d), color-stop(0.00, #f1b9b0));
background: -webkit-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);
background: -moz-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);
background: -o-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);
background: -ms-linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);
background: linear-gradient(top, #f1b9b0 0%, #f49c8d 33%, #e86a55 50%, #ea2804 52%, #ff6600 77%, #c21b00 100%);
}  

シンプルホワイト

シンプルホワイト

1
2
3
4
5
6
7
8
9
10
.gradation4 {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f1f1f1), color-stop(51%, #e1e1e1), color-stop(100%, #f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 ); /* IE6-9 */
}  

レインボー

レインボー

1
2
3
4
5
6
7
8
.gradation5 {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f00), color-stop(0.16, #ff0), color-stop(0.33, #0f0), color-stop(0.51, #0ff), color-stop(0.67, #00f), color-stop(0.85, #f0f), color-stop(1.00, #f00));
background: -webkit-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
background: -moz-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
background: -o-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
background: -ms-linear-gradient(top, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
background: linear-gradient(to bottom, #f00 0%, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00 100%);
}  

グラデーションが簡単に作れるサービス

  • 上のグラデーションをコピペしたサイトですが、作業時間の短縮になるのでこういうサービスは利用したほうがよいと思います。
    https://grad3.ecoloniq.jp/
    https://www.colorzilla.com/gradient-editor/
  • グラデーション以外にもいろいろなことができる、まさしくCSS3メーカーです。
    https://css3maker.com/
タグ: CSS3
カテゴリー: CSS

コメントを残す コメントをキャンセル

関連記事
CSS3 拡大、縮小、スライド、回転
CSS3 ボックスシャドウ
CSS3 テキストにシャドウ(影)
CSS3 角を丸くする
CSS3のみで画面外からメニューをスライド表示
CSS3 アコーディオンメニュー
人気記事
高機能でオシャレな実用的メニュー(HTMLテンプレート)
Webページ全体をフェードイン、フェードアウト
投稿、固定ページ内にウィジェットを挿入
記事の続きを読むを消す
最新記事を自動でスライドショー
コメントに画像を挿入できるようにする
指定したカテゴリIDのカテゴリ名のみ取得
フリーの高機能HTMLテンプレート
記事ごとに個別のCSSやJavaScriptを追加
特定のカテゴリに個別のCSSを適応させる
カテゴリ別に違うカテゴリ(テンプレート)を表示
タイトルや本文からタグを自動生成
画像や動画をポップアップし再生
非表示、置換テクニック
Contact Form7の送信完了画面をカスタマイズ
phpMyAdminのユーザー名とパスワードの確認方法
カテゴリー別に違うサイドバーを出す
CSS3のみで画面外からメニューをスライド表示
CSSやJavaScriptのハンドル名(id)を確認
管理画面の投稿一覧で投稿IDを表示する
アイキャッチ(サムネイル)を呼び出す
スライドショー Meteor Slides
カテゴリに別々のアイコンを表示
レスポンシブなLightbox jQuery プラグイン Strip
背景をスライドショーにする
ページごとに違うヘッダーを読み込む
コメントのメールアドレス入力覧を消す
記事をランダムに表示させる
CSS3 角を丸くする
スライドショー Skitter Slideshow
パスワードを間違えると一定時間ログインできないようにする
購読者にパスワードを変更させない
ショートコードを追加するプラグイン
管理画面の投稿一覧へアイキャッチを表示
個別にJavaScriptを振り分ける
Contact Form7に画像認証機能を追加
リンクの表示順を並べ替える
サイト全体のサムネイルサイズを変更
CSS3 ボックスシャドウ
JavaScriptで画面外からメニューをスライド表示
    メルマガ購読
  • メールマガジンではWordPressのおもしろい使い方を紹介しています。またユーザー限定ページとも連動しているので、そちらも自由に観覧できるようになります。
  • 登録フォーム
PlusWordPress
  • お問い合わせ
  • このサイトについて
Link
  • 人気ブログランキング
  • 使えるWordPressテーマ
背景変更
  • デフォルト
  • ホワイト
  • ブラック
  • グレー
  • Facebook
  • RSS Feed
  • Google Plus
© 2023 Plus WordPress