box-shadow

box-shadow xüsusiyyəti qutulara kölgə vermək üçün istifadə olunur. Bu xüsusiyyət CSS3 ilə gəlmişdir.
 
Quruluşu: box-shadow: <dəyər>
Aldığı dəyərlər: none | h-shadow v-shadow blur spread color | inset | initial | inherit
Başlanğıc dəyəri: none
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
 
Aldığı dəyərləri bir-bir nəzərdən keçirək:
none - Başlanğıc dəyərdir. Kölgəni göstərmir.
h-shadow - Mütləq tələb olunan dəyərdir. Üfüqi xətt (horizontal) üzrə kölgəni yerləşdirir. Mənfi qiymət ala bilər. Müsbət qiymət kölgəni sağa doğru, mənfi qiymət isə sola doğru çəkir.
v-shadow - Mütləq tələb olunan dəyərdir. Şaquli xətt (vertical) üzrə kölgəni yerləşdirir. Mənfi qiymət ala bilər. Müsbət qiymət kölgəni aşağıya doğru, mənfi qiymət isə yuxarıya doğru çəkir.
blur - Əlavə, məcburi olmayan dəyərdir. Kölgənin bulanıqlığı, yayılma məsafəsidir. Dəyər artdıqca kölgə daha da hamarlaşır, yayılır və genişlənir. Əgər dəyər qeyd olunmazsa, bu zaman başlanğıc (varsayılan) dəyər olaraq 0 qəbul edilir,  bu halda kölgə daha sərt, yayılmamış və yığcam olur.
spread - Əlavə, məcburi olmayan dəyərdir. Kölgənin ölçüsüdür.
color - Əlavə, məcburi olmayan dəyərdir. Kölgənin rəngidir. Başlanğıc (varsayılan) dəyər qara rəngdir. İstənilən CSS rəng dəyərlərini əlavə etmək mümkündür.
inset - Əlavə, məcburi olmayan dəyərdir. Xarici kölgəni daxili kölgə ilə əvəz edir, yəni kölgə elementin xaricinə doğru deyil, daxilinə doğru yayılır.
initial - Default (varsayılan) dəyəri qəbul edir.
inherit - Valideyn (üst element) elementin dəyərini alır.
 
İndi isə bir neçə nümunəyə nəzər yetirək:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow</title>
<style> 
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>Bu qutu kölgəlidir</div>
</body>
</html>
 
Brauzerdə nəticə belə görünəcəkdir:
 

box-shadow

 
Göründüyü kimi ölçülər əlavə edib, arxa fonunu sarı etdiyimiz qutuya kölgə də əlavə etdik. 
box-shadow: 10px 10px 5px #888888;
Burada ilk 10px dəyəri kölgəni 10px sağa, növbəti 10px dəyəri isə kölgəni 10px aşağıya doğru çəkir. 5px dəyəri isə blur, yəni bulanıqlıq dəyəridir. Növbəti #888888; isə kölgənin rəngidir.
Nəticəyə buradan da baxa bilərsiniz.
 
Qeyd edək ki, qutuya təkcə bir deyil, bir neçə kölgə də əlavə etmək mümkündür. Bunun üçün hər dəyər arasında vergül qoyulmalıdır. Bunu nümunə ilə göstərək:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow</title>
<style> 
.kolgeli {
    box-shadow: 0.5em -0.5em 0.4em red, 0.5em 0.5em 0.4em gold, -0.5em 0.5em 0.4em lime, -0.5em -0.5em 0.4em blue;
    width:250px;
    height:200px;
    padding:5px;
    font:12px Arial, Helvetica, sans-serif;
    background:#CCC
}
</style>
</head>
<body>
<div class="kolgeli">Bu qutuya bir neçə müxtəlif rəngli kölgə əlavə etdik.</div>
</body>
</html>
 
Brauzerdə nəticə belə görünəcəkdir:
 

box-shadow

 
Göründüyü kimi, bu nümunədə qutuya 4 fərqli kölgə əlavə etdik.
Nəticəyə buradan da baxa bilərsiniz.
 
Daha bir nümunədə isə inset dəyərinin istifadə edilməsini göstərək:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow</title>
<style> 
.kolgeli {
    box-shadow: inset 0 0 0.5em blue;
    width:250px;
    padding:5px;
    font:12px Arial, Helvetica, sans-serif;
    height:100px;
}
</style>
</head>
<body>
<div class="kolgeli">Bu qutuya daxili kölgə əlavə etdik.</div>
</body>
</html>
 
Brauzerdə nəticə belə görünəcəkdir:
 

box-shadow

 
Bu nümunədə isə inset dəyəri ilə kölgəni qutunun daxilində yerləşdirdik.
Nəticəyə buradan da baxa bilərsiniz.
CSS3