twitch/multiplex/css の履歴(No.3)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• twitch/multiplex/css へ行く。
  • 1 (2024-01-31 (水) 23:46:12)
  • 2 (2024-01-31 (水) 23:56:11)
  • 3 (2024-02-01 (木) 03:10:17)

---

twitch/multiplex

通常は「テキスト」「ブラウザソース」の2個を作る必要がありましたが、この方法だと「ブラウザソース」だけで文字が出せます。テキストにいい感じの枠も付きます。

• CSSで文字を縁取りする方法【太い縁でもキレイに表示】の工夫版を使っている
• strokeとtext-shadowは好みでいいと思うけど、画面が小さいとほぼ変わらないかも

やり方#

• OBSのブラウザソースで開いた誰かの配信のプロパティを開く
• カスタムCSSに下記をコピペする
• content: "しもの"; のところを編集して走者名を変えれます

stroke版#

• -webkit-text-stroke: 6px red; の red を #000 とかにするほうが綺麗だと思います。（ここでは分かりやすいように赤にした）

.root::before,
.root::after{
  content: "しもの";
  color: #fff;
  font-size: 40px;
  position: absolute;
  top: 0px;
  left: 8px;
  z-index: 9999;
  font-weight: bold;
}
.root::before{
  -webkit-text-stroke: 6px red;
}
.root::after{
  -webkit-text-stroke: 0;
}

text-shadow版#

.root::before,
.root::after{
  content: "しもの";
  color: #fff;
  font-size: 40px;
  position: absolute;
  top: 0px;
  left: 8px;
  z-index: 9999;
  font-weight: bold;
}
.root::before{
  text-shadow:  3px 3px 3px #000, -3px -3px 3px #000,
           -3px 3px 3px #000,  3px -3px 3px #000,
            3px 0px 3px #000, -3px -0px 3px #000,
            0px 3px 3px #000,  0px -3px 3px #000;
}
.root::after{
  text-shadow: 0;
}