CSS Text Shadow, Box Shadow

Web tasarım kursumuzun CSS derslerine gölgelerle devam ediyoruz. Herkese başarılar dilerim.

CSS Gölge Efekti

CSS3’te gölge (shadow) efektiyle metinlere ve öğelere gölge verebilirsiniz.

Tarayıcı Desteği

Tarayıcılar her yeni CSS özelliğini belirli bir sürümden itibaren desteklemeye başlar. Bu derste işlediğimiz text-shadow ve box-shadow özellikleri bugün tüm güncel tarayıcılarda desteklenmektedir.

CSS3 Text Shadow

Bu özellik metinlerimize gölge uygulamak için kullanılır.

Aşağıdaki örnekte yatayda 2px, dikeyde 2px gölge almış bir metin göreceksiniz.

h1 {
    text-shadow: 2px 2px;
}

Gölgeye bir de renk ekleyelim

h1 {
    text-shadow: 2px 2px red;
}

Bir de gölgeye bulanıklık efekti verelim

h1 {
    text-shadow: 2px 2px 5px red;
}

Aşağıdaki örnek siyah gölgeye sahip beyaz bir metni göstermektedir.

h1 {
    color: #fff;
    text-shadow: 2px 2px 4px #000;
}

Kırmızı neon gölge

Gölgeyi kaydırmadan (yatay ve dikey değerleri 0 vererek) yalnızca bulanıklık verdiğimizde metnin etrafında neon ışığı gibi bir parlama oluşur.

h1 {
    text-shadow: 0 0 3px #FF0000;
}

CSS3 Box-Shadow Özelliği

CSS’te box-shadow özelliğiyle gölgeleri bu sefer metinlere değil öğelere uygulayacağız.

Aşağıdaki örnekte hem yatayda hem de dikeyde gölge verilmiştir.

Kod yapısı şu şekildedir:

div {
    box-shadow: 10px 10px;
}

Ardından gölgemize biraz bulanıklık ve renk verelim:

Kod yapısı şu şekildedir:

div {
    box-shadow: 10px 10px 5px gray;
}

Bu dersimizde CSS’te text-shadow ve box-shadow özelliklerini inceledik.

Web tasarım kursumuzun CSS derslerinin bu bölümünü de işlemiş bulunuyoruz. Herkese başarılar dilerim.