CSS3のグラデーション
背景を線形グラデーションする
background-image: -webkit-gradient(
形状,
開始位置,
終了位置,
from(開始色),
to(終了色)
);
以下のようにcolor-stopを2回指定することで、グラーデションせずに途中から色変更させることもできる
from(#000000),
color-stop(10%, #222222),
color-stop(90%, #888888),
to(#888888)
background-sizeで領域を小さくして繰り返しのタイル画像にしたり、カンマ切りや透過色指定で複数のグラデーションを重ねあわせることも可能。
背景を円形(放射状)グラデーションする
radial指定で円形を表現する。
color-stopを使ってクッキリした円形を表現しようとすると境界のディザが目立つので%指定の数値は少しズラしたほうがキレイに表現される。
円に対して斜めから光をあてることで、球のような立体的な質感を表現することも可能。
- ▲
view source
JavaScript
CSS
#demo ul:after{
content:"";
display:block;
clear:both;
}
#demo ul li{
float:left;
width:120px;
height:120px;
margin:10px;
}
ul#linear li:nth-child(1){
/* for Android2.x */
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(#000000),
to(#ff0000)
);
background-image: -webkit-linear-gradient(
top,
#000000,
#999999
);
}
ul#linear li:nth-child(2){
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(#000000),
color-stop(20%, #222222),
color-stop(80%, #888888),
to(#888888)
);
}
ul#linear li:nth-child(3){
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(#000000),
color-stop(20%, #444444),
color-stop(80%, #444444),
to(#888888)
);
}
ul#linear li:nth-child(4){
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(#000000),
color-stop(20%, #000000),
color-stop(20%, #444444),
color-stop(80%, #444444),
color-stop(80%, #888888),
to(#888888)
);
}
ul#linear li:nth-child(5){
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#000000),
to(#888888)
);
}
ul#linear li:nth-child(6){
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(#000000),
color-stop(50%, #000000),
color-stop(50%, transparent),
to(transparent)
);
background-size:10px;
}
ul#linear li:nth-child(7){
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(#000000),
color-stop(50%, #000000),
color-stop(50%, transparent),
to(transparent)
),
-webkit-gradient(
linear,
left top,
right top,
from(#888888),
color-stop(50%, #888888),
color-stop(50%, transparent),
to(transparent)
);
background-size:10px;
}
ul#skew_linear li:nth-child(1){
background-image: -webkit-gradient(
linear,
left top,
right bottom,
from(#000000),
to(#dddddd)
);
}
ul#skew_linear li:nth-child(2){
background-image: -webkit-gradient(
linear,
left top,
right bottom,
from(#000000),
color-stop(20%, #FF0000),
to(#dddddd)
);
}
ul#skew_linear li:nth-child(3){
background-image: -webkit-gradient(
linear,
left top,
right bottom,
from(#000000),
color-stop(50%, #FF0000),
color-stop(50%, #dddddd),
to(#dddddd)
);
}
ul#skew_linear li:nth-child(4){
background-image: -webkit-gradient(
linear,
left top,
right bottom,
from(transparent),
color-stop(20%, transparent),
color-stop(20%, #000000),
color-stop(30%, #000000),
color-stop(30%, transparent),
to(transparent)
);
}
/* 虹 */
ul#skew_linear li:nth-child(5){
background-image: -webkit-gradient(
linear,
left top,
right bottom,
from(#000000),
color-stop(20%, #840B2F),
color-stop(30%, #780D9B),
color-stop(40%, #0B1284),
color-stop(50%, #016880),
color-stop(60%, #1F7141),
color-stop(70%, #2D3A02),
to(#FFFFFF)
);
}
ul#radial li:nth-child(1){
background-image: -webkit-gradient(
radial,
50% 50%,
20,
50% 50%,
80,
from(#000000),
to(#dddddd)
);
}
ul#radial li:nth-child(2){
background-image: -webkit-gradient(
radial,
0% 0%,
0,
100% 100%,
120,
from(#000000),
to(#dddddd)
);
}
ul#radial li:nth-child(3){
background-image: -webkit-gradient(
radial,
left top,
0,
left bottom,
60,
from(#000000),
to(#dddddd)
);
}
ul#radial li:nth-child(4){
background-image: -webkit-gradient(
radial,
50% 50%,
0,
50% 50%,
80,
from(#000000),
color-stop(50%, #000000),
color-stop(50%, #999999),
to(#999999)
);
}
ul#radial li:nth-child(5){
background-image: -webkit-gradient(
radial,
50% 50%,
0,
50% 50%,
80,
from(#000000),
color-stop(45%, #000000),
color-stop(50%, #999999),
color-stop(70%, #000000),
color-stop(75%, #999999),
to(#999999)
);
}
ul#radial li:nth-child(6){
background-image: -webkit-gradient(
radial,
50% 50%,
0,
50% 50%,
80,
from(#000000),
color-stop(50%, #000000),
color-stop(70%, transparent),
to(transparent)
);
}
/*
球体表現
*/
ul#radial li:nth-child(7){
background-color:#333333;
background-image: -webkit-gradient(
radial,
30% 30%,
0,
30% 30%,
80,
from(#dddddd),
to(#444444)
);
border-radius:50%;
box-shadow:0px 0px 4px 2px rgba(128, 128, 128, 0.5);
color:#cccccc;
font-size:48px;
font-weight:bold;
text-shadow:-1px -1px 4px #000000;
text-align:center;
line-height:120px;
}
/*
ベベル・エンボス
*/
ul#radial li:nth-child(8){
background-color:#888888;
border:4px solid #000000;
border-radius:50%;
box-sizing:border-box;
border-color:rgba(255,255,255,0.6)
rgba(0,0,0,0.4)
rgba(0,0,0,0.6)
rgba(255,255,255,0.4);
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-css/css3-gradient/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。