Css’in geçerliliği her geçen gün artarken kullanım alanı da genişlemeye ve çeşitlenmeye başladı. Css ile gölge yapımı da buna güzel bir örnek. İster tablolarınıza(table), ister div’lere, isterseniz de fotoğraflarınıza gölge vermek maksadıyla bu teknikten faydalanabilirsin.

Sitenizde gölgelendirmek istediğiniz nesneyi aşağıdaki kodların arasına yazmalısınız. Örnekte “Bu yazi css ile gölgelendirilmiştir.” yazısını bir çerçeve içine alarak gölgelendiriyoruz.

<div id="shadow-container">
        <div class="shadow1">
            <div class="shadow2">
                <div class="shadow3">
                    <div class="container">
Bu yaziya css ile gölgelendirilmiştir.
</div>
                </div>
            </div>
        </div>
    </div>

Css kodu da şu şekilde.

#shadow-container {
    position: relative;
    left: 3px;
    top: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
}

#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
    position: relative;
    left: -1px;
    top: -1px;
}

    #shadow-container .shadow1 {
        background: #F1F0F1;
    }

    #shadow-container .shadow2 {
        background: #DBDADB;
    }

    #shadow-container .shadow3 {
        background: #B8B6B8;
    }

    #shadow-container .container {
        background: #ffffff;
        border: 1px solid #848284;
        padding: 10px;
    }

Yukarıdaki örneğimizin çıktısı şöyle olacaktır.

Yukarıda bir örnek sundum size. Google’da da Css ile gölge yapımı derseniz de bir çok örneğe ulaşabilirsiniz. Bu konuyu sizinle paylaşırken şuradan faydalnadığımı da belirtmek isterim.

Benzer Yazılar

• Css İle Siteyi Ortalama
• CSS ile Arkaplan Resmi
• The Basic Concept Of Css, “Box Model”
• Tarayıcı Uyumluluğu İçin CSS Sıfırlama
• Css’in Temeli “Kutu Modeli”