CSS text-shadow kodu nasıl oluşturulur?

CSS text-shadow bildirimi oluşturmak için üç sayısal uzaklık ve bulanıklık değeriyle renk metnini girin; boş alanlar varsayılanlarla tamamlanır. Sonuçta sayısal bölümler px birimiyle yazılan ve noktalı virgülle biten bir bildirim olarak düzenlenir.

CSS gölge bildirimini anlamak

CSS text-shadow, metin çevresinde gölge tanımlamak için yatay uzaklık, dikey uzaklık, bulanıklık ve renk parçalarını bir araya getirir. Bu araç, söz konusu parçaları ayrı girdilerle belirleyip CSS bildirimi üretmeye yarar. Başlık, menü öğesi veya kısa bir metin için gölge yönünü ve yumuşaklığını denerken değerleri elle aynı satıra yerleştirmek yerine oluşturulan bildirimin biçimini inceleyebilirsiniz.

Yatay uzaklık, gölgenin yatay eksendeki konumunu; dikey uzaklık ise dikey eksendeki konumunu belirleyen sayısal girdilerdir. Bulanıklık da sayısal bir girdidir ve gölge ayarının bu bölümünü tanımlar. Renk alanı metin kabul eder; bu yüzden kullanmak istediğiniz renk ifadesini ayrı alana yazmanız gerekir. Girdileri boş bırakmanız durumunda araç, ilgili alan için tanımlanmış varsayılan değeri kullanır. Böylece kısa bir deneme için yalnızca değiştirmek istediğiniz bölümleri doldurabilirsiniz.

Değerleri girip bildirimi oluşturma

1. Yatay uzaklık, dikey uzaklık ve bulanıklık alanlarını bulun. Bu üç alana sayı girin; renk alanına ise kullanmayı düşündüğünüz renk ifadesini metin olarak yazın. Değerleri, oluşturmak istediğiniz gölgenin yönüne ve görünümüne göre seçin.
2. Bir alanı değiştirmeden bırakmak istiyorsanız ilgili girdiyi boş bırakın. Yatay uzaklık için 1, dikey uzaklık için 1, bulanıklık için 2 ve renk için #00000033 varsayılan olarak kullanılır. Bu seçim, yalnızca belirli bir parçayı özelleştirip kalan parçaları başlangıç değerleriyle denemenize olanak verir.
3. Oluşturma işlemini başlatın ve meydana gelen CSS bildirimini okuyun. Yatay uzaklık, dikey uzaklık ve bulanıklık değerleri sonuçta px birimiyle yazılır. Bildirim noktalı virgülle sona erdiği için sonucu bir CSS kuralındaki text-shadow özelliğinin değerine aktarırken bu biçimi koruyabilirsiniz.
4. Gölgenin yatay konumunu değiştirmek için yatay uzaklığı, dikey konumunu değiştirmek için dikey uzaklığı yeniden düzenleyin. Daha yumuşak veya daha belirgin bir görünüm denemek istediğinizde bulanıklık değerini değiştirin. Renk ifadesini farklılaştırarak bildirimin renk bölümünü de ayrı bir denemede güncelleyebilirsiniz.
5. Gölgenin bir eksende kaymamasını istiyorsanız ilgili uzaklık alanına 0 yazın. Keskin bir gölge denemek için bulanıklık alanına da 0 girebilirsiniz. Her iki kullanım, başarılı bir hesaplamada sıfır değerlerinin kabul edildiği davranışla uyumludur.
6. Yeni bir varyasyon hazırlarken yalnızca ilgisini değiştirdiğiniz alanı düzenleyin ve yeniden oluşturma işlemini başlatın. Sonuç satırında üç sayısal bölümün px ile gösterildiğini, renk bölümünün ise yazdığınız metni izlediğini kontrol edin. Bu kontrol, giriş sırasını sonuçtaki parçalarla karşılaştırmanıza yardımcı olur.

Oluşturulan satırı değerlendirme

Üretilen bildirimin yapısında yatay uzaklık, dikey uzaklık, bulanıklık ve renk sıralanır. İlk üç bölümün ardından px birimi bulunması, sayısal girdilerin CSS içindeki gösterim biçimidir; satırın sonunda noktalı virgül yer alır. Pozitif veya negatif sayılar kullandığınızda yatay ve dikey konumun yönü değişebilir, ancak bu değerlerin ekranda nasıl görüneceği metnin ve çevresindeki stil kurallarının kullanımına bağlıdır.

Boş bırakılan alanları değerlendirirken varsayılanları sonuçla karşılaştırın. Örneğin yalnızca rengi yazarsanız uzaklıklar 1, 1, bulanıklık ise 2 olarak tamamlanır. Yalnızca bir uzaklığı 0 yapmak, o eksendeki kaymayı kaldırmaya yönelik bir denemedir; bu tercih, diğer alanların değerini kendiliğinden sıfırlamaz.

Renk girdisinin metin kabul etmesi, yazılan ifadenin geçerli bir renk biçimi olarak denetlendiği veya başka bir biçime dönüştürüldüğü anlamına gelmez. Desteklenen değer aralığı, otomatik yuvarlama ve hatalı biçimlerin ele alınması hakkında bildirimin doğrudan biçimlendirme davranışının ötesinde sonuç çıkarmayın. Sonucu kullanmadan önce seçtiğiniz renk ifadesini ve üç sayısal bölümün beklediğiniz sırada olduğunu ayrıca inceleyin.

Uygulamalı örnek

Bir başlık için sağa ve aşağıya yönelen, orta düzeyde bulanık bir gölge hazırlamak istiyorsunuz.

Yatay uzaklık alanına 4, dikey uzaklık alanına 2, bulanıklık alanına 6 ve renk alanına #334455 yazıp oluşturma işlemini başlatın.

Sonuç, text-shadow: 4px 2px 6px #334455; biçiminde, üç px değeri ve noktalı virgülle biten bir CSS bildirimi olur.

Sınırlamalar

• Renk metin girdisi olarak alınır; renk ifadesinin doğrulanması veya dönüştürülmesi, desteklenen aralıklar ve otomatik yuvarlama davranışı hakkında bu araç davranışından sonuç çıkarılamaz.

Sık yapılan hatalar

• Yatay uzaklık, dikey uzaklık veya bulanıklık alanına sayı yerine renk ifadesi ya da başka bir metin yazmak beklenen CSS biçimini bozabilir. Bu üç alanda sayısal giriş kullanın ve renk ifadesini yalnızca renk alanına taşıyın.

Sık sorulan sorular

CSS text-shadow için sıfır değeri kullanılabilir mi?

Sıfır yazabilirsiniz; yatay uzaklık, dikey uzaklık ve bulanıklık için 0 değeri başarılı bir hesaplamada kabul edilir.

Alanları boş bırakırsam hangi değerler kullanılır?

Alanları boş bırakırsanız yatay uzaklık 1, dikey uzaklık 1, bulanıklık 2 ve renk #00000033 olarak kullanılır.

Girdiler hangi türde olmalı?

Yatay uzaklık, dikey uzaklık ve bulanıklık sayısal giriş alır; renk bölümü ise metin kabul eder.