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.

Bakınız: CSS box-shadow örnekleri

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

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya Devam Edin