Satır içi HTML ile e-postada metin gölgesi kullanma CSS

Question

Satır içi CSS ile metin gölgesi özelliğini kullanmak mümkün mü? Başlığımı bir sınır vermeye çalışıyorum ama hiçbir şey işe yaramıyor. Bunu bir BT bilet uygulamasında bir e-posta şablonu için yazıyorum, bu yüzden ayrı bir stil sayfası ekleyemiyorum. Seçeneklerim sınırlı görünüyor. Belki benim sözdizim yanlış?

<h1 style="text-align: center"> 
 
<span style="font-family: Verdana"> 
 
<span style="text-shadow: -1px -1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, 1px 1px #ffffff"> 
 
    Service Request Created 
 
</span> 
 
</span> 
 
</h1>

benim yapmaya çalışıyorum bile mümkün olup olmadığını bana bildirin.

Answer 1

Bu satır içi bir sorun değildir. E-posta istemcileri birçok CSS özelliğini sınırlar. Metin gölgesi, tüm popüler istemcilerde çalışmaz: https://www.campaignmonitor.com/css/.

Tek çözüm, metni bir görüntü haline getirebilmenizdir.

Ayrıca, satır içi stil bildirimleri hala noktalı virgüllerle bitmelidir.

Answer 2

Css'iniz doğru görünüyor ve benim için çalışıyor. Metin karanlık bir arka plan üzerinde mi gösteriliyor? Çünkü parlak arka plan üzerinde beyaz metin gölgesi görmek zor olabilir. Ayrıca stilin sonunda önemli eklemeyi deneyin. Stilinizin geçersiz kılınmış olup olmadığını da tarayıcınızın eleman denetçisine danışın.

Answer 3

Benim için çalıştım, sadece gölgenin rengini değiştirdim.

See this fiddle

<span style="text-shadow: -1px -1px #f00, -1px 1px #f00, 1px -1px #f00, 1px 1px #f00"> 

Ayrıca e-posta istemcileri üzerinde CSS3 uyumluluğunu görmek için bu makaleye bakabilir:

https://www.campaignmonitor.com/blog/email-marketing/2010/04/css3-support-in-email-clients/

Answer 4

bir yolu çift metinler kullanıyor olabilir (sığacak şekilde gölge rengini ayarlamak ihtiyaçlarınız).

Do not ShaunOReilly tarafından commentend olarak, position: absolute (ve çok büyük olasılıkla opacity) tüm e-posta istemcileri

Güncelleme

<h1 style="text-align: center"> 
 
    <span style="font-family: Verdana; position: relative"> 
 
    <span style="position: absolute; left: 2px; top: 2px; width: 100%; color: #f00; opacity: 0.5; "> 
 
     Service Request Created 
 
    </span> 
 
    <span style="position: relative"> 
 
     Service Request Created 
 
    </span> 
 
    </span> 
 
</h1>

---

desteklenmez Çok uzun zaman önce absolute kullanmadan konumlandırma öğelerin başka bir yolla karşılaştım. ^{(ancak Outlook Desktop)} her yerde test edilmiş ve çalışmıştır, ancak aşağıdaki bağlantılı makale 2 yaşından beri, bugünün Outlook Desktop sürümünde bile çalışabilir.

<div style="width:300px;height:300px;outline:2px solid black;margin:0 auto;"> 
 
    <div style="max-height:0;max-width:0;"> 
 
     <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;outline:2px solid red;text-align:center;line-height:100px;font-size:50px;background:rgba(255,0,0,0.2)"> 
 
      1 
 
     </div> 
 
    </div> 
 
    <div style="max-height:0;max-width:0;"> 
 
     <div style="width:100px;height:100px;margin-top:150px;margin-left:150px;display:inline-block;outline:2px solid blue;text-align:center;line-height:100px;font-size:50px;background:rgba(0,0,255,0.2)"> 
 
      2 
 
     </div> 
 
    </div> 
 
    <div style="max-height:0;max-width:0;"> 
 
     <div style="width:100px;height:100px;margin-top:50px;margin-left:50px;display:inline-block;outline:2px solid green;text-align:center;line-height:100px;font-size:50px;background:rgba(0,255,0,0.2)"> 
 
      3 
 
     </div> 
 
    </div> 
 
</div>

Src: