CssNasıl Yapılır

Css Box Shadow Kullanımı

Css Nedir?

Css box shadow kullanımı hakkında bir kaç şey öğrenmeye hazırsanız başlayalım. Öncelikle ‘CSS Nedir?‘ sorusunu cevaplamız gerekirse bir web sitesnin görsel olarak şekillendirilmesinde kullanılan, kendi has söz dizimi yani kuralları olan bir dildir. CSS ile renklendirme, konumlandırma, hareketlendirme gibi stil ayarları yapabiliriz.


Css box-shadow Nedir?

Css box-shadow nedir sorusunun en güzel cevabı bu kelimeyi Türkçe’ye çevirmek ile cevaplanabilir bence. Türkçesi kutu gölgesi demektir. Böylece oluşturduğumuz kutulara gölge verebiliyoruz. Hem içe hem de dışa doğru hem de ikisini aynı anda yapabiliriz.

css box shadow nedir


Sponsorlu Bağlantı




Css Box Shadow Kullanımı Örneği

Aşağıdaki kodda görüleceği üzere css box shadow kullanımı hakkında 1 tane örnek html kodu yazdım. Stil etiketi içinde büyük harflerle BOX SHADOW yazısından sonra css box shadow kurallarını yazdım. Biz aşağıda sağa doğru 10 piksel aşağı doğru 10 piksel ve kırmızı renginde bir gölge oluşturduk. Kullanımı syntax yani söz dizilimi aşağıdaki gibidir.

box-shadow : yataydaki_konum dikeydeki_konum blur_efekti boyut renk;  

Peki yukardaki kod yapısı ile ne anlatmak istiyorum hemen sırsaıyla açıklayalım.

  • Olmazsa Olmaz x ve y kordinatındaki yeri ve renk yani ana yapımız box-shadow: 10px 10px red; şeklinde olmalıdır.
  • Eğer bir veri daha ekleyecek olursak css bunu blur olarak algılayacaktır. Örnek box-shadow: 10px 10px 10px red; eklersem 3 tane sayısal veri oldu. Bu üçüncu sayısal veri bize blur efekti ayarını vermektedir.
  • Eğer dördüncü bir sayısal veri eklersem bu da bize boyut ayarı sağlar. Örnek box-shadow: 10px 10px 10px 5px red;  diye bir kural yazarsam 5px bize bu gölgenin boyutunu verir.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css Box Shadow Örnek</title>
</head>
<body>
    <!-- Stil Dosyamız -->
    <style>
        .box{
            width: 20%;
            background-color: rgb(131, 131, 131);
            padding: 40px;
            color: white;
            border-radius: 20px;
            /* BOX SHADOW */
            box-shadow: 10px 10px red;
            
        }
    </style>
    <div class="box">
        <h1>Kutu Örneği</h1>
        <p>Kuru örneği  içerisindeki örnek yazılar</p>
    </div>
</body>
</html>

Ekran Çıktısı aşağıdaki gibi olacaktır.

Css Box Shadow Kullanımı


Css Box Shadow ile Farklı Örnekler Yapalım

Şimdi birbirinden farklı 3 tane box’u yan yana koyup farklı özelliklerde gölge ayarları verelim. Öncelikle 3 kutuyu yan yana göstermek için div içine alıp, div etiketine display:flex özelliği verdim. Böylece kutular yan yana eklenebilir olacaktır.

Yukardaki kutu özellikleri aşağıdaki gibi olacaktır ;

  • Yeşil Renkte ve sola doğru aşağı
  • Turuncu Renkte ve sapa doğru
  • Mor renkte ve sağ alt köşeye doğru

Hadi bunun kodlarını yazalım.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css Box Shadow Örnek</title>
</head>

<body style="padding:100px">

    <!-- Stil Dosyamız -->
    <style>
        .box {
            margin-left: 20px;
            width: 20%;
            background-color: rgb(131, 131, 131);
            padding: 40px;
            color: white;
            border-radius: 20px;
            /* BOX SHADOW */
            box-shadow: -10px 10px rgba(22, 158, 56, 0.575);

        }

        .box2 {
            margin-left: 20px;
            width: 20%;
            background-color: rgb(131, 131, 131);
            padding: 40px;
            color: white;
            border-radius: 20px;
            /* BOX SHADOW */
            box-shadow: 10px 0px rgba(158, 76, 22, 0.575);

        }

        .box3 {
            margin-left: 20px;
            width: 20%;
            background-color: rgb(131, 131, 131);
            padding: 40px;
            color: white;
            border-radius: 20px;
            /* BOX SHADOW */
            box-shadow: 5px 5px rgba(74, 22, 158, 0.575);

        }
    </style>
    <div style="display: flex; padding: 10px;">
        <div class="box">
            <h1>Kutu Örneği</h1>
            <p>Kuru örneği içerisindeki örnek yazılar</p>
        </div>
        <div class="box2">
            <h1>Kutu Örneği</h1>
            <p>Kuru örneği içerisindeki örnek yazılar</p>
        </div>
        <div class="box3">
            <h1>Kutu Örneği</h1>
            <p>Kuru örneği içerisindeki örnek yazılar</p>
        </div>
    </div>


</body>

</html>

Yukardaki kodu yazdıktan sonra böylece aşağıdaki görüntüyü elde ederiz.

Css Box Shadow Kullanımı örneği


Css Gölge Efekti Blur Eklemek

Css gölge efektimize yani box shadow efektimize blur ve boyut eklemek istersek ne yapmamız gerekiyor? Öncelikle üsttek verdiğim syntax yani söz dizilimini kullanarak kaliteli bir gölge efekti yapalım. Aşağıdaki gibi bir efekti yapmayı deneyelim.

Css Box Shadow Kullanımı örneği blur

Bu durumda kullanacağımız css kodu aşağıdaki gibi olacaktır ;

box-shadow: 6px 10px 28px 4px rgb(62 62 62 / 57%);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css Box Shadow Örnek</title>
</head>

<body style="padding:100px">

    <!-- Stil Dosyamız -->
    <style>
        .box {
            margin-left: 20px;
            width: 20%;
            background-color: rgb(131, 131, 131);
            padding: 40px;
            color: white;
            border-radius: 20px;
            /* BOX SHADOW */
            box-shadow: 6px 10px 28px 4px rgb(62 62 62 / 57%);
        }
    </style>

    <div style="display: flex; padding: 10px;">
        <div class="box">
            <h1>Kutu Örneği</h1>
            <p>Kuru örneği içerisindeki örnek yazılar</p>
        </div>
    </div>

</body>

</html>

Css İçe Doğru Gölge Yapmak

Eğer yaptığınız gölgenin iç taraftan olmasını istiyorsanız bu durumda box-shadow css kodunun sonuna inset yazmanız gerekmektedir. Örnek aşağıdaki örnekteki gibi bir gölge yapmak için ” box-shadow: 6px 10px 20px 10px rgb(165, 165, 165) inset;” kodunu yazmamız gerekiyor tabi kutu arka planını turuncu yapmak için de “background-color: #ff4d29;” yazmanız gerekmektedir.

Stil Kodu

.box {
    margin-left: 20px;
    width: 20%;
    background-color: #ff4d29;
    padding: 40px;
    color: white;
    border-radius: 20px;
    /* BOX SHADOW */
    box-shadow: 6px 10px 20px 10px rgb(165, 165, 165) inset;
}

Css İçe Doğru Gölge Yapmak


Böylece css box shadow kullanımı konusunu da öğrenmiş olduk. Diğer “nasıl yapılır?” kategorisindeki yazılarımı buradan okuyabilirsiniz. Ayrıca youtube kanalımıza buradan abone olabilirsiniz.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu