css box-shadow nedir? Nasıl Kullanılır?

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ı:

css box-shadow kullanımı

Başka bir yazımızda görüşmek üzere…

Leave a Reply