ルファーの生存報告場

自由気ままに書いてるウェブログ

174. RPGツクールXPのウィンドウスキンをCSS3で再現してみたXP
何を思ったのか、いつの間にかこんなことをやっていました。
選択肢まで再現する徹底ぶりだし。
(ここにマウス当ててね)

せっかくなので、何かRPGXP関連のコンテンツでこのCSSを使ってみようかな?


以下ソース
div.rpgxp {
margin: 1px;
padding: 13px;
border:
/* ↓ ボーダーの内側の色 */
2px solid white;
border-radius: 2px;
box-shadow:
/* ↓ ボーダーの外側の色 */
0 0 0 1px rgba(45,47,105,0.75),
0 0 0 1px rgba(45,47,105,0.75) inset;
background: linear-gradient(to right bottom,
/* ↓ グラデーション: 左上すみの色 */
#7076b0 0%,
/* ↓ グラデーション: 中央の色 */
#2d326b 50%,
/* ↓ グラデーション: 右下すみの色 */
#292a41 100%);
font: 22px/32px "MS Pゴシック", "MS PGothic", sans-serif;
color: white;
}
div.rpgxp a {
display: inline-block;
border: solid 1px transparent;
background: transparent;
padding: 1px 3px;
text-decoration: none;
}
div.rpgxp a.block {
display: block;
}
div.rpgxp a:link {
color: #8080FF;
}
div.rpgxp a:visited {
color: #FF80FF;
}
div.rpgxp a:hover, div.rpgxp a:active {
animation: rpgxp_selection 500ms linear 0 infinite alternate;
}
@keyframes rpgxp_selection {
0% {
/* ↓ リンクの枠の色 */
border-color: rgba(192, 220, 226, 0.875);
/* ↓ リンクの背景の色 */
background: rgba(192, 220, 226, 0.375);
}
100% {
/* ↓ リンクの枠の色 */
border-color: rgba(192, 220, 226, 0.4375);
/* ↓ リンクの背景の色 */
background: rgba(192, 220, 226, 0.1875);
}
}
2016/03/07 01:47:16 未分類 コメント(0) トラックバック(0)

コメント

コメントの投稿

名前
名前の装飾 太字にする   なし
タイトル
メールアドレス
URL
本文
パスワード
非公開コメント

トラックバック

この記事にトラックバックする(FC2ブログユーザー): http://lufar.blog16.fc2.com/tb.php/174-56f7fb07
(非公式) せかねが サウンドトラック | 今後ツクールでやりたいこと(覚え書き)
記事の検索
RSSリンクの表示
リンク
ブロとも申請フォーム
ブロとも一覧
QRコード
QR
↑クリックで拡大表示
メールを送る

名前:
メール:
件名:
本文:

FC2カウンター
Valid XHTML 1.0 and CSS