Şu anda CSS3 ile oynuyorum ve bunun gibi bir metin efekti elde etmeye çalışıyorum (siyah bulanık iç gölge):

Ancak metnin içinde metin gölgeleri oluşturmanın bir yolunu bulamıyorum . Kutu gölgesi öğesi içeride şu şekilde gölge oluşturabildiği için hala mümkün olup olmadığını merak ediyorum:

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

Herhangi bir fikir?

İşte :beforeve :aftersözde öğelerini kullanarak keşfettiğim küçük bir numara :

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

Başlık özniteliğinin içerikle aynı olması gerekir. Demo: http://dabblet.com/gist/1609945

Bunu metin gölgesini kullanarak yapabilmelisin, bunun gibi bir şey düşünebilirsin:

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

işte bir örnek: http://jsfiddle.net/ekDNq/

İşte en iyi denemem:

    .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>
   

Sorun, kenarlardan akan gölgenin nasıl kırpılacağıdır !!! Arka plan klibi: metin kullanarak webkit'te denedim, ancak webkit gölgeyi arka planın üzerinde oluşturuyor, böylece çalışmıyor.

CSS ile Metin Maskesi mi Yapıyorsunuz?

Üst maske katmanı olmadan metin üzerinde gerçek bir iç gölge yapmak imkansızdır.

Belki birisi W3C'nin arka plan klibi eklemesini önermelidir: ters metin , bu, arka planı metnin içine sığacak şekilde kesmek yerine arka planda bir maske keser.

Ya bu veya metin gölgesini arka planın bir parçası olarak işleyin ve arka plan klibi: metin ile kırpın.

Kesinlikle aynı metin öğesini üstüne yerleştirmeyi denedim, ancak sorun arka plan klibi: metin, metnin içine sığması için arka planı kırpar, ancak bunun tersine ihtiyacımız var.

Metin vuruşunu kullanmayı denedim: 20px beyaz; hem bu öğede hem de üstündeki öğede, ancak metin konturu hem içeri hem de dışarı gider.

Alternatif Yöntemler

Şu anda CSS'de ters metin maskesi yapmanın bir yolu olmadığından, efektinizi elde etmek için SVG veya Canvas'a dönebilir ve üç katmanla bir metin değiştirme görüntüsü oluşturabilirsiniz.

SVG, XML'in bir alt kümesi olduğundan, SVG metni yine seçilebilir ve aranabilir olacaktır ve efekt, Canvas'tan daha az kodla üretilebilir.

Bunu Canvas ile başarmak daha zor çünkü SVG'nin yaptığı gibi katmanlara sahip bir doma sahip değil.

SVG'yi sunucu tarafında veya tarayıcıda bir javascript metin değiştirme yöntemi olarak üretebilirsiniz.

Daha fazla okuma:

SVG'ye karşı Canvas:

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

SVG Metni ile Kırpma ve Maskeleme:

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

^{Kendo451'in cevabında CSS'nin daha kesin açıklaması .}

Süslü bir iç gölge yanılsaması elde etmenin başka bir yolu var,
bunu üç basit adımda açıklayacağım. Bu HTML'ye sahip olduğumuzu varsayalım:

<h1>Get this</h1>

ve bu CSS:

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

Aşama 1

Metni şeffaf yaparak başlayalım:

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

Adım 2

Şimdi, bu arka planı metnin şekline kırpıyoruz:

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

Aşama 3

Şimdi, büyü: Biz bulanık koyacağım text-shadowolacak olan arka planın önünde böylece bir iç gölge izlenimi veren!

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

Nihai sonucu görün .

Downsides?

• Yalnızca Webkit'te çalışır ( background-clipolamaz text).
• Birden çok gölge mi? Düşünme bile.
• Siz de bir dış parıltı elde edersiniz.

Bir zarif bir örneği yerleştirilmiş bir sargı ya da belirteç olarak yinelenen için gerek kalmadan içeriği:

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

Koyu arka planlarda da iyi görünüyor:

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

Bunu bir şekilde yapabilirsiniz. Maalesef metin gölgesinde ekleme kullanmanın bir yolu yoktur, ancak bunu renk ve konumla taklit edebilirsiniz. Bulanıklığı hemen aşağı çekin ve gölgeyi sağ üst kısım boyunca düzenleyin. Bunun gibi bir şey hile yapabilir:

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

... ancak hangi renkleri kullandığınıza gerçekten çok dikkat etmeniz gerekecek, aksi takdirde göze çarpacaktır. Esasen optik bir yanılsamadır, bu nedenle her bağlamda işe yaramaz. Ayrıca daha küçük yazı tipi boyutlarında gerçekten harika görünmüyor, bu yüzden bunun da farkında olun.

Birden fazla gölgeye veya bunun gibi süslü bir şeye gerek yok, sadece gölgenizi negatif y ekseninde dengelemelisiniz.

Açık renkli arka plan üzerinde koyu renkli metin için:

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

Koyu bir arka planınız varsa, rengi ve y konumunu kolayca ters çevirebilirsiniz:

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

Doğru efekti elde etmek için rgba değerleri, opaklık ve bulanıklık ile oynayın. Hangi renk yazı tipine ve arka plana sahip olduğunuza çok bağlıdır ve yazı tipi ne kadar ağırsa o kadar iyidir.

Bu küçük cevheri bir çeşit deneyin:

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

Genellikle "cevap yok" u bir meydan okuma olarak alırım

Önerilen çözümlerin çoğunu gördüm, ancak hiçbiri umduğum gibi değildi.

İşte bu benim en iyi hack renk arka plan ve üst metin-gölge, opasite değişen maskesi simüle ile aynı renkte, şeffaf, ve ikinci metin-gölge daha koyu, renk daha doygun versiyonudur sen aslında istiyorum (HSLA ile yapmak oldukça kolay).

(btw, metin ve bir dupe ileti dizisinin OP'sine dayalı stil )

Metinde iç gölgelere ihtiyaç duyduğum birkaç örnek yaşadım ve aşağıdakiler benim için iyi sonuç verdi:

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

Bu, metnin opaklığını% 80'e ayarlar ve ardından iki gölge oluşturur:

• İlki beyaz bir gölgedir (metnin beyaz bir arka planda olduğu varsayılarak) soldan 1px ve üstten 2px, bulanık 3px.
• İkincisi,% 80 opaklık metninden görülebilen, ancak ilk gölgeden görülemeyen siyah bir gölgedir; bu, metin harflerinin içinde yalnızca ilk gölgenin yer değiştirdiği yerde görülebileceği anlamına gelir (soldan 1 piksel ve üstten 2 piksel). Bu görünür gölgenin bulanıklığını değiştirmek için, ilk katman gölgesinin bulanıklaştırma parametresini değiştirin.

Uyarılar

• Bu, yalnızca metnin istenen rengi% 100 opaklıkta olmak zorunda kalmadan elde edilebilirse işe yarar.
• Bu, yalnızca arka plan rengi sabitse işe yarar (bu nedenle, soruyu soran kişinin, metnin dokulu bir arka plan üzerinde bulunduğu özel örneği için çalışmayacaktır).

İşte bunun nasıl yapılacağından bahseden bir bağlantı, aradığınız şey olmalı:

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

Çalışıyor gibi görünüyor: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

Bu etkiyi elde etmek için burada açıklandığı gibi birden çok gölge kullanıyor: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Görünüşe göre buna herkesin bir cevabı var. @Web_Designer'ın çözümünü beğendim. Ancak bunun kadar karmaşık olması gerekmez ve aradığınız bulanık iç gölgeyi yine de elde edebilirsiniz.

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);
}

Bu, gördüğüm en iyi örnek. http://lab.simurai.com/carveme/

Kaynak gitthub'da https://github.com/simurai/lab/tree/gh-pages/carveme

Üzerine inşa :before :after web_designer tarafından teknikle, burada bakmak daha yakın geliyor şeydir:

İlk olarak, metninizi iç gölgenin rengi yapın (OP durumunda siyahımsı).

Şimdi, orijinal metnin doğrudan üstüne yerleştirilmiş saydam bir kopyasını oluşturmak için bir: after psuedo sınıfını kullanın. Uzaklık olmadan normal bir metin gölgesi atayın. Orijinal metin rengini gölgeye atayın ve alfayı gerektiği gibi ayarlayın.

http://dabblet.com/gist/2499892

PS'de yaptığınız gibi gölgenin yayılması vb. Üzerinde tam bir kontrole sahip değilsiniz, ancak daha küçük bulanıklık değerleri için oldukça makul. Gölge, metnin sınırlarını aşar, bu nedenle, yüksek kontrastlı arka plan ön planlı bir ortamda çalışıyorsanız, açıkça görülecektir. Daha düşük kontrastlı öğeler için, özellikle aynı renk tonuna sahip olanlar için çok fazla fark edilmez. Örneğin, bu tekniği kullanarak metal zeminlerde çok güzel görünümlü kazınmış metinler oluşturabildim.

İşte arka plan klibi CSS3 özelliğini kullanarak GERÇEK ek metin gölgesi için harika bir çözüm:

.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;
}

Burada bazı fikirlere baktıktan sonra bulduğum şey şu. Ana fikir, metnin renginin her iki gölgeyle karışmasıdır ve bunun gri bir arka planda kullanıldığına dikkat edin (aksi takdirde beyaz iyi görünmez).

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

Ek metin gölgesi için bu örneği deneyin. İşte HTML

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

ve 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

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

kutu gölgesi için:

-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);

çevrimiçi metin ve kutu gölgesini görebilirsiniz: çevrimiçi metin ve kutu gölgesi

daha fazla örnek için bu adrese gidebilirsiniz: daha fazla örnek kod freeclup

Bunu başarmanın çok daha basit bir yolu var

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

Voilà

Küçük boyutlu düğmelerdeki normal boyutlu metin için

Bu sayfadaki diğer fikirleri küçük metin harfli küçük düğmelerde kullanıldığında etkinliklerini yitirmek için buldum. Bu cevap RobertPitt'in cevabını genişletiyor .

İşte küçük ayar:

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>

Not:

Renk tonlarını incelemek için bu siteyi kullandım .

Bu siteden kullanıyorum, ayrıca iyi görünüyor. Şuna bir bak İç gölge