CSS 18 Aralık 2009

Resme Highlight Efekti Verme

\"mysuitestuff\"Bu yazımızda resimlere donuk özelliği vererek fare ile üstüne gelindiğinde Highlight yani vurgulama efekti vermeyi göreceğiz. Bağlantının hover etkisi üzerinde yapacağız.

CSS örneğimizde özelleştirilmiş opacity kullanımını da görmüş olacağız. IE 5.5 ve üzeri tarayıcılarda \”filter\” özelliği için aralık değerleri 0-100 arasında ve Firefox tarayıcıda \”-moz-opacity\” değeri 0-1 arasındadır. Her iki özelliğin kullanımı şahıslara atiitr ve W3C standartları tarafından desteklenmemektedir.


Bunun için yazılacak CSS style sayfası şudur:

[blockquote color=blue]<style type=\”text/css\”>

.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.toggleopacity img{
border: 1px solid #ccc;
}

</style>[/blockquote]

Resim için HTML kodu:

[blockquote color=blue]<a class=\”toggleopacity\” href=\”http://www.trenderkekicgiyim.com\”><img src=\”http://www.bulanca.com/wp-content/uploads/2009/12/about.jpg\” width=\”48\” height=\”48\” /></a>[/blockquote]

Bunu da Oku:  CSS Kodlamaya Giriş -1

Yazar Bilgileri

Emrah emrah19may@hotmail.com
1981 Samsun doğumlu ve Gazi Üniversitesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi mezunu. Bilişim Teknolojileri Öğretmeni olarak görev yapmakta olup DMOZ Editörü, Web-Grafik Tasarımı ve SEO eğitmeni.

Yorum Yap