UserCSS:レインボー記法
https://img.shields.io/badge/UserCSS-レインボー記法-1572B6.svg?logo=css3&style=for-the-badge
文字装飾記法とかを見て、いじっていたらできてしまった。
https://gyazo.com/c8da49864bae65052e83c327fd564af2
けっこう派手なエフェクトをかける文字装飾記法です。
使い方は、自分のページのstyle.css 、またはsettingsに
code:css
@import "/api/code/suto3/UserCSS:レインボー記法/style.css"; /* レインボー記法用 */
と追加する。
そうすると、[" ]という記法が追加される。
そして、文字装飾記法の書き方で
レインボー記法のテストだよ
レインボー記法のテストだよ
くどいようだけどレインボー記法のテストだよ
　
という風に記述する。
ゲーミングパソコンみたいだ。
Google Chrome と Firefox 上では動いた。
code:stylexx.css
/*.deco-\! {*/
.deco-\" {
color: #fff; /* 白文字 */
background: linear-gradient( to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 4s linear infinite;
}
@keyframes rainbow {
to { background-position-x: 200%; }
}
グラデーションテキスト版
code:style.css
.deco-\" {
font-weight: bold;
background: linear-gradient( to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 4s linear infinite;
animation-direction: reverse;
-webkit-background-clip: text; /* */
/* -webkit-text-fill-color: transparent; /* */
background-clip: text;
color: transparent;
}
@keyframes rainbow {
to { background-position-x: 200%; }
}
UserCSS:グラデーションテキスト
help-jp - /help-jp/文字装飾記法
forum-jp - /forum-jp/文字色
scrapboxlab - /scrapboxlab/文字装飾記法をUserCSSで拡張する
CSS だけでテキストを虹色のグラデーションでアニメーションさせる - Corredor
CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN
CSS アニメーションの使用 - CSS: カスケーディングスタイルシート | MDN
@keyframes - CSS: カスケーディングスタイルシート | MDN
入力を補助するスクリプト。
ポップアップメニューに追加される。
code: script.js
scrapbox.PopupMenu.addButton({
title: '🌈',
onClick: text => text.split(/\n/)
.map(line => {
if (line.match(/\[\"\s+/)) {
return line.replace(/\\"\s+/g, '').replace(/\/g, '')
} else {
if (!line.length) return line
return [" ${line}]
}
}).join('\n')
})
UserScript.icon
正規表現
↓ここからはオマケ。
code:style.css
.page::before {
content: 'おめでとうございます！！ いろがまわって、いろいろ繁盛！！';
display: block;
/*border-bottom: 1px solid #bbb;*/
/*margin-bottom: 2rem;*/
color: #fff; /* 白文字 */
background: linear-gradient( to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 12s linear infinite;
}
code:style.css
.page::after {
content: 'おめでとうございます！！ いつもよりも多めにまわしております！！';
display: block;
/*border-bottom: 1px solid #bbb;*/
/*margin-bottom: 2rem;*/
color: #fff; /* 白文字 */
background: linear-gradient( to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 12s linear infinite;
}
カーソルにエフェクトをかけてみたが、効果はいまひとつだった。
code:stylex.css
.cursor {
width: 8px !important;
background: linear-gradient( to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 200% auto ; /* グラデーション */
/*padding: 0.1em 0.2em 0.1em 0.2em;*/
animation: rainbow 4s linear infinite;
}
.cursor svg {
display: none;
}
赤くなる記法（グラデーション版）
code:style.css
.deco-\! {
/*.deco-\" {*/
color: #fff; /* 白文字 */
background: linear-gradient( to right,
red,
yellow,
/*orange,*/
red
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: emred 4s linear infinite;
}
@keyframes emred {
to { background-position-x: 200%; }
}
緑になる記法（グラデーション版）
code:stylexx.css
.deco-\# {
color: #fff; /* 白文字 */
background: linear-gradient( to right,
green,
yellow,
green
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: emgreen 4s linear infinite;
}
@keyframes emgreen {
to { background-position-x: 200%; }
}
橙になる記法（グラデーション版）
code:style.css
.deco-\% {
color: #fff; /* 白文字 */
background: linear-gradient( to right,
orange,
yellow,
/*orange,*/
orange
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: emorange 4s linear infinite;
}
@keyframes emorange {
to { background-position-x: 200%; }
}
青になる記法（グラデーション版）
code:style.css
.deco-\~ {
color: #fff; /* 白文字 */
background: linear-gradient( to right,
blue,
aqua,
blue
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: emblue 4s linear infinite;
}
@keyframes emblue {
to { background-position-x: 200%; }
}
UserCSS:文字装飾記法
UserCSS.icon
MDN.icon