【CSS】角丸袋文字
どうも！LSSです！！
もう２年以上前ですが、
というコード生成ツールを公開していました。
色々調整できて面白いツールではありましたが、「ぼかし」をかけておかないとフォントの尖った部分がそのまま尖った袋になる、という仕様だったんですね。
今回は、text-shadowの位置のずらし方をちょっと工夫する事で、角丸袋文字のコードを考えてみました。
角丸袋文字
角丸袋文字
コード
<span style="--c1: green; font-size: 50px; color: white; font-weight: bold; text-shadow: -3px 0 0 var(--c1),-3px -1px 0 var(--c1),-2px -2px 0 var(--c1),-1px -3px 0 var(--c1),0px -3px 0 var(--c1),1px -3px 0 var(--c1),2px -2px 0 var(--c1),3px -1px 0 var(--c1),3px 0px 0 var(--c1),3px 1px 0 var(--c1),2px 2px 0 var(--c1),1px 3px 0 var(--c1),0px 3px 0 var(--c1),-1px 3px 0 var(--c1),-2px 2px 0 var(--c1),-3px -1px 0 var(--c1);">角丸袋文字</span>
上記コードをコピペして、中の「角丸袋文字」という文字部分を好きな言葉に変更して使用できます。
その他、変更を加えられる箇所
コードのほとんどはtext-shadowの設定が並んでいますが、その手前部分。
--c1: green; font-size: 50px; color: white; font-weight: bold;
となっている箇所を変更する事で、見た目を変更する事ができます。
--c1: green;
袋の色を指定する部分です。サンプルでは色名であるgreenで指定していますが、「#00ff00」のようなコードでも指定できます。
参考→【CSS】色指定 様々な方法（色名・RGB・HSLなど）
font-size: 50px;
文字の大きさを変更できます。
color: white;
文字の色（袋の中身）を指定できます。これも色コードなどでの指定も使えます。
font-weight: bold;
文字を太文字にしています。
太文字にする必要がなければ、この記述自体を削除してください。
文字サイズや画数の多い漢字など
ABCabc123あいうえお鑑
↑ font-size:50px;
ABCabc123あいうえお鑑
↑ font-size:20px;
ABCabc123あいうえお鑑
↑ font-size:20px; 太字解除
ABCabc123あいうえお鑑
↑ font-size:100px; 太字解除
とても古いネタの焼き直しをしてしまいました
text-shadowの配置を変えた他、色の指定にCSS変数を使ってみました。
袋文字のコードを書くのに、袋の色を繰り返し何度も書くのが手間だったので、以前のツールではJavaScriptで指定色を書き出していたのですが、CSS変数を使う方法でも結構すっきりと書けますね。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
