web-dev-qa-db-ja.com

CSSを使用した内部テキストの影

私は現在CSS3で遊んでいて、次のようなテキスト効果を達成しようとしています（黒いぼやけた内側の影）：

しかし、私はテキストの影を作成する方法を見つけることができません内部テキスト。 box-shadow要素は次のように内部に影を描画できるため、それがまだ可能かどうか疑問に思います：

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

何か案は？

csstextshadow
103
ericteubert

: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 }

タイトル属性はコンテンツと同じである必要があります。デモ： http://dabblet.com/Gist/1609945

100
Web_Designer

あなたはテキストシャドウを使用してそれを行うことができるはずです、ermは次のように考えます：

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

以下に例を示します。 http://jsfiddle.net/ekDNq/

43
RobertPitt

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

    .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でクリップします。

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

テキストストロークを使用してみました：20ピクセルホワイト。この要素とその上の要素の両方にありますが、テキストストロークは出入りします。

代替方法

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

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

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

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

さらに読む：

SVG対Canvas：

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

SVGテキストを使用したクリッピングとマスキング：

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

19
kendo451

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

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

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

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

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

Rgba値、不透明度、およびぼかしをいじって、効果を適切に調整してください。フォントと背景の色に大きく依存しますが、フォントが重ければ重いほど良いでしょう。

11
Dylan

これを行うことができます。あいにく、テキストの影にインセットを使用する方法はありませんが、色と位置でそれを偽造することができます。ぼかしを真下にして、右上に沿って影を配置します。このような何かがトリックを行うかもしれません：

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

...しかし、使用する色については、本当に注意する必要があります。それは本質的に目の錯覚なので、すべてのコンテキストで動作しません。また、小さいフォントサイズではあまり見栄えがよくないので、注意してください。

10
hollsk

kendo451's answer のCSSのより正確な説明。

派手なハックの内側の影の錯覚を取得する別の方法があります、
これを3つの簡単なステップで説明します。次のHTMLがあるとします。

<h1>Get this</h1>

そしてこのCSS：

h1 {
  color: black;
  background-color: #cc8100;
}

It's a good slogan

ステップ1

テキストを透明にすることから始めましょう：

h1 {
  color: transparent;
  background-color: #cc8100;
}

It's a box

ステップ2

ここで、その背景を切り取るをテキストの形状に変換します。

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
}

The background is the text!

ステップ3

さて、魔法：ぼやけたtext-shadowを配置します。これは背景の前になり、内側の影の印象を与えます！

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
  text-shadow: 0px 2px 5px #f9c800;
}

We got it! Yay!

最終結果を参照してください。

マイナス面？

  • Webkitでのみ機能します（background-clipをtextにすることはできません）。
  • 複数の影？考えないでください。
  • 外側の輝きも得ます。
10
Alba Mendez

エレガントな例マークアップに配置されたラッパーまたは重複コンテンツを必要としない：

: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 LINKAND ME2 LINK

9
Zombyii

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

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

私は通常、「答えはありません」と挑戦します

7
Mike

提案されたソリューションの多くを見てきましたが、私が望んでいたものはまったくありませんでした。

これで私の最高のハック 、ここで色は透明で、背景と上部のテキストの影はさまざまな不透明度を持つ同じ色で、マスクをシミュレートし、2番目のテキストの影はより暗く、実際に必要な色のより飽和したバージョン（HSLAを使用すると非常に簡単です）。

enter image description here

（ところで、テキストとスタイリングは、 二重スレッドのOP に基づいています）

6
esjay

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

.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％のテキストからは見えますが、最初の影からは見えません。つまり、最初の影が移動した場所（左から1px、上から2px）でのみ文字の内側に表示されます。この目に見える影のぼかしを変更するには、最初のレイヤーの影のぼかしパラメーターを変更します。

警告

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

これを行う方法について説明しているリンクは、あなたが探しているものでなければなりません：

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

5
QuixoticForsooth

これは動作しているように見えます： http://tips4php.net/2010/08/Nice-css-text-shadow-effects/

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

4
DanMan

誰もがこれに対する答えを持っているようです。 @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);
}
4
nutcracker

Background-clip CSS3プロパティを使用した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;
}
3
Aaron

Web_designerによる:before:afterテクニックに基づいて、ここにあなたの外観により近いものがあります：

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

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

http://dabblet.com/Gist/2499892

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

3
harkyman

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

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

3
Steve

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

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

差し込みテキストの影にこの例を試してください。これが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

1
Prakash Upadhyay
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

0
MAG TOR

これを実現するはるかに簡単な方法があります

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

ボイラ

0
Warface