不透明度的垂直文本漸變

我試圖用CSS3或jQuery或SVG或畫布實現以下，但我有一些困難。不透明度的垂直文本漸變

enter image description here

四件事情是應該注意的：

文本的梯度veritcal，並有不透明參與
文本可以多行（它的客戶端輸入）
有一個圍繞文字的輪廓（文字陰影可能是合適的，不需要IE支持）
背後有一個背景圖片它。

最簡單的解決方案是-webkit-linear-gradient，但儘管我喜歡Webkit，但我覺得我有責任作爲開發者在一定程度上支持Firefox，Opera和IE。

克里斯Coyier用在他demo和我加了背景圖片來顯示它在行動：

enter image description here

由於沒有出現在這個時候一個跨瀏覽器的選擇，我會轉向JavaScript和流行的jQuery尋求答案。其中幾乎沒有。

第一個是來自MRNIX的一個叫做PXGradient的整潔插件。你可以checkout his website，但全都用俄語。基本上使用該腳本輸入一個HEX值數組，並找到它們之間的中間點，創建一個<u>標記和一個<s>標記，其中都包含父文本的內容。它創造了一個不錯的效果。

enter image description here

雖然它不支持文本陰影和背景圖像，它不支持透明度。我遇到了幾個其他插件，它們可以執行類似於十六進制到十六進制的轉換，但是他們都不支持我能找到的rgba。

Stackoverflow出現this related question，並引用Cufon。庫豐是偉大的，但不允許文字陰影。

SVG也出現了，其中我找到了this example，但是SVG必須是當前的寬度和高度，我不知道這個文本是什麼（它是由客戶端輸入的）。

enter image description here

（除非我們能得到文本的高度和寬度，動態追加SVG。但我的SVG的知識是非常可怕的，所以我可能需要一些幫助這一點。）

我已經看過在CSS選項，jQuery插件，SVG和畫布，我沒有太多的運氣。

有沒有人有我可以使用的想法？任何解決方案都會有幫助。

乾杯！

來源

2014-10-29 Kenton de Jong

你不能只使用CSS透明度包含的元素上結合PXGradient插件？或者你是否希望不透明度成爲漸變的一部分？ – APAD1 2014-10-29 19:01:38

@ APAD1我目前正在這樣做，但在文本的頂部沒有不透明，而底部有大約50％的不透明度。所以我想將不透明度分開。我可能只是聯繫插件創建者，看看他是否可以修改以接受rgba值... – 2014-10-29 19:09:00

這種效果在SVG中很容易實現，並且可以在所有現代瀏覽器中使用，包括IE10 +。

HTML/SVG

<img src="http://lorempixel.com/400/300"/> 

<svg width="400" height="300"> 
    <defs> 
     <linearGradient id="textgrad" x2="0" y2="1"> 
      <stop offset="0.65" stop-color="white" stop-opacity="0.7"/> 
      <stop offset="0.9" stop-color="white" stop-opacity="0"/> 
     </linearGradient> 
     <filter id="emboss"> 
      <feConvolveMatrix kernelMatrix="1 0 0 
              0 0 0 
              0 0 -1"/> 
     </filter> 
    </defs> 

    <text class="textblock fading"> 
     <tspan x="20" y="130">ERGY</tspan> 
     <tspan x="20" y="260">SOLU</tspan> 
    </text> 
    <text class="textblock embossing"> 
     <tspan x="20" y="130">ERGY</tspan> 
     <tspan x="20" y="260">SOLU</tspan> 
    </text> 
</svg>

CSS

svg { 
    position: relative; 
    top: -300px; 
} 

.textblock { 
    font-family: sans-serif; 
    font-size: 130px; 
    font-weight: bold; 
} 

.fading { 
    fill: url(#textgrad); 
    stroke: white; 
    stroke-width: 0.5; 
    stroke-opacity: 0.5; 
} 

.embossing { 
    fill: white; 
    filter: url(#emboss); 
}

Demo here

來源

2014-10-30 04:37:11

OMG。如果我能吻你，我會的！我可以使用jQuery來查看是否有換行符，然後改變SVG元素的高度。太棒了。謝謝！謝謝！ – 2014-10-30 05:42:36

不透明度的垂直文本漸變

回答

相關問題