Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

CSS ile Kutulara Gölge Verme Nasıl Yapılır?


FacebookTwitterPinterestTumblrYazdır


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.


  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yukarı Çık