Etiket: box

CSS box-sizing

Box-sizing :

Bu boyutlandırma özelliği ile elemente verdiğiniz sınır değerleri kesindir. Pading gibi iç boşluk değerlerinden etkilenmez. Böylelikle elementinizi kesin boyutlandırmanızı sağlar.

Örnek

.sizing{
     width: 200px;
    height: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
content-box Width ve height özellikleri ( ve min / max özellikleri) marjin ve dolgu(padding) sınırı etkiler.
Border-box Width ve height özellikleri ( ve min / max özellikleri) marjin ve dolgu(padding) sınırı etkilemez.
İnital
İnherit

Tarayıcı Desteği
10.0
4.0-webkit		 29.0
3.2-moz		 8.0 5.1
3.1-webkit		 9.5
Posted on by Samed GÖZÜTOK 0

CSS box-shadow

Box-shadow :

Bir elemente bir veya birden fazla gölge ekler.

Örnek

.shadow{
   box-shadow: 10px 10px 5px blue;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Gölge değeri almaz.
h-shadow Yatay gölge konumunu ayarlar. Negatif değerler alabilir.
v-shadow Dikey gölge konumunu ayarlar. Negatif değerler alabilir.
blur İsteğe bağlı bulanıklık ayarı.
spread İsteğe bağlı gölgenin boyutunu ayarlar. Negatif değerlere izin verilir.
color İsteğe bağlı gölge rengidir. Varsayılan değer siyahtır. Fakat safaride değer belirtmezseniz hiç gösterilmez.
inset İsteğe bağlı iç ve dış gölge ayarını yapmanıza olanak sağlar.
İnital
İnherit

Tarayıcı Desteği
10.0
4.0-webkit		 4.0
3.5-moz		 9.0 5.1
3.1-webkit		 10.5
Posted on by Samed GÖZÜTOK 1