空想曲線

吉里吉里2/KAG3でのゲーム制作に使える小ネタ置き場。ゲーム用素材も置いてます。

ティラノスクリプト glink ボタン改造サンプル  

2016-10-15
2017-04-02
cm0
tb0

glinkボタンサンプル


当ブログで配布しているティラノスクリプト用システム画面素材に合わせて glink ボタンを改造しました。
以下のコードを tyrano.css の color styles の一番下あたりにペーストしてご利用ください。
最新版のシステム画面素材では tyrano.css に以下のコードを追加したものを同梱しています。



システム画面素材その1用


/* CSS 
------------------------*/

/* 通常時 */
.ts01 {
color: #ccc; /* 文字色 */
background: #1f1f1f; /* 背景色(グラデ未対応のブラウザ用) */
background: -webkit-gradient(linear, left top, left bottom, from(#515357), to(#1f1f1f)); /* 背景グラデーション */
background: -moz-linear-gradient(lefttop, #515357, #1f1f1f); /* 同上 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#515357', endColorstr='#1f1f1f'); /* 同上 */
border: 1px solid #000; /* ボーダーライン */
-webkit-border-radius: 5px; /* 角丸 5px */
-moz-border-radius: 5px; /* 同上 */
border-radius: 5px; /* 同上 */
}


/* ホバー時 */
.ts01:hover {
color: #fad43c;
background:-webkit-gradient(linear, left top, left bottom, from(#515357), to(#1f1f1f));
background: -moz-linear-gradient(lefttop, #515357, #1f1f1f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#515357', endColorstr='#1f1f1f');
}


/* クリック時 */
.ts01:active {
color: #fad43c;
background: -webkit-gradient(linear, left top, left bottom, from(#1f1f1f), to(#515357));
background: -moz-linear-gradient(top, #1f1f1f, #515357);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f1f1f', endColorstr='#515357');
}


タグ記述例
*sample_ts01
[ glink text="その1" size=20 width=300 x=100 y=100 target=*001 color=ts01 ]



システム画面素材その2用


/* CSS 
------------------------*/

/* 通常時 */
.ts02 {
opacity:.8; /* 不透明度80% */
color: #fff; /* 文字色 */
background: #666; /* 背景色 */
background: -webkit-gradient(linear, left top, right bottom, from(#777), color-stop(0.5, #aaa), to(#777)); /* 背景グラデーション */
background: -moz-linear-gradient(lefttop, #777, #aaa 50%, #777); /* 同上 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#777777'); /* 同上 */
border: solid 3px #bfbfbf; /* ボーダーライン */
-webkit-border-radius: 1.5em; /* 角丸 1.5文字分 */
-moz-border-radius: 1.5em; /* 同上 */
border-radius: 1.5em; /* 同上 */
}


/* ホバー時 */
.ts02:hover {
opacity:1;
color: #fff;
background: #00d2e5;
background:-webkit-gradient(linear, left top, right bottom, from(#005d7d), color-stop(0.5, #00d2e5), to(#005d7d));
background: -moz-linear-gradient(lefttop, #005d7d, #00d2e5 50%, #005d7d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d2e5', endColorstr='#005d7d');
}


/* クリック時 */
.ts02:active {
opacity:1;
color: #fff;
background: #00d2e5;
background:-webkit-gradient(linear, left top, right bottom, from(#00d2e5), color-stop(0.5, #005d7d), to(#00d2e5));
background: -moz-linear-gradient(lefttop, #00d2e5, #005d7d 50%, #00d2e5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#005d7d', endColorstr='#00d2e5');
}


タグ記述例
*sample_ts02
[ glink text="その2" size=20 width=300 x=100 y=100 target=*001 color=ts02 ]


関連記事

コメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://kopacurve.blog33.fc2.com/tb.php/429-6eca120e
この記事にトラックバックする(FC2ブログユーザー)

Author

Recent

Category

Link

Comment

Mailform

Twitter