9

http://img208.imageshack.us/img208/6421/letterpress.png CSSで次のような活版効果を作りたいです 。しかし、私はそれに適したテキストシャドウを見つけることができないようです。

単語の色：＃2f4050背景の色：＃4f6478

私はそれを試しました：

.letterpress {
    color:#2f4050;
    font-family:Tahoma, Helvetica, Arial, sans-serif;
    font-size:70px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    text-align:center;
    text-shadow:#4f6478 0 1px 5px; 
}

しかし、それではうまくいかないようです。

4

6 に答える 6

7 
.letterpress {
    color:#2f4050;
    font-family:Tahoma, Helvetica, Arial, sans-serif;
    font-size:70px;
    text-align:center;
    text-shadow: 0 1px 1px #fff; 
}

それはそれを行う必要があります。ところで。「通常の」値のペアを宣言する必要はありません

于 2012-05-31T09:33:34.723 に答える
5

2 つの影があります。次のようなものを試してください

text-shadow: 1px 1px rgba(255,255,255,0.2), -1px -1px rgba(0,0,0,0.5);

これにより、右下に透明な白い影が、左上に透明な黒い内側の影が表示されます。

于 2012-05-31T09:34:23.970 に答える
0

影には明るい色を使用し、ぼやけを少なくします。何かのようなもの：

text-shadow: 1px 1px 2px #6ab;
于 2012-05-31T09:32:12.097 に答える
0

テキストの影は背景と同じ色です。のような明るい色を使用する必要があります#809bb5。または、たとえば rgba 値を使用できますtext-shadow: 0 1px 5px rgba(255,255,255,0.4);。最後の数字はアルファ透明度 (不透明度) です。

影を少し微調整しました... http://jsfiddle.net/qmqF5/

于 2012-05-31T09:33:07.483 に答える
0

ここでの問題は単純です。

背景色とテキストの影に同じ色を与えています。

背景とテキストの色に比べてテキストの影に明るい色を与えると、問題が解決します。

ありがとうございました。

于 2012-05-31T09:36:52.300 に答える
-1

活版印刷効果を作成するには、テキストの色よりも明るい影を追加して、効果が正しく機能するようにする必要があります。

于 2013-12-22T10:29:30.287 に答える