文字に少しずれたアウトラインのような装飾がしたい！方法が分からないです…

Question

前提・実現したいこと

文字にこのような↓装飾がしたいのですが、やり方が分からなかったので質問させていただきました。

伝わりますでしょうか…

赤い文字
の影(装飾)
で、右斜め上に、
黄色い縁取りの文字の装飾がしたいのです…

発生している問題・エラーメッセージ

 <h2>文字</h2>

h2{
    font-family: "Yu Gothic Medium";
    font-size:(60/1280)*100vw;
    text-align: center;
　　color: #f00;
    text-shadow: 1px 1px 0 #FFFF00,-1px 1px 0 #FFFF00,1px -1px 0 #FFFF00,-1px -1px 0 #FFFF00;
}

↑今このように記載しているのですが、
これだと文字の縁取りをしているだけになってしまいます。

お知恵を貸していただけますと幸いです。
よろしくお願いします。

Comments

[m.ts10806]

>アウトラインのような装飾がしたい
>アウトラインになってしまいます。

えっと、どっちでしょうか。
あとCSS内に「$mainfont;」のような表現をされていますが、純粋なCSSでないのでしたら、その旨記載してください。

[m.ts10806]

普通に距離を調整すればできそうに思いますが。
http://www.htmq.com/css3/text-shadow.shtml

[nomura02]

↑イメージ画像のように、1pxの線で縁取られたものを、右斜め上にもっていきたいのですが、

text-shadow: 1px 1px 0 #FFFF00,-1px 1px 0 #FFFF00,1px -1px 0 #FFFF00,-1px -1px 0 #FFFF00;

↑こっから
どのように移動させればよいのか、分からなくて…

Answer 1

text-shadowはいくつも重ねられますので、白の影を使えば近いことは可能です。
下記の例は右上に2pxずらした位置に白の影をつけ、白の影の上下左右1pxに黄色の影をつけています。

<h2>文字</h2>
<style>
h2 {
    font-family: "Yu Gothic Medium";
    font-size:(60/1280)*100vw;
    text-align: center;
    color: #f00;
    text-shadow:
        2px -2px #ffffff,
        2px -3px #ffff00,
        2px -1px #ffff00,
        1px -2px #ffff00,
        3px -2px #ffff00;
}
</style>

Comments

[nomura02]

ありがとうございます！
すごいです、ありがとうございます！
text-shadow:
2px -2px #ffffff,←右上
2px -3px #ffff00,←上
2px -1px #ffff00,←下
1px -2px #ffff00,←左
3px -2px #ffff00;←右

理解しました！

ちなみに、こういったものを
レンダリング？やz-indexで表現するのかなとも思ったのですが、それだと不可能でしょうか？

[Eggpan]

同じ文字を重なるように置けば似たような事は出来るかと思います。

[nomura02]

分かりました!ありがとうございます!
非常に助かりました！！