帶漸變和邊框的文本

將邊框與漸變背景組合爲字體的方法有哪些？帶漸變和邊框的文本

使用文字陰影殺死背景效果，webkit筆觸進入內部字體，也不會在某些瀏覽器中工作。也嘗試過使用svg，或多或少地獲得與webkit相同的結果，只有pro纔是瀏覽器的兼容性。

也許與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; 
    }

來源

2016-12-15 Tyra Pululi

你試過'合併文本shadow'聲明阿爾法通道？即。使用指定爲'rgba'或'hsla'的顏色？ – Rounin

是的，同樣的結果。 –

好了，這是一個有點哈克所以請不要恨我太多，但它能夠完成任務，我認爲。

基本上我將梯度應用到.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>

來源

2016-12-15 19:56:26 Brad

有趣的方法謝謝 –

你也可以看看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

來源

2016-12-15 21:57:20

帶漸變和邊框的文本

回答

相關問題