CSS İle Gölge Vermek

Resimlere gölge vermek bir çok tasarımcının kullandığı derinlik hissi veren güzel bir efekttir. Bir çok insan bu efekti vermek için resim düzenleme programlarını kullanmaktadır. Resimlere CSS ile de gölge verebiliriz. Bu makalede CSS ile nesnelere(resim ve kutulara) gölge verme yöntemlerini göreceğiz.

CSS ile gölge vermenin avantajı; resimlerimize herhangi bir ekstra program kullanmadan gölge verebilmemizdir. Böylece sayfamıza her eklediğimiz resim için resim düzenleme programını açıp gölge eklemek zorunda kalmayacağız.

CSS ile Basit Şekilde Gölge Vermek

En basit css ile gölge verme yöntemi Dunstan Orchard‘in yaptığı yöntemdir. Bu yöntemde; resmi kapsayan katmana geniş gölge resmi; zemin resmi olarak tanımlanarak uygulanır. Eksi margin değeri ile gölge resmi ortaya çıkarılır.

Bu yöntemi uygulamak için ilk olarak 800×800 piksel genişliğinde bir gölge resmi oluşturmalıyız. Bu resmi zemin resmi olarak kapsayıcı katmana atayalım. Sonra resmi yukarı ve sola doğru 5 piksel mesafe verelim.

Xhtml kodu:

1. <div class=”resimKutusu”><img src=”resim.jpg” width=”300″ height=”300″ alt=”Vizara Köyü – Sürmene ” /></div>

Yukarıdaki kodda görüldüğü gibi bir resim ve onu kapsayan bir katmanımız var. Kapsayıcı katmana(.resimKutu) gölge zemin resmini atayacağız. Burada şöyle bir sorunumuz olacaktır ki katman bir blok-level bir element olduğu için gölge zemin resmi tüm blok boyunca uygulanacaktır. Bu durumu engellemek için sabit bir genişlik tanımlamamız gerekir, ancak bu yöntemin kullanılabilirliğini azaltacaktır. Daha kullanılabilir kodlama için float ataması yapacağız bu Mac IE 5x versiyonlarda sorun çıkarır bunu engellemek için bu kodu Mac IE5x den gizleyeceğiz. CSS kodu:

1. .resimKutusu {
2. background: url(images/golge.gif) no-repeat bottom right;
3. clear: right;
4. float: left;
5. }

Gölge zemin resmini ortaya çıkarmak için margin tanımlarını yapmalıyız.

1. .resimKutusu img {
2. margin: -5px 5px 5px -5px;
3. }

Efekti daha belirgin ve güzel hale getirmek için padding ve kenarlık ataması yaparsak.

1. .resimKutusu img {
2. background-color: #fff;
3. border: 1px solid #a9a9a9;
4. padding: 4px;
5. margin: -5px 5px 5px -5px;
6. }

Yukarıdaki kodun IE6 da çalışması için bir iki ekleme yapmalıyız.

1. .resimKutusu {
2. background: url(images/shadow.gif) no-repeat bottom right;
3. clear: right;
4. float: left;
5. position: relative;
6. }
7. .resimKutusu img {
8. background-color: #fff;
9. border: 1px solid #a9a9a9;
10. padding: 4px;
11. display: block;
12. margin: -5px 5px 5px -5px;
13. position: relative;
14. }

Kodlama IE5x versiyonlarda biraz sorunlu görünse de genelde uygulanabilir bir metottur. Bu metot uygulanabilirliğinin kolay olması sebebiyle tercih edilebilir.

Clagnut metodu ile gölge vermek

www.clagnut.com‘da yayınlandığı için bu isim verilmiştir. Bu metot bir önceki ile benzerlik taşır. Bu metottaki fark negatif margin vermek yerine göreceli(realtive) konumlandırma kullanmaktır.

1. .resimKapsulu {
2. background: url(images/golge.gif) no-repeat bottom right;
3. float:left;
4. line-height:0;
5. }
6. .resimKapsulu img {
7. background:#fff;
8. padding:4px;
9. border:1px solid #a9a9a9;
10. position:relative;
11. left:-5px;
12. top:-5px;
13. }

IE5x de padding sorunu olsa da tüm web tarayıcılarında gayet güzel sonuçlar verir.

Fuzzy metodu ile gölge vermek

Bundan önceki gölgeleme metotları basit metotlardı. Şimdi anlatacağımız metot ise gerçeğe daha yakın gölge elde etmek için kullanılır.

Bu metod PNG ile oluşturulan saydam kenarlı bir gölge resmi ile yapılmaktadır. Ancak kodlamada şöyle bir sorun varki IE7′den önce saydam PNG’leri yorumlamıyor. Bunun içinde bu yöntemde IE’nin PNG desteklemeyen versiyonları için saydam gif resmi oluşturulacaktır.(Ayrıca png fix koduda uygulanacaktır)

Aşağıdaki gibi bir maske PNG dosyası oluşturalım. IE’nin eski versiyonları için .gif oluşturalım.

1. <div class=”resimKapsulu”>
2. <div>
3. <img src=”images/koy_01.jpg” width=”250″ height=”165″ alt=”Vizara Köyü – Sürmene” />
4. </div>
5. </div>

Bu metodu uygulamak için resimKapsulu katmanına alt sağa dayalı bir gölge zemin resmi ekleyelim.

1. .resimKapsulu {
2. background: url(images/golge2.gif) no-repeat right bottom;
3. float: left;
4. }

Bu kapsayıcı katmanın içindeki katmanın üst sağına üstte oluşturduğumuz maske resmini ekleyelim. Bu resim gölge resminin üzerine binecektir ve ortaya çok güzel bir gölge efekti çıkacaktır. İçteki katmana gölgenin ortaya çıkması için padding uygulayalım. Ayrıca gerçek gölge efektini yakalamak için png zemin resmini ekleyelim.

1. .resimKapsulu div {
2. background: url(images/mask.png) no-repeat left top ;
3. background: url(images/mask.gif) no-repeat left top;
4. padding: 0 5px 5px 0;
5. }

Bu kodu eski versiyon IE versiyonlarına uygun kod yazarsak:

1. .resimKapsulu div {
2. background: url(images/mask.png) no-repeat left top ;
3. background: url(images/mask.gif) no-repeat left top;
4. padding: 0 5px 5px 0;
5. float: left; /* IE5.2/Mac duzeltmek icin yazildi */
6. }

son olarakta efekti vurgulamak için kenarlık tanımı yapalım.

1. .resimKapsulu img {
2. background-color: #fff;
3. border: 1px solid #a9a9a9;
4. padding: 4px;
5. }

gif ve png ikileminden hoşlanmayanlar için bir yöntem daha var. IE5.5 den sonraki versiyonların desteklediği

1. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/mask.png’, sizingMethod=’crop’);

Bu kodu ie versiyonları için eklemeliyiz, diğer web tarayıcılarında gizlemeliyiz.

1. .resimKapsulu div {
2. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/shadow2.png’, sizingMethod=’crop’);
3. background: none;
4. }

diğer web tarayıcılarında gizlemek için

1. <!–[if gte ie 5.5000]>
2. <link rel=”stylesheet” type=”text/css” href=”ie55.css”/>
3. <![endif]–>

Böylece tüm yeni nesil web tarayıcılarında bu metodu sağlıklı bir şekilde kullanmış olduk.

Onion Skin metodu ile Gölge eklemek

Son gölge verme metodu yuvarlak kenarlı kutuları oluşturduğumuz metoda benzer bir metottur. Bu metotta içiçe girmiş üç katman kullanırız soğan gibi ondan zaten(onion skin) diyorlar. En alttaki katmana gölge zemin resmi, bir üstteki katmanın sol alt kısmına gölge kenarı, en üstteki katmanın sağ üst kısmına gölge kenarı vererek yapılır.

Temel html kodu:

1. <div class=”nesneKapsayici1″>
2. <div class=”nesneKapsayici2″>
3. <div class=”nesneKapsayici3″>
4. <img src=”images/dunya.jpg” width=”300″ height=”300″ alt=”Dünya” />
5. </div>
6. </div>
7. </div>

İlk önce en dıştaki katmana gölge zemin resmini atayalım:

1. .nesneKapsayici1 {
2. background:url(images/golge.gif) no-repeat right bottom;
3. float: left;
4. }

Sonra oluşturduğumuz iki adet gölge resminin bir tanesini üst sağ tarafa, diğerini alt sol tarafa zemin resmi olarak veriyoruz. Ayrıca tam resme göre gölge vermek için aşağıdaki gibi kodlama yapmalıyız:

1. .nesneKapsayici2 {
2. background:url(images/altsol.gif) no-repeat left bottom;
3. float: left; /* IE5.2/Mac duzeltmek icin yazildi */
4. }
5. .nesneKapsayici3 {
6. background:url(images/ustsag.gif) no-repeat top right;
7. padding: 0 5px 5px 0;
8. float: left; /* IE5.2/Mac duzeltmek icin yazildi */
9. }

ve son olarak ta güzel bir efekt olması için kenarlık ve padding tanımlarını yapıyoruz:

1. .nesneKapsayici1 img {
2. background-color: #fff;
3. border: 1px solid #a9a9a9;
4. padding: 4px;
5. display: block;
6. }

Bu metot kolay uygulanabilirlik bakımından avantajlıdır. Ancak fazladan iki adet katman kullanılması bakımından pek anlamlı kod yazımına(semantik) uygun değildir. Ama bir çok web tarayıcısında sorunsuz çalışması bir artısıdır. Bu metot CSS3 ile birlikte daha basit hala gelecektir. Çünkü CSS3 bize bir nesneye birden fazla zemin resmi tanımlamamıza olanak sağlıyor. Ama bunu için beklemek zorundayız.