CSS ile Shadow (Gölge) Efekti Verme

CSS ile Shadow (Gölge) Efekti Verme

[ad_1]

CSS ile Shadow (Gölge) Efekti Verme


CSS Shadow (Gölge) Efekti Verme

CSS ile metne ve öğelere gölge ekleyebilirsiniz.

Bu bölümde aşağıdaki özellikleri öğreneceksiniz:

 

CSS Text Shadow

CSS text-shadow özelliği, metne gölge uygular.

En basit kullanımında, yalnızca yatay gölgeyi (2px) ve dikey gölgeyi (2px) belirtirsiniz:

 

Şimdi de metnimize eklemiş olduğumuz text-shadow efektine bir renk verelim:

 

Şimdi de gölgemize blur özelliği ekleyelim.

 

Aşağıdaki örnekte siyah gölgeli beyaz bir metin gösterilmektedir:

Aşağıdaki örnekte ise kırmızı neon ışıma gölgesi görülmektedir:

CSS ile Birden Çok Gölge Ekleme

Metne birden fazla gölge eklemek için virgülle ayrılmış bir gölge listesi ekleyebilirsiniz.

Aşağıdaki örnekte kırmızı ve mavi neon ışıma gölgesi görülmektedir:

Aşağıdaki örnekte siyah, mavi ve koyu mavi gölgeli beyaz bir metin gösterilmektedir:

 

Text-shadow özelliğini, bazı metinlerin etrafında düz bir kenarlık oluşturmak için de kullanabilirsiniz (gölgesiz):

 

CSS box-shadow Özelliği Ekleme

CSS kutu gölge özelliği, öğelere gölge uygular.

En basit kullanımında, yalnızca yatay gölgeyi ve dikey gölgeyi belirtirsiniz:

Şimdide gölgeye gri renk uygulayalım.

Şimdi de gri renkli gölgemize blur efekti verelim.

Örnek: Örneğimizde resim ve açıklamadan oluşan bir card oluşturarak, oluşturduğumuz bu card için box-shadow ve text-shadow özelliğini birlikte uygulayalım.

 


CSS ile Shadow (Gölge) Efekti Verme

[ad_2]
Daha Fazla Css Eğitim Dersleri İçin Css Eğitim Kategorisini İnceleyiniz…
#CSS #ile #Shadow #Gölge #Efekti #Verme

Van Web Tasarım

İlk yorum yapan olun

Bir yanıt bırakın

E-posta hesabınız yayımlanmayacak.


*