twitch/multiplex/css の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• twitch/multiplex/css へ行く。
• twitch/multiplex/css の差分を削除

#author("2024-02-01T03:10:17+09:00","default:nemusg.pad","nemusg.pad")
#author("2024-02-15T12:32:53+09:00","default:nemusg.pad","nemusg.pad")
#title(OBSブラウザソースだけで走者名のテキストを出す)

[[twitch/multiplex]]

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

- [[CSSで文字を縁取りする方法【太い縁でもキレイに表示】:https://csshtml.work/stroke/]]の工夫版を使っている
- strokeとtext-shadowは好みでいいと思うけど、画面が小さいとほぼ変わらないかも
//-- その場合は `-webkit-text-stroke` を `text-shadow` にしてください

** やり方 [#y1fe67ba]

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

*** stroke版 [#k4e5cf49]

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

#ref(twitch/multiplex/css/css.png,100%)

#code_x{{
.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版 [#ub01eede]

#ref(twitch/multiplex/css/css2.png,100%)

#code_x{{
.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;
}
}}