自分のアイコンに飾りをつけるUserCSS

遊び

Zoom等の顔映像は、フィルタを重ねて帽子を被せたり芽を生したりして遊べる

Scrapboxでも同じ事をやってみたいという思いつき

芽を生やすCSS

https://gyazo.com/d9c1b31dd3d1c927a50ffebabd511e45

code:style.css

content: "🌱";

position: absolute;

top: -18px;

z-index: 1;

}

サングラスをかけるCSS

https://gyazo.com/13d07a272a7bbc5dc19466338126452a

code://style.css

content: "🕶";

position: absolute;

top: -5px;

margin-left: 5px;

font-size: 5px;

z-index: 1;

}

帽子を被るCSS

https://gyazo.com/c5be7c9b7898ec4a7b5392a23530483a

code://style.css

content: "🎩";

position: absolute;

top: -13px;

margin-left: 1px;

z-index: 1;

transform: rotate(-10deg);

}

修正

行が折り返されると位置がずれるのを修正した

code://style.css

a.link.icon { text-decoration: none; }

content: "🎩";

position: relative;

top: -15px;

margin-right: -20px;

z-index: 1;

}

絵文字って環境（というかフォント）によって表示が大きく変わってしまうので…

僕はWindows(とChrome)で検証したけれど、Mac, iOS, Androidでまた変わってくるだろうし…

もしかしたらブラウザによって変わるとかもあるかもしれない

他にできそうな事

帽子🎩⛑👒を被せる

眼鏡🥽👓🕶を着ける

服👔🎽👘を着る

この辺りはアイコンにキャラクターが写っていないと難しそう

誕生日の人に👑をかぶせる

新しい人に🔰をつけるとか

行が折り返されると位置がずれてしまう

https://gyazo.com/ab510e8aaee8c8b0c5070df390e61a83