Gölge ile mektuplar. HTML ve CSS metin efektleri

tanım

Metne bir gölge ekler ve ayrıca parametrelerini ayarlar: gölgenin rengi, başlığa göre ofset ve bulanıklığın yarıçapı. Text-shadow özelliği, sözde elemanlarla birlikte çalışabilir: first-letter ve: first-line.

sözdizimi

metin gölgesi: yok | gölge [, gölge] *
  gölge nerede:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

anlam

Yok Gölge eklemeyi iptal eder. renk Kullanılabilir herhangi bir CSS biçiminde gölgenin rengi. Varsayılan olarak, gölgenin rengi metin rengiyle eşleşir. İsteğe bağlı parametre. x ofset Gölgenin metne göre yatay kaydırması. Bu parametrenin pozitif değeri gölge kaydırmasını sağa, negatif - sola ayarlar. Gerekli. ofset y Gölge metne göre dikey ofset. Metnin yukarısındaki gölgeyi yükselten negatif bir değer kullanmak da kabul edilebilir. Gerekli. yarıçapı Gölgenin bulanıklık yarıçapını ayarlar. Bu değer ne kadar büyük olursa, gölge o kadar fazla düzgünleşir, daha geniş ve açık olur. Bu parametre belirtilmezse, varsayılan değer 0 olarak ayarlanır. Tarayıcılardaki düzleştirme algoritmasının genellikle farklı olduğunu unutmayın, bu nedenle gölgenin görünümü belirtilen düzleştirme parametrelerine bağlı olarak biraz farklı olabilir.

Gölgenin birçok parametresini virgülle ayırarak belirtmeye izin verilir. CSS3'te şu sıra dikkate alınır: listedeki ilk gölge en üste, listedeki en son gölgedir. CSS2'de sıra tam tersidir: ilk gölge en altta ve sonuncu da en üsttedir.

HTML5 CSS2.1 CSS3 Birey Cr Op Sa Fx

Narenciye güneyin çalılıklarında yaşar mı? Evet, ama sahte bir kopya!

Örneğin sonucu, Şekil 2'de gösterilmiştir. 1.

Şek. 1. Safari Tarayıcıda Gölge Görünümü

tarayıcılar

Opera maksimum 6-9 gölge ayarını destekler. Bu değeri arttırmanın yanı sıra, bulanıklık yarıçapını 100 pikselin üzerine çıkarmak, tarayıcı performansını etkiler. Opera 9.5-10 sürümü, CSS2'deki gibi birkaç gölgenin görüntüsünü kullanır.

Sürüm 4.0'a Safari yalnızca bir gölge parametresini destekler, gerisi göz ardı edilir. 4.0 sürümünden bu yana, zaten birçok gölge var.

Internet Explorer, metin gölgesi özelliğini yalnızca 10.0 sürümünden anlıyor. Bunun yerine, filter: Shadow özelliğini (parametreler) kullanın. Örneğin, aşağıdaki tasarım gölgenin rengini (# 666666), yönünü (dikeyden 45 °) ve ofset değerini (4 piksel) belirtir.

filtre: Gölge (Renk = # 666666, Yön = 45, Güç = 4);

Text-shadow özelliği, metne gölge eklemek için kullanılır. Metin Gölge, şaşırtıcı efektler oluşturmanıza olanak sağlayan ilginç bir araçtır. Gölgeler tek katmanlı veya çok katmanlı, bulanık, renkli veya yarı saydam olabilir. Bir öğe için bir gölge belirterek, yalnızca bir uzunluk ve renk değeri belirleyebilirsiniz, böylece tek bir karakter veya kelimenin renkli bir kopyasını oluşturabilirsiniz.

Metin için bir gölge nasıl yapılır

Tarayıcı Desteği

IE: 10.0
kenar: 12.0
firefox: 3.5
Krom: 4.0
Safari: 4.0
Opera: 10.1
iOS Safari: 3.2
Android Tarayıcı: 2.1
Android için Chrome: 55.0

1. text-shadow özelliğinin sözdizimi

Her gölge, hem metnin kendisine hem de tasarım öğelerine (metin-dekorasyon özelliği) uygulanır. Aynı anda birçok gölgeyi virgülle ayırarak belirtebilirsiniz. Gölgeler örtüşüyor, ancak metnin kendisiyle örtüşmüyor. İlk gölge her zaman gölgelerin kalanında bulunur. Mülkiyet miras.

Her gölge iki veya üç uzunluk (üçüncü değer zorunludur) ve bir renk (isteğe bağlı değer) ile tanımlanır. Gölge rengi belirtilmezse, metin rengi kullanılır.

İlk uzunluk ofseti X ekseni boyunca, ikincisi ofseti Y ekseni boyunca ayarlar, uzunluk değerleri negatifse, gölge metinden sola ve yukarı doğru hareket eder.

Üçüncü değer, gölge anahattan bulanıklık efektinin kenarına olan mesafe olarak tanımlanan bulanıklık yarıçapını ayarlar.

  Şek. 1. text-shadow özelliğinin sözdizimi

text-shadow
değerler:
x-ofset	Gerekli değer. Gölgenin yatay olarak metne göre kayması. Hem pozitif hem de negatif değerler alabilir.
y-ofset	Gerekli değer. Gölgenin metne göre dikey kayması. Hem pozitif hem de negatif değerler alabilir.
bulanıklık	İsteğe bağlı değer. Gölgenin bulanıklık yarıçapını belirtir. Yarıçap ne kadar büyük olursa, gölge o kadar bulanık olur.
renk	İsteğe bağlı değer. Varsayılan olarak, metin rengini kabul eder. Bir değer oluşturmak için aşağıdaki renk kayıt formatlarını kullanabilirsiniz: #RRGGBB, rgb (kırmızı, yeşil, mavi), rgba (kırmızı, yeşil, mavi, alfa).
hiçbiri	Varsayılan ayar, gölge metin olmadığı anlamına gelir. Öğe gölgesini, belirtilen özelliğe sahip öğeler grubundan kaldırır.
ilk	Özelliğin değerini varsayılan değerine ayarlar.
miras almak	Özelliğin değerini üst öğeden devralır.

2. Metin için gölge örnekleri

2.1. Poster gölge

Metin gölgesi

Metin-gölge-1 (arka plan: # 77F7DE; renk: beyaz; metin-gölge: -2px -2px 0 # 4D4644, 2px -2px 0 # 4D4644, -2px 2px 0 # 4D4644, 2px 2px 4 # 4D4644, 4px 4px 0 beyaz, 5 piksel 5 piksel 0 beyaz, 6 piksel 6 piksel 0 beyaz; harf aralığı: 0,1em;)

2.2. 3B gölge

Metin gölgesi

Metin-gölge-2 (arka plan: doğrusal-gradyan (-45deg, # FEE864, # F5965E); renk: # f4f4f4; metin-gölge: -1px -1px beyaz, 1px 1px gri, 2px 2px # 7a7a7a, 3px 3px # 757575 , 4 piksel 4 piksel # 575757 9px 8px # 5c5c5c, 9px 8px 5px # 6b6b6b, 6 piksel # 666666 6 piksel, 7PX 7PX # 616161 5px 707070,, 10px 10px # 525252, 11px 11px # 4d4d4d, 18 pikselden 18 pikselden 30px RGBA (0, 0, 0,4), 18px 18px10px rgba (0, 0, 0, 4);)

2.3. Gölge metni

Metin gölgesi

Metin-gölge-3 (arka plan: # FFE6DB; renk: # FFE6DB; harf aralığı: .1em; metin-gölge: 3px 0 rgba (250, 111, 142, .5), 6px 0 rgba (250, 111, 142) .4), 9px 0 rgba (250, 111, 142, .3), 12px0 rgba (250, 111, 142, .2), 15px0 rgba (250, 111, 142, .1);)

2.4. Retro gölge

Metin gölgesi

Metin-gölge-4 (renk: # FB631E; harf aralığı: .1em; metin-gölge: 4px 4px beyaz, 6px 6px # D7CC88;)

2.5. Katmanlı gölge

Metin gölgesi

Metin-gölge-5 (arka plan: # f1f1f1; renk: # fcc105; harf aralığı: .1em; metin-gölge: 4px 4px # ff981d, 7px 7px rgba (200, 120, 22, .2);)

2.6. Şeffaf gölge

Metin gölgesi

Metin-gölge-6 (renk: saydam; metin-gölge: 4px -4px rgba (157, 217, 227, .7), -2px -2px rgba (159, 141, 105, 7), 0 2px rgba (254) , 216, 21, .7);)

2.7. Gölge zebra

Metin gölgesi

Metin-gölge-7 (arka plan: # E02A91; renk: beyaz; metin-gölge: 2 piksel 2 piksel siyah, 4 piksel 4 piksel beyaz, 6 piksel 6 piksel siyah, 8 piksel 8 piksel beyaz, 10 piksel 10 piksel siyah, 12 piksel 12 piksel beyaz, 14 piksel 14 piksel siyah, 16 piksel 16 piksel beyaz , 18px 18px siyah, 20px 20px beyaz, 22px 22px siyah, 24px 24px beyaz, 26px 26px siyah;)

2.8. Neon gölge

Metin gölgesi

Metin-gölge-8 (arka plan: siyah; renk: beyaz; metin-gölge: 0 0 5px beyaz, 0 0 10px beyaz, 0 0 15px beyaz, 0 0 20px kırmızı, 0 0 35px kırmızı, 0 0 40px kırmızı, 0 0 50px koyu kırmızı, 0 0 75px koyu kırmızı;)

2.9. Gölge Konturu

Metin gölgesi

Metin-gölge-9 (renk: beyaz; metin-gölge: 1px 1px # 732372, 1px -1px # 732372, -1px 1px # 732372, -1px -1px # 732372, 3px 3px 6px rgba (0,0,0,. 5))

2.10. EYLEM tarzı

Metin gölgesi

Metin-gölge-10 (arka plan: # F9C941; renk: # F9C941; harf aralığı: 2px; metin-gölge: 1px 1px # F3E7CF, -1px -1px # 56433D;)

2.11. Twitter tarzı

Metin gölgesi

Metin-gölge-11 (renk: # 3CF; metin-gölge: -1px 0 1px beyaz, 0 -1px 1px beyaz, 0 1px 1px beyaz, 1px 0 1px beyaz, 0 0 8px beyaz, 0 0 8px beyaz, 0 0 8px beyaz, 2px 2px 3px siyah;)

2.12. Konturlu Gölge

Metin gölgesi

Text-shadow-12 (renk: # E34C38; text-shadow: 1px 1px beyaz, 2px 2px beyaz, -1px -1px beyaz, -2px -2px beyaz, -1px 1px beyaz, 1px -1px beyaz, -2px 2px beyaz, 2px -2px beyaz, -3px -3px 4px rgba (0,0,0, .3), -3px 3px 4px rgba (0,0,0, .3), 3px 3px 4px rgba (0,0,0,. 3), 3px -3px 4px rgba (0,0,0, .3);)

tanım

Metne bir gölge ekler ve ayrıca parametrelerini ayarlar: gölgenin rengi, başlığa göre ofset ve bulanıklığın yarıçapı. Text-shadow özelliği, sözde elemanlarla birlikte çalışabilir: first-letter ve: first-line.

sözdizimi

metin gölgesi: yok | gölge [, gölge] *
  gölge nerede:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

anlam

Yok Gölge eklemeyi iptal eder. renk Kullanılabilir herhangi bir CSS biçiminde gölgenin rengi. Varsayılan olarak, gölgenin rengi metin rengiyle eşleşir. İsteğe bağlı parametre. x ofset Gölgenin metne göre yatay kaydırması. Bu parametrenin pozitif değeri gölge kaydırmasını sağa, negatif - sola ayarlar. Gerekli. ofset y Gölge metne göre dikey ofset. Metnin yukarısındaki gölgeyi yükselten negatif bir değer kullanmak da kabul edilebilir. Gerekli. yarıçapı Gölgenin bulanıklık yarıçapını ayarlar. Bu değer ne kadar büyük olursa, gölge o kadar fazla düzgünleşir, daha geniş ve açık olur. Bu parametre belirtilmezse, varsayılan değer 0 olarak ayarlanır. Tarayıcılardaki düzleştirme algoritmasının genellikle farklı olduğunu unutmayın, bu nedenle gölgenin görünümü belirtilen düzleştirme parametrelerine bağlı olarak biraz farklı olabilir.

Gölgenin birçok parametresini virgülle ayırarak belirtmeye izin verilir. CSS3'te şu sıra dikkate alınır: listedeki ilk gölge en üste, listedeki en son gölgedir. CSS2'de sıra tam tersidir: ilk gölge en altta ve sonuncu da en üsttedir.

HTML5 CSS2.1 CSS3 Birey Cr Op Sa Fx

Narenciye güneyin çalılıklarında yaşar mı? Evet, ama sahte bir kopya!

Örneğin sonucu, Şekil 2'de gösterilmiştir. 1.

Şek. 1. Safari Tarayıcıda Gölge Görünümü

tarayıcılar

Opera maksimum 6-9 gölge ayarını destekler. Bu değeri arttırmanın yanı sıra, bulanıklık yarıçapını 100 pikselin üzerine çıkarmak, tarayıcı performansını etkiler. Opera 9.5-10 sürümü, CSS2'deki gibi birkaç gölgenin görüntüsünü kullanır.

Sürüm 4.0'a Safari yalnızca bir gölge parametresini destekler, gerisi göz ardı edilir. 4.0 sürümünden bu yana, zaten birçok gölge var.

Internet Explorer, metin gölgesi özelliğini yalnızca 10.0 sürümünden anlıyor. Bunun yerine, filter: Shadow özelliğini (parametreler) kullanın. Örneğin, aşağıdaki tasarım gölgenin rengini (# 666666), yönünü (dikeyden 45 °) ve ofset değerini (4 piksel) belirtir.

filtre: Gölge (Renk = # 666666, Yön = 45, Güç = 4);

En yeşil tasarımcı bile Photoshop'ta gölgelerin nasıl çizileceğini bilir. Gölgeler tasarıma hacim verir ve şimdi çok popüler. Bir istisna ve metinler, menü öğeleri ve başlıklar için gölgeler değil. Arayüz tasarımını elmadan hatırlamak yeterlidir

Metin için gölgelerle çalışan teknik becerilerinizin cephaneliğinde bulunması faydalı olacaktır.

görev

Görüntü kullanmadan, CSS kullanarak metin için bir gölge yapın. Bununla ne başaracağız?

• esneklik - resim kullanmadan, metni değiştirmek kolaydır
• hız - daha az resim - daha az sayfa ağırlığı, daha az sunucu çağrısı
• SEO - metin, görüntülerin optimize edilmesinden daha iyidir ve metni resimle değiştirme tekniğini kullanmaktan daha güvenilirdir

Normal tarayıcılar için metin gölgeleri

W3C'nin önerileriyle az ya da çok olan tüm modern tarayıcılar normal tarayıcıların altına girmiştir. Bu durumda, bu tarayıcılar, 2003'te önerilen CSS3 metin gölgesi özelliğini anlar.

Bu nedenle, text-shadow özelliğini destekleyen tarayıcıların listesi:

• Safari 3.1 (Mac / Win) - destekler, birden çok gölge desteklenmez
• Safari 4 (Mac / Win) - tamamen desteklenir
• Opera 9.5+ (Mac / Win / Lin) - tamamen destek
• Firefox 3.1 / 3.5 (Mac / Win / Lin) - tamamen desteklenir
• Google Chrome 2 (Win) - tamamen desteklenir
• Shiira (Mac) - destekler, çoklu gölgeler desteklenmez
• Konqueror (Lin / Mac / Win) - tamamen desteklenir
• iCab (Mac) - destekler, birden çok gölge desteklenmez
• İPhone'da Safari - destekler, birden çok gölge desteklenmez
• Nokia Symbian-Akıllı Telefonlar (Series 60) - destekler
• Opera Mini 4.1 - gölge bulanıklığını desteklemiyor

Bu tarayıcılar için, bir gölge oluşturmak için CSS'deki tek bir satır yeterlidir:

H1 (metin-gölge: 0px 1px 3px # 000;)

Bu modaya uygun manşeti alıyoruz:

Metin gölgesiyle çeşitli ilginç efektler elde edebilirsiniz.

Bulanık metin

H1 (renk: #fff; arka plan: # 666; yazı gölgesi: 0px 0px 3px #fff;)

Yinelenen metin

H1 (metin-gölge: 0px 20px # 000;)

Birden çok gölge birkaç efekt daha elde etmenizi sağlar:

Kabartmalı metin

H1 (arka plan: #ccc; renk: #ccc; metin-gölge: -1px -1px # 666, 1px 1px #FFF; font-family: serif;)

Dışbükey metin

H1 (arka plan: # 999; renk: # 999; metin-gölge: 1px 1px 3px # 666, -1px -1px 3px #FFF, 1px 1px # 666, -1px -1px #px #FFF; font-family: serif;)

  (Buradaki IE, metnin gölgesini desteklemediği için güzelliğin tadını çıkarmanıza izin vermez). Metin gölgesini kullanarak birçok farklı efekt bile gösterebilirsiniz, tek pratik sınırlama hayal gücünüzdür.

Şimdi üzücü hakkında - ateşli bir şekilde tüm "favori" IE’lerinizi ne yapacaksınız?

IE’de metin gölgeleri

IE 8 sürümüne kadar metin gölgesini anlamamasına rağmen, kendi losyonlarından yoksundur. Özellikle, gölgeler oluşturmak için bir dropShadow () filtresi vardır. Gölgenin görünmesi için, öğenin bir düzeni olmalıdır. Birkaç şekilde kurabilirsiniz:

• özellik elemanının ayarlanması: blok + height () veya width ())
• elemanın ayarlanması: mutlak
• soran: sol / sağ
• ayar zum: 1

H1 (filtre: progid: DXImageTransform.Microsoft.DropShadow (color = "# 666666", offX = 2, offY = 2, pozitif = "true"); yakınlaştırma: 1;)

"Yaşasın !!!" diye bağırıyor gibiydin. ve hayattan zevk al, ama bu filtrenin gerçekte nasıl çalıştığını gör:

Bir dropShadow filtresi uygularsanız, metin bu şekilde görünecektir.

Anlamayanlar için, bu filtrenin bulunmadığı noktalara göre:

• gölge berbat görünüyor: açısal, pürüzsüz değil, arka plana yarı saydamlık geçişi ile
• yazı tipi stili bozuk
• gölgenin düzenlenmesi neredeyse imkansızdır (gölgenin konumunu yalnızca kontrol edebilirsiniz) - bu, dropShadow yerine gölge filtresi kullanılarak kısmen çevrilebilir, ancak kritik ilk iki dezavantajı kalır
• bir düzenin varlığı geliştiriciyi sınırlar

Bu sonuç gerçek projelerde kabul edilemez. Böyle bir çalışmayı geliştiricilerden kimin ve nasıl aldığı net değildir.

Kilian Valkhof gölge öykünmesini kullanmasını önerdi:

1. filtreyi doğrudan metne uygulama
2. dropShadow ve shadow yerine, ışıma ve bulanıklık filtresi bileşimini kullanın

Bu, metnin bozulmasını önler ve gölgeyi daha esnek hale getirir.

Test başlığıТестовый заголовок

H1 (metin-gölge: 3px 3px 3px #cccccc; konum: göreceli; yakınlaştırma: 1; renk: # 000;) h1 açıklık (konum: mutlak; sol: -3px; üst: -3px; z dizini: -1; süzgeç: progid: DXImageTransform.Microsoft.Glow (Renk = # cccccc, Gücü = 1) progid: DXImageTransform.Microsoft.blur (pixelradius = 3, etkin = "true"); yakınlaştırma: 1;)

Ancak bu yaklaşımla bile, hala bazı dezavantajlar var:

• anlam dışı kod, fazladan bir öğedir ve metnin tekrarlanmasıyla bile, içeriğin mantıksal yapısı, SEO optimizasyonu üzerinde en iyi etkiye sahip olmaz. Bu sorun, sayfa yüklendiğinde IE için ek bir öğe ekleyecek olan javascript kullanılarak çözülebilir.
• diğer tarayıcılardaki ekranla eşleşmiyor (metin gölgesini anlıyor) - filtreler, en az ayarlarla bir gölgeyi taklit etmenizi sağlar. Gölgenin diğer tarayıcılarla olan benzerliği her zaman mümkün değildir
• daha az esneklik - filtreler, metin gölgesinin tüm özelliklerini vermez, örneğin, birden çok gölge uygulayamazsınız

IE için gölgeler oluşturmak için, javascript'i kullanabilirsiniz (javascript ilk defa kaydetmiyor).

Javascript kullanarak metin gölgeler

Test ettiğim senaryolardan kendim için "Drop Shadow" jquery eklentisinde durdum. Avantajları:

• gölgeleri taklit ederek birden fazla kap ekleyerek, yani IE için filtreler kullanmadan. Bu, IE’deki en çok benzer gölgeleri diğer tarayıcılarla da mümkün kılar + IE’nin düzeni hakkında endişelenmenize gerek yoktur
• yalnızca IE için değil, bazen yararlı olabilecek gölgeler oluşturur
• komut dosyasının küçük ağırlığı 4Kb'dir (koddaki yorumları silerseniz) ve sıkıştırma uygularsanız, daha az olacaktır. Betik yazımında gereklilikler var - jquery.dimensions.js betiğinin varlığı, ancak nedenini hala anlamadım. Gölgeler oluşturulmaz, silinmez ve kimliksiz tanımlanır.
• basit ve kullanımı kolay
• birden fazla gölgeyi biraz başarılı bir şekilde taklit edebilirsiniz

dezavantajları:

• komut dosyası öğe kimliği ile başlatılamıyor
• öğenin arka planı varsa, metin için değil, öğenin tamamı için bir gölge oluşturulur.
• jquery kütüphanesinin zorunlu bağlantısı (ve bu 50Kb'den fazladır). Ancak jquery'nin popülaritesi bu dezavantajı neredeyse tamamen ortadan kaldırır.
• bir komut dosyası yazarak, jquery.dimensions.js de gereklidir (başka bir 2Kb). Ama neden bu kütüphanenin, her şeyin onsuz iyi çalıştığını anlamadım.

Drop Shadow eklentisinin uygulaması

sözdizimi:

JQuery (seçici) .dropShadow (seçenekler); // jQuery (selector) elemanı için bir gölge yaratın .redrawShadow (); // gölge yeniden çizme jQuery (selector) .removeShadow (); // gölge kaldır jQuery (selector) .shadowId (); // elemanın gölge kimliğini döndürür

Sol: [tam sayı] (varsayılan = 4) üst: [tam sayı] (varsayılan = 4) bulanıklık: [tam sayı] (varsayılan = 2) opaklık: [kesirli sayı] (varsayılan = 0,5) renk: [string] (default = "black") takas: [boolean] (default = false)

Sol ve üst parametreler - etiketin (veya nesnenin) sol üst köşesine göre gölgenin başlangıcını koordine eder. Pozitif değerler gölgeyi sağa ve aşağı kaydırır, negatifler sola ve yukarı kaydırır.

Tipografi, web tasarımı söz konusu olduğunda en sevdiğim oyuncak. Yine de, onun yardımıyla, yalnızca türünü veya yazı tipi boyutunu değiştirerek bir kişinin dikkatini çekebilirsiniz. Çok basit ve çok etkili, bu konuyla ilgili birçok kitap yazıldı ve anlaşmazlıklardaki birçok kopya kırıldı. Bugün genel olarak tipografiyle ilgili tavsiyelerde bulunmayacağım - Yeterli niteliklerim yok, ancak sitenizin metnini nasıl oluşturacağınız her zaman memnuniyetle karşılanıyor. Böylece, bugün CSS3 özelliklerini kullanmanın çeşitli varyasyonlarını göstereceğim. text-shadow, çok basit, ama yetenekli ellerde harikalar yaratabilir.

Temel sözdizimi text-shadow

Bu özellik CSS3  -Moz ve -webkit gibi satıcı önekleri olmadan tüm yeni tarayıcılarda çalışır. Bu özelliği anlamak için IE bile öğretilebilir, Modernizr veya benzerlerini kullanmanız gerekir.

Metin gölgesi: x-offset y-offset renk bulanıklığı;

Tüm temel sözdizimi bu. İlk değer yatay kayma, ikincisi dikeydir, gölgenin bulanıklığı ve gölgenin rengidir. Bir örnek düşünün:

Metin gölgesi: 2px 4px 3px rgba (0,0,0,0.3);

  Gölge gölgeli, 3 piksel bulanık ve% 30 şeffaflık ile siyah atandı. Neden alfa kanalı veya saydamlığı kullanıyorum? Bu, eylemlerde daha fazla özgürlük verir, sadece renk seçiminden rahatsız olmadan saydamlık değerini değiştirerek biraz daha açık veya daha koyu hale getirebilirsiniz. Oldukça hızlı bir şekilde çıkıyor, tavsiye ediyorum.

Çentikli mektuplar

   gövde (arka plan: # 222;) # metin h1 (renk: rgba (0,0,0,0.6); metin-gölge: 2px 2px 3px rgba (255,255,255,0.1);)

  Buradaki işlem prensibi şudur - arkaplan harflerden biraz daha hafiftir, hafif bir şeffaflığa sahip hafif bir gölgedir. Resimdeki sonucu deneyin.

Sert gölge

   metin-gölge: 6 piksel 6 piksel 0 piksel rgba (0,0,0,0,2);

  Şimdi retro tarzı moda, ve sadece bulanık olmayan bir gölge kullanılıyor. Bunun için hazırız.

Çift gölge

   metin-gölge: 4 piksel 3 piksel 0 piksel #fff, 9 piksel 8 piksel 0 piksel rgba (0,0,0,0,15);

  Ve burada başka bir zor özellik özelliği. text-shadowseçiciler virgüllerle ayrılmış olarak listelenebilir, böylece gerektiği kadar gölge oluşturur. İlk gölgeye arkaplan gibi bir renk atanabilir, sonra resimdeki gibi bir efekt olacaktır.

Aşağı ve uzakta

   text-shadow: 0px 3px 0px # b2a98f, 0px 14px 10px rgba (0,0,0,0.15), 0px 24px 2px rgba (0,0,0,0.1), 0px 34px 30px rgba (0,0,0,0.1) );

Metin hacimli ve arka plan üzerinde asılı, değil mi? Farklı bulanıklık ve konum seviyelerinde 4 gölge kullanır. Genel olarak, ne kadar fazla gölge kullanılırsa, sonuç o kadar gerçekçi olur, bunu projelerinizde dikkate alın.

Küçük 3B metin

   metin-gölge: 0 piksel 4 piksel 3 piksel rgba (0,0,0,0,4), 0 piksel 8 piksel 13 piksel rgba (0,0,0,0,1), 0 piksel 18 piksel 23 piksel rgba (0,0,0,0,1);

  Önceki örneğe benzer şekilde, üç gölge, ancak daha yakın, bu nedenle metnin üç boyutlu olmasının ve ağırlığının etkisi.

Mark Dotto'dan 3D metin

   text-shadow: 0 1px 0 #ccc, 0 2px 0 # c9c9c9, 0 3px 0 # bbb, 0 4px 0 # b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba (0,0,0, .1), 0 0 5px rgba (0,0,0, .1), 0 1px 3px rgba (0,0,0, .3), 0 3px 5px rgba (0,0,0, .2), 0 5px 10px rgba (0) , 0.0, .25), 010px10px rgba (0,0,0, .2), 020px20pxggba (0,0,0, .15);

  Bu tasarımcı çalışmak için ağa tökezledi ve geçemedi. Etkileyici gerçekçilik.

Gordon Hall’dan gelen depresif metin

   arka plan rengi: # 666666; -webkit-background-clip: metin; -moz-background-clip: metin; background-clip: metin; renk: şeffaf; metin-gölge: rgba (255,255,255,0.5) 0 piksel 3 piksel 3 piksel;

  Mülkiyet ile etkileyici bir başka çalışma örneği text-shadow. Fakat ilke yukarıda söylediğim gibi aynı. Biraz daha hafif arka plan, harflerin altında parlak gölge ve yukarıdaki karanlık. Basit, ama çok havalı.

Metni parla

   metin-gölge: 0 piksel 0 piksel 6 piksel rgba (255,255,255,0.7);

  Burada da her şey basittir - gölge değişmez, daha da bulanıklaşır ve beyaz yaparız. Tüm parlaklık bu.

Retro tarzı

   metin-gölge: -10px 10px 0px # 00e6e6, -20px 20px 0px # 01cccc, -30px 30px 0px # 00bdbd;

  Yukarıda retro tarzı hakkında konuştum, bu aynı operadan. Şimdi çok şık, çok net gölgeler. İsteğinize göre uygulayın

Çoklu ışık kaynakları

   metin-gölge: 0 piksel 15 piksel 5 piksel rgba (0,0,0,0,1), 10 piksel 20 piksel x 5 piksel rgba (0,0,0,0,05), -10 piksel 20 piksel x 5 piksel rgba (0,0,0,0,05);

  İşte her yöne gölgeleri veren çoklu ışık kaynaklarının etkisi.

Dışbükey metin

   renk: rgba (0,0,0,0,6); metin-gölge: 2 piksel 8 piksel 6 piksel rgba (0,0,0,0,2), 0 piksel-5 piksel 35 piksel rgba (255,255,255,0,3);

  Kabartmalı metin şimdiden dışbükeydi. Oldukça basit bir etki, ancak örneğin manşetlerde çok hoş görünüyor. Kullan, dene

Sonuç olarak şunu söylemek istiyorum - cSS3 metin gölgesi özelliği  çok basit, gördüğünüz gibi. Ancak yetenekli uygulaması ve hatta biraz hayal gücü olsa bile harikalar yaratabilir.
  Deney, iyi günler