我似乎無法獲得正確的顏色值/名稱，因此我可以在文本上獲得Letter Press Effect。Letter Press Effect

要創建已加蓋文字的外觀，選擇文本顏色是比背景暗，然後創建一個1px的文本陰影與1px的模糊和偏差下來1px的。使文字陰影比背景稍輕

background-color: rgba(255, 255, 255, 0.8); 
color: #222; 
text-shadow: 1px 1px 1px #FFFFFF;

到目前爲止，我只得到這個

enter image description here

我怎麼會去

查找文本顏色比背景更暗。背景顏色是rgba（255,255,255,0.8），文字顏色是＃222。
找到比背景更爲細緻的文字陰影顏色。背景顏色是rgba（255,255,255,0.8），文字陰影顏色是#FFFFFF;

我需要將文本顏色（當前＃222）更改爲較深的文本陰影顏色（當前爲#FFFFFF），以背景顏色（當前爲rgba 255,255,255,0.8）打火機。我無法將背景顏色更改爲任何其他顏色。

沒有設計技巧，也許有人會怎麼樣改變文字的顏色值以及文字陰影有沒有一個字母按效果更明顯。

謝謝

來源

2012-08-15 Jawad

我想這不看不合理：http://jsfiddle.net/userdude/JPhmN/ – 2012-08-15 01:37:46

@Jared Farrish：謝謝，但它真的不是那明顯。也許像http://www.midwinter-dg.com/permalink-7-great-css-based-text-effects-using-the-text-shadow-property_2011-03-03.html – Jawad 2012-08-15 01:43:00

這看起來好一點：http://jsfiddle.net/userdude/JPhmN/1/問題的一部分是您選擇的背景;很難看到白色邊框。 – 2012-08-15 01:47:53

爲什麼你不只是做較少的文字陰影模糊的？

您使用：

color: #222; 
text-shadow: 1px 1px 1px #FFF;

使用更小的模糊和你的文字陰影變得更加普遍：

color: #222; 
text-shadow: 1px 1px 0px #FFF;

模糊是在這種情況下，第三個參數，你應該有值爲0px而不是1px，以獲得更類似於字母按壓的效果。

來源

2012-08-15 04:02:41 cereallarceny

我發現這個有用的。 http://line25.com/wp-content/uploads/2009/letterpress/demo/demo.html顏色使所有的區別...你試圖讓這個想象中的紙張的光線和陰影 - 與顏色更接近到紙而不是白色或黑色...像文字陰影：1px 1px 1px rgba（0,0,0，.5）;也許是在一個邊緣......然後另一個邊緣...... ??? text-shadow：-1px -1px 1px rgba（255,255,255 .5）; ???這樣你使用假裝紙的顏色？只是一個想法... – sheriffderek 2012-08-20 21:43:32

顏色＃222太黑了。您必須使用＃333或＃444來印刷墨水。而墨水不是固體的東西。你必須給一些噪音與文本這樣的事情：http://www.mightymeta.co.uk/demos/css-noise/

來源

2012-08-15 01:32:07 xecute

並沒有多大幫助。試圖改變字體大小和字體家族，但我真的不能說它看起來像字母壓力。 – Jawad 2012-08-15 01:37:23

我沒有說任何關於font-family或font-size的東西？ – xecute 2012-08-15 01:49:21

我知道你沒有說任何關於font-family或font-size的東西。我只是在大聲思考。無論如何，我沒有投票給你。感謝您的幫助。 – Jawad 2012-08-15 01:53:48

這是一個有點花哨，但你可以使用僞元素：

的jsfiddle

 
http://jsfiddle.net/Asustaba/MLEwp/

CSS

 

    #stamped { 
    display: block; 
    color: white; 
    font: 3em Arial, sans-serif; 
    position: relative; 
    } 

    #stamped:before, #text:after { 
    content: attr(title); 
    color: #222; 
    position: absolute; 
    } 

    #stamped:before { top: 1px; left: 1px; } 
    #stamped:after { top: 2px; left: 2px; }

HTML

 

    <h1 id="stamped" title="CATTLE FARMS">CATTLE FARMS</h1>

來源

2012-08-15 03:34:36

鬼混本使用一些文本的陰影---

http://jsfiddle.net/sheriffderek/bTZs9/1/

模糊真的取決於字體大小...以及使用RGBA顏色有助於採取了猜測工作的發現不同的色彩相匹配的紙張顏色...

enter image description here

來源

2012-08-20 23:10:03 sheriffderek

偉大的一個。謝謝。 – Jawad 2012-08-20 23:48:33

我想改變上面的鏈接，但它不會讓我。看看這個，而不是看未來的人。 http://jsfiddle.net/sheriffderek/bTZs9/ – sheriffderek 2013-02-21 21:30:47

謝謝你。它幫助了很多。儘管如此，不能再投票。 – Jawad 2013-02-24 19:04:11

Letter Press Effect

回答

的jsfiddle

CSS

HTML

相關問題