Css Text Shadow Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te text shadow özelliği nedir, nasıl kullanabiliriz onu öğreneceğiz.Text shadow özelliği ile yazılarımıza gölge verebiliyoruz.Vereceğimiz değerler ile gölgenin x ve y eksenindeki konumunu, bulanıklığını ve rengini belirleriz.İlk verilen değer x ekseni, ikinci verilen değer y ekseni, üçüncü verilen değer bulanıklık, dördüncü verilen değer de rengi için uygulanır.Örneğin bir <h2> etiketi tanımlayalım ve gölge efekti verelim.

css-dersleri-text-shadow-kullanimi-1

Gördüğünüz gibi yazının gölgesi 2px sağa ve 2px aşağı doğru kaymış oldu.

Üçüncü vereceğimiz değer ile gölgenin bulanıklaştırılmasını sağlayalım.

css-dersleri-text-shadow-kullanimi-2

Gördüğünüz gibi gölge 3px bulanıklaştı.

Dördüncü vereceğimiz değer ile gölgenin rengini değiştirelim.Örneğin gölge rengini gri yapalım.

css-dersleri-text-shadow-kullanimi-3

Gördüğünüz gibi gölge rengi gri oldu.

Birkaç farklı örnek ve tarayıcıdaki görüntüleri ile konumuzu sonlandıralım.Siz daha farklı değerler ile tasarımlarınızı dilediğiniz gibi yapabilirsiniz.

css-dersleri-text-shadow-kullanimi-4

Tarayıcı uyumluluğu ile ilgili bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 21 – Opacity Kullanımı

Sonraki : Css Dersleri 23 – Box Shadow Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +