css - CSS を使用した内側のテキストの影

Question

私は現在 CSS3 をいじっており、このようなテキスト効果 (黒いぼやけた内側の影) を実現しようとしています:

しかし、テキスト内にテキストの影を作成する方法が見つかりません。box-shadow 要素は次のように内部でシャドウをレンダリングできるため、まだ可能かどうか疑問に思います。

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

何か案は？

score 105 · Accepted Answer

:beforeおよび:after疑似要素を使用して発見したちょっとしたトリックを次に示します。

.depth {
    color: black;
    position: relative;
}
.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.1);
    position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

title 属性はコンテンツと同じである必要があります。デモ: http://dabblet.com/gist/1609945

score 47 · Accepted Answer

テキストシャドウを使用してそれを実行できるはずです。次のように考えてみてください。

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #444;
}

ここに例があります: http://jsfiddle.net/ekDNq/

score 19 · Accepted Answer

これが私の最善の試みです：

    .inner_shadow {
    color:transparent;
    background-color:white;
    text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
    font-family:'ProclamateHeavy';  // Or whatever floats your boat
    font-size:150px;
    }

   
    <span class="inner_shadow">Inner Shadow</span>

問題は、エッジの周りににじんだ影をどのようにクリッピングするかです!!! background-clip:text を使用して webkit で試しましたが、webkit は背景の上に影をレンダリングするため、機能しません。

CSSでテキストマスクを作る？

トップマスクレイヤーがないと、テキストに真の内部シャドウを適用することはできません。

おそらく誰かが W3C にbackground-clip: reverse-textを追加することを勧めるべきでしょう。これは、背景を切り取ってテキスト内に収めるのではなく、背景を切り抜いてマスクを作成するものです。

それか、text-shadow を背景の一部としてレンダリングし、background-clip: text でクリップします。

その上に同じテキスト要素を絶対に配置しようとしましたが、問題は background-clip です。テキストはテキスト内に収まるように背景をトリミングしますが、その逆が必要です。

text-stroke: 20px white; を使用してみました。この要素とその上の要素の両方に適用されますが、テキストストロークは内側にも外側にも表示されます。

代替方法

現在、CSS で反転テキストマスクを作成する方法がないため、SVG または Canvas を使用して、3 つのレイヤーでテキスト置換画像を作成し、効果を得ることができます。

SVG は XML のサブセットであるため、SVG テキストは引き続き選択および検索可能であり、Canvas よりも少ないコードで効果を生み出すことができます。

Canvas には SVG のようにレイヤーを含む dom がないため、これを実現するのは困難です。

SVG は、サーバー側で生成するか、ブラウザーで JavaScript のテキスト置換メソッドとして生成できます。

参考文献：

SVG とキャンバス:

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

SVG テキストによるクリッピングとマスキング:

http://www.w3.org/TR/SVG/text.html#TextElement

score 16 · Accepted Answer

配置されたラッパーやマークアップ内の重複するコンテンツを必要としないエレガントな例:

:root {
  background: #f2f2f2;
}
h1 {
  background-color: #565656;
  font: bold 48px 'Futura';
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

<center>
  <h1>Text With Inner Shadow</h1>
</center>

暗い背景にも似合います:

:root {
  --gunmetal-gray: #2a3439;
  background: var(--gunmetal-gray);
}

h1[itemprop="headline"] {
  font-family: 'Futura';
  font-size: 48px;
  padding-bottom: 0.35rem;
  font-variant-caps: all-small-caps;
  background-color: var(--gunmetal-gray);
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  filter: brightness(3);
}

<center>
  <h1 itemprop="headline">Text With Inner Shadow</h1>
</center>

AND ME リンク と ME2 リンク

score 10 · Accepted Answer

あなたは一種のこれを行うことができます。残念ながら、text-shadow で inset を使用する方法はありませんが、色と位置でそれを偽造することはできます。ぼかしを真下に取り、右上に沿って影を配置します。このような何かがトリックを行うかもしれません:

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

...しかし、どの色を使用するかについては、非常に注意する必要があります。そうしないと、見栄えが悪くなります。これは基本的に目の錯覚であるため、すべての状況で機能するとは限りません。また、小さいフォントサイズでは見栄えがよくないので、その点にも注意してください。

score 10 · Accepted Answer

複数の影やそのような派手なものは必要ありません。影を負の y 軸にオフセットするだけです。

明るい背景に暗いテキストの場合:

text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);

背景が暗い場合は、色と y 位置を単純に反転できます。

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

rgba 値、不透明度、ぼかしをいじって、適切な効果を得ます。それはあなたが持っているフォントと背景の色に大きく依存し、フォントが太いほど良い.

score 7 · Accepted Answer

バリエーションのこの小さな宝石を試してください：

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

私は通常、「答えがない」ことに挑戦します

score 7 · Accepted Answer

提案された解決策の多くを見てきましたが、どれも私が望んでいたものではありませんでした。

これが私の最高のハックです。色は透明で、背景と上部のテキストシャドウは同じ色で不透明度が異なり、マスクをシミュレートし、2番目のテキストシャドウはより暗く、より彩度の高い色のバージョンです実際に必要です（HSLAで行うのは非常に簡単です）.

ここに画像の説明を入力

(ところで、重複スレッドの OPに基づくテキストとスタイリング)

score 6 · Accepted Answer

テキストに内側の影が必要な場合がいくつかありますが、次のことがうまくいきました。

.inner {
    color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

これにより、テキストの不透明度が80％に設定され、2つの影が作成されます。

1つ目は、左から1ピクセル、上から2ピクセル、ぼやけた3ピクセルの白い影（テキストが白い背景にあると仮定）です。
2つ目は、不透明度80％のテキストでは表示されますが、最初の影では表示されない黒い影です。つまり、最初の影が移動した場所（左から1ピクセル、上から2ピクセル）でのみテキスト文字の内側に表示されます。この表示されているシャドウのブラーを変更するには、最初のレイヤーシャドウのブラーパラメーターを変更します。

警告

これは、100％の不透明度でなくても、テキストの目的の色を実現できる場合にのみ機能します。
これは、背景色が単色の場合にのみ機能します（したがって、テキストがテクスチャ背景にある質問者の特定の例では機能しません）。

score 5 · Accepted Answer

これを行う方法について説明しているリンクは次のとおりです。探しているものである必要があります。

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

score 4 · Accepted Answer

誰もがこれに対する答えを持っているようです。@Web_Designer のソリューションが気に入っています。しかし、それほど複雑にする必要はなく、探しているぼやけた内側の影を取得することもできます。

http://dabblet.com/gist/3877605

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
 }

.depth:before {
    content: attr(title);
    color: transparent;
    position: absolute;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}

score 4 · Accepted Answer

これは機能しているようです: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

ここで説明されているように、彼は複数の影を使用してその効果を実現しています: http://www.w3.org/Style/Examples/007/text-shadow#multiple

score 3 · Accepted Answer

web_designerの:before :afterテクニックを基に、あなたの見た目に近づけたものがここにあります。

まず、テキストを内側の影の色にします（OPの場合は黒っぽい）。

次に、:after 疑似クラスを使用して、元のテキストの透明な複製を作成し、その上に直接配置します。オフセットなしで通常のテキストシャドウを割り当てます。元のテキストの色を影に割り当て、必要に応じてアルファを調整します。

http://dabblet.com/gist/2499892

PS のように影の広がりなどを完全に制御することはできませんが、ブラー値が小さい場合はかなり問題ありません。影はテキストの境界を越えてしまうため、背景と前景のコントラストが高い環境で作業している場合は明らかです。コントラストの低いアイテム、特に同じ色合いのアイテムでは、あまり目立ちません。たとえば、この手法を使用して、金属の背景に非常に見栄えの良いエッチングされたテキストを作成することができました.

score 3 · Accepted Answer

これは私が見た中で最も良い例です。 http://lab.simurai.com/carveme/

ソースは github にあります https://github.com/simurai/lab/tree/gh-pages/carveme

score 3 · Accepted Answer

CSS3 プロパティの background-clip を使用して、TRUE インセットテキストシャドウの優れたソリューションを次に示します。

.insetText {
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

score 2 · Accepted Answer

ここでいくつかのアイデアを見た後、私が思いついたものは次のとおりです。主なアイデアは、テキストの色が両方の影と混ざり合うということです。これは灰色の背景で使用されていることに注意してください (そうしないと、白がうまく表示されません)。

.inset {
    color: rgba(0,0,0, 0.6);
    text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}

score 1 · Accepted Answer

小さいボタンの通常サイズのテキストの場合

このページの他のアイデアは、文字が小さい小さなボタンに使用すると効果が失われることがわかりました。この回答は、RobertPitt の回答を拡張したものです。

微調整は次のとおりです。

text-shadow: 1px 1px transparent, -1px -1px black;

$('button').click(function(){
  $('button').removeClass('btnActive');
  $(this).addClass('btnActive');
});

body{background:#666;}
.btnActive{
  border: 1px solid #aaa;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  color: #ecf0f8;
  background-color: #293d70;
  background-image: none;
  text-shadow: 1px 1px transparent, -1px -1px black;
  outline:none;
}

button{
  border: 1px solid #446;
  border-radius: 3px;
  color: white;
  background-color: #385499;
  background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  xxtext-shadow: 1px 1px 2px navy;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnActive">Option One</button>
<button>Option Two</button>

ノート：

このサイトを使用して、色合いを調整しました。

score 0 · Accepted Answer

これを達成するためのはるかに簡単な方法があります

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

ほら

score 0 · Accepted Answer

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

ボックスシャドウの場合:

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

オンラインテキストとボックスの影を見ることができます: オンラインテキストとボックスの影

より多くの例については、このアドレスにアクセスできます: より多くのサンプルコード freeclup

score 0 · Accepted Answer

挿入テキストの影については、この例を試してください。ここにHTMLがあります

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

そしてCSS

body {
    background: #f8f8f8;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text-shadow {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

}

Demo on Jsfiddle

score -1 · Accepted Answer

-1

このサイトから使っていますが、見た目も良さそうです。見てください内影

于 2012-03-27T09:45:31.380 に答える

css - CSS を使用した内側のテキストの影

22 に答える 22

小さいボタンの通常サイズのテキストの場合

ノート：

Related

Reference