Bugün sizlere CSS ile resimlere efekt vermeyi göstereceğim. Aşağıdaki resimde görmüş olduğunuz resmin üzeirne bir tutturaç eklenmiş. Bu sayede resmin daha güzel görünümü sağlanmıştır.

Gelelim çalışmamızı yapmaya;

Yukarıdaki HTML kodlarını sayfamıza ekleyelim, CSS kodlarınıda CSS dosyamız ekleyelim. Kodlarda önemli olan div tag’ına position: relative; kodunun eklenmesi, span tag’ına ise position: absolute; kodunun eklenmesidir. Bu sayede tutturaçımızı resmin üzerinde gösterebiliriz. Ayrıca span tag’ının pozisyonunu top ve left kodlarıyla değiştirebilirsiniz.

İnternet explorer 6′da bu uygulamamızda sonuç iyi olmayacaktır. Bu nedenle ekstra bir işlem yapmamız gerekir. Bunun için iepngfix.htc dosyasını indirmemiz gerekmektedir. Bu dosyayı indirdikten sonra dosyamızın yanına kopyalayalım ve sayfamızın head tagları arasına şu kodu ekleyelim;

<!--[if lt IE 7]>
<style type="text/css">

  .photo span { behavior: url(iepngfix.htc); }

</style>
<![endif]-->

İşte hepsi bu kadar. Aşağıdan diğer örnekleri inceleyebilirsiniz;

Bu yazıyı paylaşın :)