Css Text Shadow Kullanımı

Bu yazımızda Css’te Text Shadow özelliği nedir?, Nasıl kullanılır? 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.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link