勾配と罫線のあるテキスト

Question

罫線をフォントのグラデーションの背景と組み合わせる方法はありますか？

テキストシャドーを使用すると背景効果が失われ、webkit-strokeは内側のフォントになり、一部のブラウザでは機能しません。またsvgで試してみましたが、多かれ少なかれ私はwebkitと同じ結果を得ました。プロのみがブラウザ互換です。

おそらくjsまたはjQueryですか？例以下は

が、これはそうあまりにも多くの私を憎むが、それは私が考える仕事を取得しないでください少しハックです近いが

h1 { 
    color: red; 
    -webkit-text-stroke: 3px black; 
    font-size: 40px; 
    background: linear-gradient(50deg, red 29%, yellow 47%, red 50%, orange 57%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    } 

Answer 1

OK十分ではありません。

基本的には、グラデーションを.title1に、境界線を.title2に適用し、それらを互いに重なり合うように配置します。

.container { 
 
    position: relative; 
 
} 
 
.title { 
 
    font-size: 40px; 
 
    position: absolute; 
 
} 
 
.title1 { 
 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
 
} 
 
.title2 { 
 
    color: red; 
 
    background: linear-gradient(50deg, red 29%, yellow 47%, red 50%, orange 57%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<div class="container"> 
 
    <h1 class="title title1">This is some h1 text</h1> 
 
    <h1 class="title title2">This is some h1 text</h1> 
 
</div>

Answer 2

あなたはまた、Firefoxのを含めるようにmix-blend-modeを見てみることがあります。

div { 
 
    background: linear-gradient(35deg, gray, gold, purple, lime, gray, gold, purple, lime, gray, gold, purple, lime, gray, gold, purple, lime); 
 
    text-align: center; 
 
} 
 
h1 { 
 
    /* clip-text average */ 
 
    mix-blend-mode: screen; 
 
    box-shadow: inset 0 0 0 100vw white; 
 

 
    /*optionnal with shadow striked *//*letter-spacing:1px;*/ 
 

 
    /* stroke average */ 
 
    text-shadow: 
 
    /* first draw a white stroke , multiplacate shadow to increase opacity */ 
 
    0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 
 
    /* use a darker color from here */ 
 
    0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000 
 
}

<div> 
 
    <h1>Another clip-text turned into mix-blend-mode</h1> 
 
</div>

codepen to play with