HAZIRLAYAN: ŞABAN GÖKSU

CSS box-shadow Özelliği

CSS box-shadowözelliği, bir öğeye bir veya daha fazla gölge uygulamak için kullanılır.

Bir Yatay ve Dikey Gölge Belirtin

En basit kullanımında, yalnızca yatay ve dikey bir gölge belirlersiniz. Gölgenin varsayılan rengi geçerli metin rengidir.

Örnek

Yatay ve dikey bir gölge belirleyin:

div {

  box-shadow: 10px 10px;

}

Gölge için bir Renk Belirtin

Parametre color, gölgenin rengini tanımlar.

Örnek

Gölge için bir renk belirleyin:

div {

  box-shadow: 10px 10px lightblue;

}

Gölgeye Bulanıklaştırma Efekti Ekleyin

Parametre blur, bulanıklık yarıçapını tanımlar. Sayı ne kadar yüksek olursa, gölge o kadar bulanık olur.

Örnek

Gölgeye bir bulanıklık efekti ekleyin:

div {

  box-shadow: 10px 10px 5px lightblue;

}

Gölgenin Yayılma Yarıçapını Ayarlayın

Parametre spreadyayılma yarıçapını tanımlar. Pozitif bir değer gölgenin boyutunu artırır, negatif bir değer ise gölgenin boyutunu azaltır.

Örnek

Gölgenin yayılma yarıçapını ayarlayın:

div {

  box-shadow: 10px 10px 5px 12px lightblue;

}

Ek Parametreyi ayarlayın

Parametre inset, gölgeyi dış gölgeden (başlangıç) iç gölgeye değiştirir.

Örnek

İç parametreyi ekleyin:

div {

  box-shadow: 10px 10px 5px lightblue inset;

}

Birden Çok Gölge Ekle

Bir öğenin birden çok gölgesi de olabilir:

Örnek

div {

  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;

}

kartlar

box-shadowBu özelliği kağıt benzeri kartlar oluşturmak için de kullanabilirsiniz :

METİN KARTI

<div class="card">

  <div class="header">

    <h1>1</h1>

  </div>

  <div class="container">

    <p>January 1, 2021</p>

  </div>

</div>

GÖRÜNTÜ KARTI

<div class="polaroid">

  <img src="rock600x400.jpg" alt="Norway" style="width:100%">

  <div class="container">

    <p>Hardanger, Norway</p>

  </div>

</div>

CSS border-radius Özelliği

Tanım ve Kullanım

Özellik border-radius, öğenin köşelerinin yarıçapını tanımlar.

İpucu: Bu özellik, öğelere yuvarlatılmış köşeler eklemenizi sağlar! 

Bu özellik bir ila dört değere sahip olabilir. İşte kurallar:

Örnek

İki <div> öğesine yuvarlatılmış köşeler ekleyin:

#example1 {

  border: 2px solid red;

  border-radius: 25px;

}

#example2 {

  border: 2px solid red;

  border-radius: 50px 20px;

}

Dört değer - sınır yarıçapı: 15px 50px 30px 5px; (birinci değer sol üst köşeye, ikinci değer sağ üst köşeye, üçüncü değer sağ alt köşeye ve dördüncü değer sol alt köşeye uygulanır):

Üç değer - sınır yarıçapı: 15px 50px 30px; (ilk değer sol üst köşeye, ikinci değer sağ üst ve sol alt köşeye ve üçüncü değer sağ alt köşeye uygulanır):

İki değer - sınır yarıçapı: 15px 50px; (birinci değer sol üst ve sağ alt köşeler için, ikinci değer ise sağ üst ve sol alt köşeler için geçerlidir): 

Bir değer - sınır yarıçapı: 15 piksel; (değer, eşit olarak yuvarlanan dört köşenin tümü için geçerlidir: