CSSによる内側のテキストの影
回答:
これが、: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
次のように、テキストシャドウを使用してそれを実行できるはずです。
.inner_text_shadow
{
text-shadow: 1px 1px white, -1px -1px #444;
}ここに例があります：http : //jsfiddle.net/ekDNq/
これが私の最善の試みです：
.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を追加することを勧めるべきでしょう。これは、テキストの内側に収まるように背景をカットするのではなく、背景を通してマスクをカットします。
それか、テキストシャドウを背景の一部としてレンダリングし、background-clip：テキストでクリップします。
同じテキスト要素をその上に完全に配置しようとしましたが、問題はbackground-clipです。テキストはテキストの内側に収まるように背景をトリミングしますが、その逆が必要です。
私はテキストストロークを使用してみました：20px白; この要素とその上の要素の両方にありますが、テキストストロークは内側にも外側にも移動します。
別の方法
現在、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テキストでのクリッピングとマスキング：
kendo451の回答におけるCSSのより正確な説明。
派手なハックの内側の影の錯覚を取得する別の方法があり
ます。3つの簡単な手順で説明します。次のHTMLがあるとします。
<h1>Get this</h1>そしてこのCSS：
h1 {
color: black;
background-color: #cc8100;
}
ステップ1
テキストを透明にすることから始めましょう：
h1 {
color: transparent;
background-color: #cc8100;
}
ステップ2
次に、その背景をテキストの形にトリミングします。
h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
}
ステップ3
さて、魔法：ぼかしを入れますtext-shadow。これは背景の前にあり、内側の影の印象を与えます！
h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
text-shadow: 0px 2px 5px #f9c800;
}
最終結果をご覧ください。
欠点？
- Webkitでのみ機能します（
background-clipはできませんtext）。 - 複数の影？考えさえしないでください。
- あなたも外の輝きを得る。
text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;ですか？
エレガント例マークアップ内に配置ラッパーまたは重複コンテンツを必要としません。
: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>あなたは一種のこれを行うことができます。残念ながら、テキストシャドウにインセットを使用する方法はありませんが、色と位置でそれを偽造することができます。ぼかしを右下に取り、右上に沿って影を配置します。このような何かがうまくいくかもしれません：
background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;...しかし、どの色を使用するかについては本当に注意深くする必要があります。そうしないと、見落とされてしまいます。これは本質的に目の錯覚であるため、すべての状況で機能するわけではありません。また、小さいフォントサイズでは見栄えがよくないので、注意してください。
複数の影やそのような豪華なものは必要ありません。負のy軸で影をオフセットするだけです。
明るい背景の暗いテキストの場合：
text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);背景が暗い場合は、色とy位置を反転させるだけです。
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);RGBA値、不透明度、ブラーをいじって、効果を適切に調整します。それはあなたが持っている色のフォントと背景に大きく依存し、フォントが重いほど良いです。
バリエーションのこの小さな宝石を試してください：
text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);普段は「解答なし」に挑戦
提案されたソリューションの多くを見てきましたが、期待していたものはまったくありませんでした。
これが私の最高のハックです。ここでは、色は透明で、背景と上部のテキストシャドウは不透明度が異なる同じ色で、マスクをシミュレートしています。2番目のテキストシャドウは、より濃い、より飽和したバージョンの色です。実際に欲しい（HSLAでかなり簡単にできる）。
（ところで、複製スレッドのOPに基づくテキストとスタイル）
テキストに内側の影が必要な場合がいくつかありましたが、次のことがうまくいきました。
.inner {
color: rgba(252, 195, 67, 0.8);
font-size: 48px;
text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}これにより、テキストの不透明度が80％に設定され、2つの影が作成されます。
- 1つ目は、白いテキスト（テキストが白い背景にあると想定）で、左から1px、上から2pxオフセットされ、ぼかされた3pxです。
- 2番目は黒い影で、不透明度80％のテキストからは見えますが、最初の影からは見えません。つまり、最初の影がずれている部分（左から1px、上から2px）だけがテキスト文字内に表示されます。この目に見える影のぼかしを変更するには、最初のレイヤーの影のぼかしパラメーターを変更します。
注意事項
- これは、100％の不透明度でなくてもテキストの希望の色を実現できる場合にのみ機能します。
- これは、背景色が無地の場合にのみ機能します（したがって、テクスチャの背景にテキストが配置されている質問者の特定の例では機能しません）。
これは、これを行う方法について話しているリンクです。それはあなたが探しているものでなければなりません：
http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/
これは機能しているようです：http : //tips4php.net/2010/08/nice-css-text-shadow-effects/
ここで説明するように、彼は複数のシャドウを使用してその効果を実現しています：http : //www.w3.org/Style/Examples/007/text-shadow#multiple
誰もがこれに対する答えを持っているようです。@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);
}これは、私が見た中で最も良い例です。 http://lab.simurai.com/carveme/
ソースはgitthub https://github.com/simurai/lab/tree/gh-pages/carvemeにあります
上に構築 :before :after web_designerによって技術、ここにあなたの外観に近づくものです。
まず、テキストを内側の影の色にします（OPの場合は黒っぽい）。
ここで、：after psuedoクラスを使用して、元のテキストの透明な複製を作成し、その上に直接配置します。通常のテキストシャドウをオフセットなしで割り当てます。元のテキストの色を影に割り当て、必要に応じてアルファを調整します。
http://dabblet.com/gist/2499892
PSの場合のように、シャドウの広がりなどを完全に制御することはできませんが、ぼかしの値が小さい場合は、かなりまとまります。影がテキストの境界を越えているため、背景と前景のコントラストが高い環境で作業している場合、それは明らかです。コントラストの低いアイテム、特に同じ色相のアイテムでは、それほど目立ちません。たとえば、この手法を使用して、金属の背景に非常に見栄えの良いエッチングされたテキストを作成することができました。
以下は、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;
}インセットテキストシャドウにこの例を試してください。これが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);
}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
小さめのボタンの通常サイズのテキスト
このページの他のアイデアは、小さなテキスト文字の小さなボタンで使用すると効果が失われることがわかりました。この回答は、RobertPittの回答を拡張したものです。
ここにマイナーな調整があります：
text-shadow: 1px 1px transparent, -1px -1px black;注意：
このサイトから使っていますが、見た目も良いです。見てくださいインナーシャドウ