CSS ile Nesneye Gölge Verme

Merhaba Değerli Okurlarım.

Bu yazımda sizlere Site tasarlarken kullandığımız, Nesnelere gölge verme yi anlatacağım.

Öncelikle CSS ile belirlediğimiz nesneye ait kod satırımızı açıyoruz.

Örneğin Bi divimiz olsun divin ID değeri “divGolge” olsun.

Biz bu dive gölge vermek için css dosyamızdan veya direkt satır içi stil uygulayacağız.

1.Yol Css Dosyasından Yapma:
Örneğin Sitemizin Css stil dosyası “Stil.css” olsun. bu dosyayı açıp, nesnemizin ID değerini veya Class ına şu kodları ekliyoruz.

Burada Kullandığımız Özellik Box-shadow özelliğidir.

 

2. YOL – Satır içinden Yapma

örneğim html sayfanızdaki bir dive gölge vereceksiniz. kim css dosyasıyla uğraşır derseniz, direk divin içine style attributesini kullanıp, css ile yapacağınız işlemleri satır içindende yapabilirsiniz.

örneğin html sayfanızda class değeri  “golgeliDiv” olsun.

Burada İse Satır içinden gölgeyi ekledik.

Kullanılan Kodlar ve Açıklamaları:

Gölge Vermek İçin Her Zaman (Yazılar Hariç) Box-Shadow: özelliği kullanılır.

Örneğimize göre açıklarsak;

Box Shadow un ilk parametresi (2px) Gölgenin yataydaki pozisyonunu belirlemek için kullanılır. Pozitif değerler sağa doğru, negatifler sola doğrudur.

2. parametre (3px) ise Gölgemizin dikeydeki pozisyonudur. + değerler nesnenin altına doğru, – değerler ise nesnenin üstüne doğru konumu belirler.

3. parametre (4px) ise Gölgemizin Bulanıklık değeridir (Blur).
Bu değer sayesinde gölgemizi çok keskin veya bulanık şekilde ayarlayabiliriz.

4. Parametre ise (#ccc) Gölgemizin rengidir, bu parametreye hangi renk kodunu koyarsanız, gölgenizde o renkli olur.

İlgili Yazı:  Css İle Nesne Ortalama

 

 

İyi Günler !

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Güvenlik kodu * Time limit is exhausted. Please reload the CAPTCHA.