【CSS3】ちょっと使えそうなグラデーションサンプル集
実際のコーディングやデザインで使えそうな、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 17:31:24 更新