CSS dersleri ile ilgili olan yazı dizimize ara vermeden devam ediyoruz. Bir önceki yazımızda da, CSS kullanarak yazılara gölge verme konusunu işlemiştik. Şimdi ise, içeriğe ait kutulara veya köşelere gölge efekti vermeyi öğreniyor olacağız. Böylelikle web sitenizde yer alan div elementlerine ait çerçevelere dilediğiniz gibi gölge verebileceksiniz. Dilerseniz şimdi, aşağıda yer alan örneği inceleyelim ve gölge efekti vermenin ne kadar kolay olduğunu görelim.

AYRICA: CSS ile Seçili Alan Rengini Değiştirme Nasıl Yapılır?

CSS Kullanarak Kenarlık Gölgelendirme İşlemi

Öncelikle, aşağıdaki kodu temanızın CSS dosyası içerisine ekleyin.

.golgelikutu {
box-shadow: 3px 3px 4px #999;
width:500px;
font-size:15px;
line-height:25px;
padding:15px;
background: #f1f1f1;
}

HTML sayfasına ise aşağıdaki kodu, düzenledikten sonra ekleyebilirsiniz.

<div class="golgelikutu">Bu bir gölge efekti uygulanmış kutu örneğidir.</div>

Bilgi: CSS kodlarını "box-shadow" değerleri dahil, dilediğiniz gibi değiştirebilirsiniz.

Not: Gölge efekti uygulanmış bir kutu örneği aşağıda yer almaktadır.