Kutu Modeli

HTML elemanları dikdörtgen kutular olarak düşünülebilir. Bu kutular üzerinde boyutsal biçimlendirmeler yapmak için kutu modeli kullanılır.

Yukarıda kutu modelinin içerdiği kısımlar görülmektedir. En içte içerik bulunur. İçerik ile kenarlıklar arasında bulunan boşluk padding olarak adlandırılır. Kenarlıkların dışarısındaki boşluk ise margin olarak adlandırılır. Kenarlıkların etrafına outline ismi verilen bir şekil çizilebilir. Bu şeklin elemanın boyutları üzerinde herhangi bir etkisi yoktur.

Bir elemanın toplam yüksekliği içeriğin yüksekliği ile üst ve alt kısımlardaki padding, kenarlık(border) ve margin kalınlıklarının toplamıdır. Benzer şekilde bir elemanın toplam genişliği de içeriğin genişliği ile sağ ve sol kısımlardaki padding, kenarlık(border) ve margin kalınlıklarının toplamıdır.


box-shadow

Bu özellik kullanılarak kutunun arkasına gölge de verilebilir. Bu özelliğe girilecek değer şu formatta olmalıdır: "y-gölge d-gölge bulanıklık gölgenin-büyüklüğü renk". Burada y-gölge değeri bir uzunluktur ve gölgenin yatay olarak kutudan ne kadar uzakta olacağını belirtir. Negatif değerler de girilebilir. d-gölge değeri de bir uzunluktur ve gölgenin dikey olarak yazıdan ne kadar uzakta olacağını belirtir. Bu değer de negatif olabilir. Bulanıklık da uzunluk olarak ifade edilir ve gölgenin bulanıklık boyutunu belirler. Gölge büyüklüğü de uzunluk olarak girilir, negatif değerler de girilebilir. Renk kısmı da gölgenin rengini belirler. Değerlerin sonuna eklenecek inset kelimesi gölgeyi içeriden dışarı doğru gösterir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Gölge</title>
<style>
p.ornek1{
    box-shadow: 20px 20px 20px 20px black;
}
p.ornek2{
    box-shadow: 20px 20px 20px 30px black;
}
p.ornek3{
    box-shadow: 20px 20px 50px 30px black;
}
p.ornek4{
    box-shadow: 20px 20px 50px 30px red;
}
p{
    width: 200px;
    height: 50px;
    background-color: yellow;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br><br><br>
    <p class="ornek2">Örnek Paragraf 2</p><br><br><br>
    <p class="ornek3">Örnek Paragraf 3</p><br><br><br>
    <p class="ornek4">Örnek Paragraf 4</p><br><br><br>
</body>
</html>



Listeler <<<<< CSS3 >>>>> Boyutlar