CSS GÖLGE (SHADOW) ÖZELLİKLERİ

Merhaba..

Css ile metinlere ve elemanlara gölge efektleri ekleyebiliyoruz.. Metinlere gölge eklemek için TEXT_SHADOW , elemanlara gölge eklemek için ise BOX-SHADOW özelliklerini kullanıyoruz..

TEXT-SHADOW

Metinlere gölge eklemek için , TEXT-SHADOW  özelliğini kullanıyoruz..  

GENEL KULLANIM

text-shadow : 2px 2px 5px #000;

Gölgenin oluşması için aşağıdaki değerler kullanılır;

• 1. Değer : Gölgenin X eksenindeki konumu..
• 2. Değer : Gölgenin Y eksenindeki konumu..
• 3. Değer : Gölgenin bulanıklığı..
• 4. Değer : Gölgenin rengi..

X ve Y DEĞERLERİ

Gölgenin oluşması için X ve Y değerlerinin belirtilmesi yeterli olacaktır. X ve Y konumları , gölgenin yazının neresinde olacağını belirler. Verilen X değerlerinde gölge sağa , Y değerlerinde aşağı doğru hareket eder. Negatif değerler verilirse ,konumlandırma ters yönde olur. Gölgenin oluşması için mutlaka X ve Y değerlerinin verilmiş olması gerekir.. 

CSS

p { text-shadow: 2px 2px }

HTML

<p> CSS ile yazılara gölge efekti verebiliriz..</p>

EKRAN

Yukarıda 2px yatayda sağa , 2px dikeyde aşağı kayan gölge efekti vermiş olduk. Aslında gölge efekti , verdiğimiz X ve Y değerlerine göre yazının aynısından bir tane daha ekliyor..

BULANIKLAŞTIRMA

Gölgenin daha anlaşılır  olması için 3. değer olan BULANIKLAŞTIRMA değerini ekleyelim..

CSS

p { text-shadow: 2px 2px 5px; }

HTML

<p> CSS ile yazılara gölge efekti verebiliriz..</p>

EKRAN

Yukarıda 2px yatayda sağa , 2px dikeyde aşağı kayan gölge efektini 5px bulanıklaştırmış olduk..

GÖLGE RENGİ

Oluşturulan gölgelere renk eklemek için , tanımın 4. değeri olarak renk belirtmemiz gerekir..

CSS

p { text-shadow: 2px 2px 5px #933; }

HTML

<p> CSS ile yazılara gölge efekti verebiliriz..</p>

EKRAN

Yukarıdaki yazıya ,  2px yatayda sağa , 2px dikeyde aşağı kayan  5px bulanıklaştırılmıiş bordo bir gölge verilmiş olur..

BOX-SHADOW

Elemanlara gölge efekti eklemek için BOX-SHADOW özelliğini kullanıyoruz. Kullanımı  tetxt-shadow kullanımı  ile aynıdır.  Sadece X ve Y konumları belirtilerek gölge verilebileceği gibi , bulanıklık ve renk değerleride eklenebilir..

CSS

div { 
   padding:2rem;
   box-shadow: 2px 2px 5px #933;
}

HTML

<div> CSS ile elemanlara gölge efekti verebiliriz..</div>

EKRAN

Yukarıdaki kutuya (div)  ,  2px yatayda sağa , 2px dikeyde aşağı kayan  5px bulanıklaştırılmıiş bordo bir gölge verilmiş olur..

Eğer gölgenin kaymaması isteniyorsa  , X ve Y değerleri 0 yapılmalıdır. Ancak buı kez gölgenin görünebilmesi için mutlaka bulanıklaştırma değeride eklenmelidir..

EKRAN

BİRDEN FAZLA GÖLGE EFEKTİ EKLEME

Yazı yada elemanlar ayanı anda birden fazla gölge efekti eklenebilir. Bunun için yazılan gölge değerleriş arasına virgül konulur.

CSS

div { 
   padding:2rem;
   box-shadow: 1px 1px 5px black, 0px  0px 15px blue;
}

HTML

<div> CSS ile elemanlara gölge efekti verebiliriz..</div>

EKRAN

Yukarıdaki kutuya (div), hem siyah , hemde mavi gölge uygulanmış olur. Bunun gibi daha fazla gölge değerleri eklenebilir. Yazılarada aynı şekilde birden fazla gölge eklenebilir..

CSS

div {
 color:#fff;
 text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; 
}

HTML

<div> CSS ile elemanlara gölge efekti verebiliriz..</div>

EKRAN

Yukarıda div için text-shadow özelliği eklenmiş ve yazı rengi beyaz yapılmış. Dolayısıyla div'in kendisi değil içindeki yazı gölge efekti alır.. Yazıya hem 1px sağ aşağı doğru kayan siyah gölge  , hemde kaymadan bulanıklığı arttırılmış mavi gölge eklenmiş olur...

Görüşmek Üzere...