Metin Gölge Oluşturucu
CSS text-shadow efektlerini gorsel olarak tasarlayin. Birden fazla golge katmani ekleyin, her biri icin offset, bulaniklik ve renk ayarlayin.
Öne çıkan özellikler
- Birden fazla gölge katmanı desteği
- Katman başına ofset, bulanıklık ve renk kontrolü
- Hazır efektler (neon, kabartma, retro, 3D)
- Düzenlenebilir önizleme metni
Guide
CSS text-shadow özelliği, metin karakterlerinin arkasına gölge katmanları ekler. Hem işlevsel hem de dekoratif amaçlara hizmet eder: meşgul arka planlarda metin okunaklılığını artırma, derinlik ve boyut yaratma, neon parıltı efektleri üretme, retro ve vintage tipografik stiller oluşturma ve başlıklara ve display metnine ince bir cila ekleme. Bu kılavuz sözdizimini, katmanlama tekniklerini, yaygın efektleri, performans değerlendirmelerini ve pratik tasarım desenlerini ele almaktadır. text-shadow sözdizimi, iki ila dört değer artı isteğe bağlı bir renk alır: text-shadow: offset-x offset-y blur-radius color. offset-x değeri gölgeyi yatay olarak taşır (pozitif sağa, negatif sola taşır). offset-y değeri gölgeyi dikey olarak taşır (pozitif aşağıya, negatif yukarıya taşır). blur-radius değeri gölgenin ne kadar dağınık olduğunu kontrol eder (0 keskin kenarlı bir kopya yaratır, daha yüksek değerler daha yumuşak gölgeler yaratır). color değeri gölge rengini ayarlar (atlanırsa metin rengine varsayılan davranır). Örnek: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), aşağı sağa kaydırılmış yumuşak bir koyu gölge yaratır. Birden çok gölge virgülle ayrılır ve her gölge sırayla oluşturulur (ilk gölge en üstte). Bu katmanlama yeteneği karmaşık efektleri mümkün kılar. text-shadow: 1px 1px 0 #000, 2px 2px 0 #333, 3px 3px 0 #666, artan kaydırmalarda üç gölge katmanıyla yığılmış bir 3D efekti yaratır. İlk gölge (metne en yakın) en koyudur ve her sonraki gölge daha açıktır ve derinliği taklit eder. Yığabileceğiniz gölge sayısında bir sınır yoktur, ancak performans çok yüksek sayılarda (genellikle 10 ila 15 bulanık katmanın üzeri) bozulur. Bulanıklık yarıçapı gölge türünü belirler. 0 bulanıklık yarıçapı, 3D ekstrüzyon efektleri, dış hatlar ve yığılmış gölgeler için yararlı olan metnin sert bir kopyasını yaratır. Küçük bir bulanıklık yarıçapı (1px ila 3px), metin okunaklılığını artırmak için uygun olan ince, sıkı bir gölge yaratır. Orta bir bulanıklık yarıçapı (4px ila 8px), başlık vurgusu için görünür ama yumuşak bir gölge yaratır. Büyük bir bulanıklık yarıçapı (10px ila 30px), gölgenin metin dış hatlarının ötesine iyi şekilde yayıldığı bir parıltı efekti yaratır. Çok büyük bulanıklık yarıçapları (40px+) ortam parıltı efektleri yaratır. Bulanıklık algoritması bir Gauss bulanıklığıdır, yani gölge yoğunluğu merkezden pürüzsüz şekilde düşer. Okunaklılık gölgeleri en pratik uygulamadır. Metin bir fotoğraf, gradyan veya desenli arka plan üzerinde bulunduğunda, ince bir gölge katı bir arka plan eklemeden okunabilirliği artırır. Çeşitli arka planlarda açık metin için: text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6). Çeşitli arka planlarda koyu metin için: text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8). Anahtar, kaydırmaları küçük (0 ila 1px) ve bulanıklığı yumuşak (2px ila 4px) tutmaktır, böylece gölge metni kendisi bir görsel öğe olarak fark edilmeden destekler. Bu teknik hero bölümlerinde, banner metninde ve görüntüler üzerine bindirilmiş her metinde yaygın olarak kullanılır. Gölge kaydırmalarının yönü bir ışık kaynağını bildirir. Sağ alta (pozitif x, pozitif y) kaydırılmış bir gölge, sol üstte bir ışık kaynağını ima eder; bu, arayüz tasarımında en yaygın gelenektir ve fiziksel nesneleri yukarıdan aydınlatılmış olarak nasıl algıladığımızla eşleşir. Düz aşağı kaydırılmış (0 x, pozitif y) bir gölge, baş üstü bir ışık kaynağını ima eder. Bir sayfadaki tüm öğeler arasında tutarlı gölge yönü, birleşik bir ışık kaynağı illüzyonunu korur. Gölge yönlerini karıştırmak (bir öğe sağa, diğeri sola gölgeli) görsel tutarsızlık yaratır. Neon parıltı efektleri, parlak, doygun renklerle büyük bulanıklık yarıçapları kullanır. Teknik, artan bulanıklık yarıçaplarıyla sıfır kaydırmada birden çok gölgeyi katmanlandırır. Temel bir neon efekt: text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa. İç gölgeler beyazdır (bir neon tüpünün parlak çekirdeğini taklit eder), dış gölgeler parıltı rengini kullanır. Tam neon efekti için metin rengini beyaza ve arka planı koyuya (siyaha yakın) ayarlayın. Gerçek neon tabelaları taklit etmek için ince vuruşlara sahip bir fontla (monoline veya script font gibi) eşleştirin. CSS animasyonlarıyla neon yanıp sönmesi, hafifçe farklı gölge yapılandırmaları arasında döngü yapan animasyonlarla eklenebilir. Tam gölge seti ile azaltılmış bir sürüm (daha az katman, daha düşük bulanıklık yarıçapları) arasında her 0.1 ila 0.5 saniyede bir değişen bir anahtar kare animasyonu ikna edici bir yanıp sönme yaratır. Yanıp sönmenin mekanik değil doğal hissettirmesi için animasyon zamanlama varyasyonları (steps(), rastgele görünümlü süreler) ekleyin. Bu efekt retro temalı açılış sayfaları, oyun arayüzleri ve portföy siteleri için popülerdir. 3D ekstrüzyon efektleri, artan kaydırmalarda sert gölgeleri istifleyerek derinlik illüzyonu yaratır. Temel bir 3D metin efekti: text-shadow: 1px 1px 0 #555, 2px 2px 0 #555, 3px 3px 0 #555, 4px 4px 0 #555, 5px 5px 0 #555. Her katman metinden bir piksel daha uzaktadır ve ekstrüze bir görünüm oluşturur. Daha rafine bir etki için her sonraki katmanı koyulaştırın: text-shadow: 1px 1px 0 hsl(210, 50%, 40%), 2px 2px 0 hsl(210, 50%, 35%), 3px 3px 0 hsl(210, 50%, 30%), 4px 4px 0 hsl(210, 50%, 25%). Sert katmanlardan sonra yumuşak bir gölge eklemek (5px 5px 10px rgba(0,0,0,0.4)), 3D metni dökülmüş bir gölgeyle yerleştirir. Uzun gölge efektleri, 3D ekstrüzyon kavramını çok daha fazla katlama genişletir ve arka plan boyunca uzanan gölgeler yaratır. Uzun bir gölge, her biri kademeli olarak solan renkle 1px kaydırılmış 50 veya daha fazla katmanı istifleyebilir. Bunları elle oluşturmak pratik değildir. Gölge katmanlarını programlı olarak oluşturmak için bir döngüyle bir CSS önişlemcisi (Sass veya Less) kullanın. Sass'ta: $shadow: (); @for $i from 1 through 50 { $shadow: append($shadow, ($i * 1px $i * 1px rgba(0,0,0, 0.5 - $i * 0.01)), comma); } text-shadow: $shadow. Sonuç, metnin arkasında uzanan dramatik bir diyagonal gölgedir. Dış hat (stroke) efektleri, metin dış hattı oluşturmak için sıfır veya küçük kaydırmalarda birden çok sert gölge kullanır. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, keskin gölgeleri dört diyagonal köşenin tümüne yerleştirir ve metni 1px'lik bir dış hatla çevreler. Daha eksiksiz bir dış hat için, ana yönlerde de gölgeler ekleyin: 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000. Daha kalın bir dış hat için kaydırmaları 2px'ye çıkarın ve ara konumlar ekleyin. CSS'nin ayrıca metin dış hatları için -webkit-text-stroke özelliği olduğunu unutmayın; bu daha pürüzsüz sonuçlar sağlar ama yalnızca WebKit/Blink tarayıcılarda çalışır. text-shadow yaklaşımı daha evrensel olarak desteklenir. Retro ve vintage metin efektleri, text-shadow'ı belirli fontlar ve renk paletleriyle birleştirir. Bir letterpress (basık) efekti, hafifçe yukarıda koyu bir gölge ve hafifçe aşağıda açık bir gölge kullanır: text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3). Bunu orta gri bir arka planda gri metne uygulayın. Yukarıdaki koyu gölge, metnin yüzeye basıldığını, altındaki açık gölge ise alt kenardaki ışığı yakaladığını ima eder. Bir kabarık (embossed) etki gölgeleri tersine çevirir: üstte açık, altta koyu. Her iki efekt de daha ağır font ağırlıkları ve yumuşatılmış renk paletleriyle en iyi çalışır. Ateş, buz ve element metin efektleri, renk gradyanlarıyla birçok gölgeyi katmanlandırır. Bir ateş efekti şunları kullanabilir: text-shadow: 0 0 4px #fefcc9, 0 -2px 6px #feec85, 0 -4px 11px #ffae34, 0 -6px 17px #ec760c, 0 -8px 22px #cd4606, 0 -10px 28px #973716, 0 -14px 40px #451b0e. Her katman, tabanda parlak sarıdan turuncu ve koyu kırmızıya geçişle yukarı taşınır (negatif y-kaydırması) ve alevi taklit eder. Bir buz efekti, gölgeler aşağı uzanarak mavi ve beyaz tonlarıyla aynı tekniği kullanır. Bu dekoratif efektler yaratıcı projelerdeki başlıklar, oyun arayüzleri ve promosyon materyalleri için ayrılmış en iyileridir. text-shadow performansı tipik kullanım durumları için (bir ila üç gölge katmanı) genellikle iyidir. Her gölge katmanı, tarayıcının belirtilen renk, kaydırma ve bulanıklıkla metnin ek bir kopyasını oluşturmasını gerektirir. Sert gölgeler (blur-radius: 0) basit kaydırılmış kopyalar olduklarından ucuzdur. Bulanık gölgeler daha pahalıdır çünkü tarayıcı her katman için bir Gauss bulanıklığı hesaplamak zorundadır. Neon efektlerinde olduğu gibi 8+ bulanık gölgeyi, animasyonlu büyük metinde veya sıkça yeniden boyanan bir alanda istiflemek, düşük uçlu cihazlarda kare hızını etkileyebilir. Ağır gölgeli animasyonlu metin için hedef cihazlarda test edin ve mobilde gölge sayısını azaltmayı düşünün. CSS geçişleriyle text-shadow'u canlandırmak ilgi çekici hover efektleri yaratır. Yaygın bir desen, hover'da gölge yoktan görünür bir gölgeye geçiş yapar: transition: text-shadow 0.3s ease. İki karmaşık çok katmanlı gölge arasında canlandırma çalışır ama her iki durumun da aynı sayıda gölge katmanı olmasını gerektirir. Başlangıç durumunun üç katmanı ve hover durumunun beş katmanı varsa, ek katmanlar için geçiş pürüzsüz ara değerler almaz (soleri yerine belirirler). Pürüzsüz geçişler için animasyon durumları arasında katman sayılarını tutarlı tutun. CSS özel özellikleriyle text-shadow, temalandırılabilir, bakımı yapılabilir efektler sağlar. Gölgelerinizi özel özellikler olarak tanımlayın: --shadow-heading: 2px 2px 4px rgba(0,0,0,0.3). Stillerinizde bunlara referans verin: text-shadow: var(--shadow-heading). Koyu modda özelliği yeniden tanımlayın: --shadow-heading: 2px 2px 8px rgba(0,0,0,0.7) (koyu arka planlarda aynı görsel etki için daha güçlü gölge gerekir). Bu yaklaşım gölge değerlerini tek bir yerde tutar ve tema değişimini kolaylaştırır. Ayrıca bileşen düzeyinde gölge belirteçleri oluşturabilirsiniz: --shadow-btn-hover, --shadow-heading-hero, --shadow-text-overlay. text-shadow ile font seçimi arasındaki ilişki önemli ölçüde önemlidir. İnce, hafif ağırlıklı fontlar zarif görünebilen narin gölgeler üretir. Kalın, ağır fontlar dikkat çeken kalın, belirgin gölgeler üretir. Script ve dekoratif fontlar, bitişik karakterlerin örtüşen gölge katmanlarının birbirini etkilemesiyle dağınık gölgeler üretebilir. Monospace fontlar, tutarlı karakter genişlikleri düzgün gölge aralığı yarattığından temiz, düzgün gölgeler üretir. Gölge efektinizi gerçek fontunuzla gerçek boyutunuzda test edin. Bir örnek kelimede harika görünen bir etki tam bir cümlede dağınık görünebilir. Farklı arka plan türlerinde text-shadow farklı yaklaşımlar gerektirir. Düz arka planlarda tam kontrole sahipsiniz ve herhangi bir gölge tekniğini kullanabilirsiniz. Gradyan arka planlarda, gölge renginin tüm gradyan aralığında çalıştığından emin olun. Görüntülerde, metnin arkasında görüntünün hangi parçası olursa olsun kontrast yaratan gölgeler kullanın (okunaklılık gölgesi yaklaşımı burada en iyi çalışır). Şeffaf veya yarı saydam arka planlarda (cam efektleri), arka plan rengi değiştiğinden okunaklılığı korumak için text-shadow genellikle önemlidir. Koyu arka planlar için daha parlak gölge renkleri veya parıltı efektleri kullanın. Açık arka planlar için standart koyu gölgeler kullanın. text-shadow, text-decoration ile belirli şekillerde etkileşime girer. Alt çizgiler, üst çizgiler ve üstü çizgiler gölge almaz. Gölge yalnızca glif şekillerinin kendisine uygulanır. Gölgesi olan metni gölgeli bir alt çizgiyle birlikte kullanmanız gerekirse, alt çizgi için bir pseudo-element veya border-bottom kullanın ve kendi box-shadow'unu uygulayın. Benzer şekilde, text-shadow seçim vurgusu rengini (::selection pseudo-element) etkilemez. Gölge seçili metnin arkasında görünür kalır ve bu da belirli renk kombinasyonlarıyla tuhaf görsel efektler yaratabilir. Duyarlı tasarımda text-shadow font boyutuyla ölçeklenmelidir. 48px'lik bir başlıkta uygun görünen 2px'lik bir gölge, mobilde 24px'lik bir başlıkta orantısız büyük olur. Orantılı ölçeklemeyi korumak için gölge değerleri için px yerine em birimleri kullanın: text-shadow: 0.04em 0.04em 0.08em rgba(0, 0, 0, 0.3). Bu gölge font boyutuyla ölçeklenir ve gerçek oluşturulan boyuttan bağımsız olarak aynı görsel oranı korur. Duyarlı yardımcı program sınıfları için farklı başlık seviyeleri için gölge varyantları tanımlayın. SVG metin efektleri ve tuval (canvas) metin oluşturma ile karşılaştırıldığında CSS text-shadow, yetenek ve performans açısından farklılık gösterir. SVG, metin öğelerine uygulanan filtreler, maskeler, gradyanlar ve desenler aracılığıyla daha sofistike metin efektleri sunar. Tuval, shadowBlur, shadowColor ve shadowOffsetX/Y özellikleriyle metin oluşturma üzerinde piksel düzeyinde kontrol sağlar. CSS text-shadow, web metni için en basit ve en performanslı seçenektir. Standart gölge efektleri için CSS kullanın. CSS gölgelerinin sunduğunun ötesindeki efektler için SVG'ye ulaşın. Tuval, grafikler ve görselleştirmeler gibi dinamik, veri güdümlü metin oluşturma için uygundur. text-shadow'u diğer CSS metin özellikleriyle birleştirmek katmanlı efektler yaratır. text-shadow artı background-clip: text (-webkit-background-clip: text ile) artı bir gradyan arka planı, gradyan dolgu ve bir gölge ile metin yaratır. Bir üst öğede text-shadow artı mix-blend-mode, gölgenin blend moduna göre arka planla etkileştiği harmanlanmış gölge efektleri yaratır. Üst öğede text-shadow artı filter: drop-shadow(), gölgeli metnin bir gölgesini yaratır ve derinlik efektini ikiye katlar. Bu kombinasyonlar güçlüdür ama destek değiştiğinden tarayıcılar arasında test gerektirir. E-posta istemcilerinde text-shadow sınırlı ama yararlı desteğe sahiptir. Çoğu modern e-posta istemcisi (Gmail, Apple Mail, Mac'te Outlook, Yahoo Mail) temel text-shadow'u destekler. Windows'ta Outlook (Word'ün oluşturma motorunu kullanır) text-shadow'u desteklemez. E-posta tasarımı için text-shadow'u aşamalı bir geliştirme olarak kullanın: e-posta onsuz iyi görünür ve onunla daha iyi görünür. Efektleri basit tutun (tek katman, küçük kaydırma, ölçülü bulanıklık) çünkü web'de harika görünen çok katmanlı gölgeler e-posta istemcilerinde öngörülemez şekilde oluşturulabilir. Yazdırma stil sayfaları genellikle text-shadow'u kaldırmalıdır. Gölgeler ekranda görsel ağırlık ekler ama yazdırmada, özellikle mürekkep püskürtmeli yazıcılarda bulanık görünebilir. @media print { * { text-shadow: none; } } kullanarak yazdırma çıktısındaki tüm metin gölgelerini soyun. Belirli gölgeler yazdırmada işlevsel bir amaca hizmet ediyorsa (renkli bir arka planda metin kontrastını sağlamak gibi), dekoratif gölgeleri kaldırırken bunları seçici olarak koruyun. text-shadow'da tarayıcı oluşturma farkları küçüktür ama mevcuttur. Chromium tabanlı tarayıcılar, Firefox ve Safari'nin tümü text-shadow'u aynı sözdizimiyle destekler ama bulanıklığı biraz farklı oluşturabilir. Firefox, aynı değer için Chrome'dan daha sıkı bulanıklık yarıçapları üretme eğilimindedir. Safari, aşırılarda çok büyük bulanıklık değerlerini farklı ele alabilir. Bu farklar pratik kullanımda nadiren fark edilir ama piksel mükemmel tasarımlar için önemli olabilir. Tam gölge görünümü önemliyse, tüm hedef tarayıcılarda test edin ve bir son çare olarak CSS özellik sorguları veya kullanıcı aracısı algılaması kullanarak tarayıcıya göre değerleri ayarlayın. CSS çerçevelerinde text-shadow performansı yardımcı program sınıfları aracılığıyla yönetilebilir. Tailwind CSS, box-shadow için iyi çalışan gölge yardımcı programları sağlar ancak text-shadow için özel yapılandırma gerektirir. Tailwind yapılandırmanıza text-shadow yardımcı programları ekleyin: temeyi textShadow değerleriyle genişletin ve ilgili yardımcı program sınıfları oluşturan bir eklenti oluşturun. Bu, projedeki tutarlılığı tekrarlayan satır içi stiller olmadan koruyan text-shadow-sm, text-shadow-md, text-shadow-lg ve text-shadow-glow gibi sınıflar sağlar. text-shadow değerlerini programlı olarak oluşturmak birçok katmanlı efektler için gereklidir. 3D ekstrüzyon efekti oluşturan bir JavaScript fonksiyonu: const layers = Array.from({length: depth}, (_, i) => (i+1) + 'px ' + (i+1) + 'px 0 ' + color).join(', '). Neon efektleri için bir fonksiyon, artan bulanıklıkla eş merkezli parıltı katmanları oluşturabilir: const glow = radii.map(r => '0 0 ' + r + 'px ' + color).join(', '). Bu oluşturulan değerleri CSS özel özelliklerinde (--shadow-3d, --shadow-neon) saklamak, JavaScript karmaşık oluşturma mantığını yönetirken CSS'i temiz tutar. Değişken fontlarla text-shadow ilginç olasılıklar yaratır. Değişken fontlar pürüzsüz ağırlık geçişlerine izin verdiğinden, animasyonlu bir font-weight ile buna karşılık gelen animasyonlu bir text-shadow'u birleştirmek, aynı anda daha ağır görünmeye ve daha derin bir gölge atmaya başlayan metin yaratır. Her iki özelliği bir CSS geçişinde veya animasyonunda ayarlayın: font-weight'i 400'den 700'ye geçiş yaparken text-shadow'u 1px 1px 2px rgba(0,0,0,0.2)'den 2px 2px 6px rgba(0,0,0,0.4)'e geçirmek uyumlu bir ağırlık ve derinlik animasyonu üretir. text-shadow için erişilebilirlik değerlendirmeleri açıktır: gölgeler metin okunaklılığını azaltmamalıdır. Yaygın bir hata, kontrast için gölgesine güvenen bir metin rengi kullanmaktır. Gölge oluşturulamazsa (eski e-posta istemcileri, bazı erişilebilirlik araçları, yazdırma stil sayfaları), metin arka planına karşı kendi başına yine de okunabilir olmalıdır. text-shadow'u okunaklılığı yaratmak için değil, artırmak için kullanın. Temel metin rengi, herhangi bir gölgeden bağımsız olarak arka plana karşı WCAG kontrast gereksinimlerini karşılamalıdır. Windows'taki Yüksek Kontrast modu text-shadow'u tamamen kaldırır, bu nedenle tasarımınızın onsuz çalışması gerekir. text-shadow üreteci aracı, gerçek zamanlı sonucu görürken birden çok gölge katmanını görsel olarak eklemenize, kaldırmanıza ve yapılandırmanıza; her katman için kaydırma, bulanıklık ve renk ayarlamanıza olanak tanır. Bu görsel yaklaşım, özellikle katmanlar arasındaki etkileşimin nihai görünümü belirlediği neon parıltıları veya 3D ekstrüzyonlar gibi karmaşık efektler için çok katmanlı gölgeleri elle kodlamaktan daha hızlıdır. Oluşturulan CSS'i stil sayfanıza kopyalayın ve belirli bağlamınız için gerektiği gibi ayarlayın.
Sık sorulan sorular
Birden fazla metin gölgesi ekleyebilir miyim?
Evet, sınırsız gölge katmanı ekleyebilirsiniz. Her katmanın kendi ofseti, bulanıklık yarıçapı ve rengi olabilir.
text-shadow performansı nasıl etkiler?
Metin gölgeleri modern tarayıcılarda GPU hızlandırmalıdır ve tipik kullanım için minimum performans etkisi vardır.
