CSS ile Shadow (Gölge) Efekti Verme – Web Tasarım & Programlama
CSS Web Tasarım

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:

  • text-shadow
  • box-shadow

 

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.

 

Yorum yap