ホーム > CSS3関連 > 【CSS3】ちょっと使えそうなグラデーションサンプル集

【CSS3】ちょっと使えそうなグラデーションサンプル集

mixiチェック Clip to Evernote このエントリーをはてなブックマークに追加

実際のコーディングやデザインで使えそうな、CSS3で作成したグラデーションのサンプルです。

サンプルコードはちゃっかりとCSS3 PIEにも対応しています。
サンプルの作成にあたってCSS Gradient Background Maker - Internet Explorer 10 TestDriveを使用させて頂きました。

毎度のことながらMSさんありがとうございます。
最近のWeb標準に対するMSの姿勢は目を見張りますね、これもGoogleがChromeをリリースしたからなのか...?

なにはともあれ、コーダーやデザイナーの皆さんにとっては嬉しい限りですね!

それでは本題のグラデーションサンプルです。


ガラスっぽいグラデーション

background-image: -ms-linear-gradient(top, #DDEEFF 0%, #AAC8FF 50%, #6699FF 50%, #AAC8FF 100%);
background-image: -moz-linear-gradient(top, #DDEEFF 0%, #AAC8FF 50%, #6699FF 50%, #AAC8FF 100%);
background-image: -o-linear-gradient(top, #DDEEFF 0%, #AAC8FF 50%, #6699FF 50%, #AAC8FF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DDEEFF), color-stop(0.5, #AAC8FF), color-stop(0.5, #6699FF), color-stop(1, #AAC8FF));
background-image: -webkit-linear-gradient(top, #DDEEFF 0%, #AAC8FF 50%, #6699FF 50%, #AAC8FF 100%);
background-image: linear-gradient(top, #DDEEFF 0%, #AAC8FF 50%, #6699FF 50%, #AAC8FF 100%);
background: -pie-linear-gradient(top, #DDEEFF 0%, #AAC8FF 50%, #6699FF 50%, #AAC8FF 100%);
behavior: url( /PIE.htc );
position: relative;

水中のようなグラデーション

 
background-image: -ms-linear-gradient(top, #0099CC 0%, #00CCEE 25%, #00D8FF 40%, #00D8FF 60%, #00CCEE 75%, #0099CC 100%);
background-image: -moz-linear-gradient(top, #0099CC 0%, #00CCEE 25%, #00D8FF 40%, #00D8FF 60%, #00CCEE 75%, #0099CC 100%);
background-image: -o-linear-gradient(top, #0099CC 0%, #00CCEE 25%, #00D8FF 40%, #00D8FF 60%, #00CCEE 75%, #0099CC 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0099CC), color-stop(0.25, #00CCEE), color-stop(0.4, #00D8FF), color-stop(0.6, #00D8FF), color-stop(0.75, #00CCEE), color-stop(1, #0099CC));
background-image: -webkit-linear-gradient(top, #0099CC 0%, #00CCEE 25%, #00D8FF 40%, #00D8FF 60%, #00CCEE 75%, #0099CC 100%);
background-image: linear-gradient(top, #0099CC 0%, #00CCEE 25%, #00D8FF 40%, #00D8FF 60%, #00CCEE 75%, #0099CC 100%);
background: -pie-linear-gradient(top, #0099CC 0%, #00CCEE 25%, #00D8FF 40%, #00D8FF 60%, #00CCEE 75%, #0099CC 100%);
behavior: url( /PIE.htc );
position: relative;

トリコロール(フランス国旗風)グラデーション

 
background-image: -ms-linear-gradient(top, #9999FF 0%, #CCCCFF 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
background-image: -moz-linear-gradient(top, #9999FF 0%, #CCCCFF 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
background-image: -o-linear-gradient(top, #9999FF 0%, #CCCCFF 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9999FF), color-stop(0.333333, #CCCCFF), color-stop(0.333333, #FFFFFF), color-stop(0.666666, #FFFFFF), color-stop(0.666666, #FFCCCC), color-stop(1, #FF9999));
background-image: -webkit-linear-gradient(top, #9999FF 0%, #CCCCFF 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
background-image: linear-gradient(top, #9999FF 0%, #CCCCFF 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
background: -pie-linear-gradient(top, #9999FF 0%, #CCCCFF 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
behavior: url( /PIE.htc );
position: relative;

トリコロール(イタリア国旗風)グラデーション

 
background-image: -ms-linear-gradient(top, #77DD77 0%, #99FF99 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
background-image: -moz-linear-gradient(top, #77DD77 0%, #99FF99 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
background-image: -o-linear-gradient(top, #77DD77 0%, #99FF99 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77DD77), color-stop(0.333333, #99FF99), color-stop(0.333333, #FFFFFF), color-stop(0.666666, #FFFFFF), color-stop(0.666666, #FFCCCC), color-stop(1, #FF9999));
background-image: -webkit-linear-gradient(top, #77DD77 0%, #99FF99 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
background-image: linear-gradient(top, #77DD77 0%, #99FF99 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
background: -pie-linear-gradient(top, #77DD77 0%, #99FF99 33.3333%, #FFFFFF 33.3333%, #FFFFFF 66.6666%, #FFCCCC 66.6666%, #FF9999 100%);
behavior: url( /PIE.htc );
position: relative;

落ち着いた雰囲気のグラデーション

 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #EEEEFF 75%, #EEEEFF 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #EEEEFF 75%, #EEEEFF 100%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #EEEEFF 75%, #EEEEFF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #EEEEFF), color-stop(1, #EEEEFF));
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #EEEEFF 75%, #EEEEFF 100%);
background-image: linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #EEEEFF 75%, #EEEEFF 100%);
background-image: linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #EEEEFF 75%, #EEEEFF 100%);
background: -pie-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #EEEEFF 75%, #EEEEFF 100%);
behavior: url( /PIE.htc );
position: relative;

カテゴリー:CSS3関連
2011/08/15 08:31:24 更新