css box-shadow, Html elementinin gölgelendirme işlemlerini yapmak için kullanılır. Dikey gölgelendirme (vertical-shadow), yatay gölgelendirme (horizontal-shadow), bulanıklık verme, yayılım yarı çapı ve renk özelliklerinde değişiklik yapmaktayız. Css box-shadow özelliği ile Html elemanlarına güzel görünümlar verebiliriz.
Kullanım şekli :
box-shadow : horizontal-shadow vertical-shadow blur-spread spread-radius color;
Aldığı değerler:
none : Değer yok.
length : Uzunluk değeri.
inset : İlave olarak iç kısmında oluşturur.
initial : Varsayılan değere çevirir.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width: 200px;
margin-bottom: 20px;
border: 2px solid black;
}
.one{
box-shadow: 5px 0 0 0 black;
}
.two{
box-shadow: 0 5px 0 0 black;
}
.three {
box-shadow: 0 0 5px 0 black;
}
.four {
box-shadow: 0 0 0 5px black;
}
.five {
box-shadow: 3px 3px 10px 3px black;
}
.six {
box-shadow: 1px 1px 3px 2px black inset;
padding: 5px;
}
.seven{
box-shadow: 5px 5px 0 0 black,
10px 10px 0 0 blue,
15px 15px 0 0 red;
}
</style>
</head>
<body>
<div class="one">
Content One
</div>
<div class="two">
Content Two
</div>
<div class="three">
Content Three
</div>
<div class="four">
Content Four
</div>
<div class="five">
Content Five
</div>
<div class="six">
Content Six
</div>
<div class="seven">
Seven
</div>
</body>
</html>
Html çıktısı:
Başka bir yazımızda görüşmek üzere…