CSS gölge verme kodu (text-shadow)

CSS gölge verme kodu

CSS metin gölge kodu nedir? CSS ile metinlere nasıl gölge verilir? CSS gölge verme kodu (text-shadow) nedir, nasıl yapılır?

Özellikle tasarımcıların ya da web sayfalarına ufak dokunuşlar yapmak isteyenlerin kullanmak isteyecekleri bir koda, bir konuya yer vermek istedim bu yazımda, CSS ile metinlere gölge verme. Bu tür basit kodlar bazen tasarım konusunda gerçekten hayat kurtarabiliyor.

Gölgelendirme işlemleri genelde görsellerle yapılırdı dostlarım. Photoshop ile gölgelendirme görüntüsü verdiğimiz görselleri metinlerin arkasına yerleştirerek sonuca ulaşırdık. Ama artık bu yöntemin pek tercih edilmediği kanaatimdeyim. Çünkü görseller site hızını yavaşlatabilir. Bu da arama sonuçlarını etkiler. A kullanan var tabi hala ama kesinlikle uğraşmaya değmez. Çünkü gelişen CSS yapısıyla birlikte basit kodlarla metinlere gölge vermek çok daha basit.

Peki metinlere nasıl gölge veririz?

Oldukça basit bir işelmdir bu. Gölge vermek istediğimiz metinlerin CSS kodlarına ulaşarak aşağıdaki kodları eklememiz yeterli.

text-shadow: 2px 3px 8px #111;

Görüntü itibariyle şöyle bir sonuç elde etmemiz gerekir:

.text {
    text-shadow: 2px 3px 8px #111;
{

Bu şekilde bir değer girildiğinde metin artık gölgeli bir hal alacaktır. Tabi düzenleme yapabilmek için neyin ne işe yaradığını bilmek gerekir.

2px değeri ile yapacağımız düzenlemede gölge yatay olarak konum değiştirecektir. 3px değeri ise gölgenin dikey olarak konumunu belirleyecektir. 8px değeri ise gölgenin daha bulanık ya da daha keskin olmasını sağlayacaktır. Tabi en son kısımda yer alan ise gölgenin renginin belirtildiği kısımdır. Yukarıdaki kodlarla hemen canlı bir örnek vermek gerekirse:

Blog Tecrübem

Böyle bir örnek yeterli olur sanırım.😉

Blog Tecrübem

Bu örnekteki gibi birden fazla gölge vermek isterseniz,

text-shadow: 2px 2px 8px #111, 2px 2px 8px #3cafe0;

Bu koddaki gibi ekleme yapabilirsiniz. Konuyla ilgili sorularınız olursa yorum yaparak bildirebilirsiniz.