CSS Kullanarak Gölge Uygulamak

Bu derste Photoshop kullanmadan fotoğraf ya da resimlerinize nasıl gölge ekleyeceğinizi öğreneceksiniz.

Bu derste Photoshop kullanmadan fotoğraf ya da resimlerinize nasıl gölge ekleyeceğinizi öğreneceksiniz. Bunun için çok basit bir iki CSS kodu ve PNG formatında saydam bir gölge resmi gerekiyor. (Gölge resmini indirmek için buraya tıklayın)

Gereken CSS kodlarının iki parçası aşağıdaki gibi olacaktır. Birincisi, arkaplan olarak gölge resmini ayarlayacak, ikincisi ise resmin etrafında çerçeve varmış gibi gösterecek.

Her bir CSS sentaksının açıklaması kendi içinde ayrıca verilmiştir.

.img-shadow { 
    float:right; 
    background: url(trans-shadow.png) no-repeat bottom right; /* IE haricinde bilinen bir çok tarayıcı saydam gölge özelliğini destekler. IE'nin ise eski sürümleri desteklemez. */
}
.img-shadow img {
    display: block;
    /* Bu kısım olmadan IE iyi göstermez. */
    position: relative;
    /* Gölgenin bulunduğu yer ile resmi ilişkilendirir */
    padding: 5px;
    /* Resmin etrafında bir çerçeve oluşturur */
    background-color: #fff;
    /* Çerçevenin arka plan rengi */
    border: 1px solid #cecece;
    /* Oluşturulan beyaz çerçeveye 1 px kalınlığında gri bir hat çeker */
    margin: -6px 6px 6px -6px;
    /* Gölgenin görünmesi için belirli piksellerle resmi dengeler, bizim gölgemiz 6 px genişliğinde, bu değer kusursuz bir gölge için iyi bir değerdir. */
}

CSS'yi kaydedin ve web sayfanıza aşağıdaki HTML kodları ile bu dosyayı çağırın:

<span class="img-shadow"><img src="tutorial-kinoshita.jpg"/></span>

Yukarıda CSS kodları arasında da açıkladığımız gibi, PNG saydam resim İnternet Explorer ile uyumludur. Şimdi bu kodları, en çok kullanılan iki tarayıcı olan Internet Explorer ve Firefox ile cyan renginde bir arka plan üzerinde test edelim mi? Sonuçlar aşağıda ve ne demek istediğimizi gayet güzel açıklıyor.

Internet Explorer 7 ve üzeri versiyonu bu kodları kusursuzca destekleyebilecektir. O zamana kadar, IE destekli çalışan tasarımcılar resimleri için beyaz bir arka plan ayarlarlarsa sorun olmayacaktır.

Not: Alex Allied'ın yazısından yararlanılmıştır.

Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

bir sürü tablo salatası yerine hafifleştirilmiş css kullanmak en iyisi bence.
teşekkürler

Yukarı Git