内側のテキストの影、青い背景、白色？

私は箱の影を持つ青色のボックスを持っていて、このようにテキストの色は白です： screenshot 。内側のテキストの影、青い背景、白色？

内側の影を追加することは可能ですか？ Like this（jsfiddle）？私の例のように、テキストの色は白では機能しません。

body { 
 
    /* This has to be same as the text-shadows below */ 
 
    background: #def; 
 
} 
 

 
h1 { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-weight: bold; 
 
    font-size: 6em; 
 
    line-height: 1em; 
 
} 
 

 
.inset-text { 
 
    /* Shadows are visible under slightly transparent text color */ 
 
    color: rgba(10, 60, 150, 0.8); 
 
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def; 
 
} 
 

 

 
/* Don't show shadows when selecting text */ 
 

 
::-moz-selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
} 
 

 
::selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
}

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

出典

2017-08-17 kalterwind

あなたはそれを保持しているテキストやボックスをシャドウイングを探していますか？ – Roysh

テキストの陰影（内側の影で、テキストの外側ではない）。プラスボックス外の影（しかし、これは問題ではない）。青い背景は＃277ac0でなければなりません。jsfiddleの例のように明るい色ではありません。 – kalterwind

私が欲しいものと私が得るもの：http://imgur.com/a/q10rB – kalterwind

それはあなたの条件であるかどうかは確認してくださいことはできますか？

body { 
    /* This has to be same as the text-shadows below */ 
    background: #006db1; 
} 
h1 { 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    font-size: 6em; 
    line-height: 1em; 
} 
.inset-text { 
    /* Shadows are visible under slightly transparent text color */ 
    color: rgba(255, 255, 255, 0.8); 
    text-shadow: 1px 4px 6px #555, 0 0 0 #ddd, 1px 4px 6px #000; 
} 
/* Don't show shadows when selecting text */ 
::-moz-selection { background: #fff; color: #000; text-shadow: none; } 
::selection { background: #fff; color: #000; text-shadow: none; }

出典

2017-08-17 07:52:07 Abinthaha

ありがとうございますが、いいえ、内面の影だけで、外の文章はありません。 – kalterwind

yuorデモでは、白いテキストの場合はinnerShaowが必要です。
ちょうどcolor: rgba(255,255,255, 0.8);を設定すると、内側の影が見えます。

body { 
 
    /* This has to be same as the text-shadows below */ 
 
    background: #277ac0; 
 
} 
 
h1 { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-weight: bold; 
 
    font-size: 6em; 
 
    line-height: 1em; 
 
} 
 
.inset-text { 
 
    background-color: #565656; 
 
    color: transparent; 
 
    text-shadow: 0px 2px 3px rgba(255,255,255,1); 
 
    -webkit-background-clip: text; 
 
    -moz-background-clip: text; 
 
    background-clip: text; 
 
} 
 
/* Don't show shadows when selecting text */ 
 

 
::-moz-selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
} 
 

 
::selection { 
 
    background: #5af; 
 
    color: #fff; 
 
    text-shadow: none; 
 
}

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

出典

2017-08-17 08:17:28 Anami

申し訳ありません、このデモではない私は）間違った背景だった、私は私のスクリーンショットから背景が必要です、それはより暗いです：＃277ac0 - そして、テキストに灰色の色だけ、影がありません。 – kalterwind

@kalterwindあなたの「内側の影」はどういうものか分かりません。あなたは私にサンプルを提供できますか？ – Anami

もちろん、私が欲しいものと手に入れているもの：http://imgur.com/a/q10rB – kalterwind

内側のテキストの影、青い背景、白色？

答えて

関連する問題