Kullanışlı bir portfolyo tasarımı

Aslında tam olarak portfolyo amaçlı yapılmış olmasa da onun için de kullanılabilir bir örnek. Eski tarayıcılarda mouse üzerine geldiğinde resimlerin kararmasını sağlayan bir çalışma bu. Daha doğrusu resimleri kararmış gibi gösteriyor. Tek bir resim dosyasına biri siyah beyaz ve diğeri de renkli olan iki resim eklenmiş. Ana ekranda renkli olan resim görüntülenir ve mouse üzerine gelince fade efekti ile siyah beyaz olan resme geçiş yapılır.  Günümüzde buna benzer çalışmaları yapabilmek için bu tarz sprite teknikleri uygulamaya gerek olmasa da grey-scale yani karartma  efekti verme özelliği henüz bütün tarayıcılar üzerinden desteklenmiyor. Bu yüzden bu tarz çalışmalar kullanmak sizin için daha faydalı olur. Denemedim ama sanırım IE6 ve üstü olan tarayıcılar üzerinde sorunsuz şekilde çalışabiliyor. Portfolyo haricinde kendi kişisel sitenizde kategorilerin anasayfasında kullanmak için oldukça iyi görünen bir çalışma bana göre.
Kullanım

• Head etiketleri  arasına eklemeniz  gereken bölümler.

Js  adresi : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

JavaScript : 

<script type="text/javascript">

$(document).ready(function() {

	$("ul.gallery li").hover(function() { //On hover...

		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

		//Set a background image(thumbOver) on the &lt;a&gt; tag 
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
		//Fade the image to 0 
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		}); 
	} , function() { //on hover out...
		//Fade the image to 1 
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});

});

</script>

Stil : 

<style type="text/css">
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	background: #fff;
	position: relative;
}
h1 {
	text-align: center;
	font-weight: normal;
	font-size: 2.5em;
}
h1 small {
	display: block;
	font-size: 0.7em;
	color: #999;
}
img {border: none;}
ul.gallery {
	width: 708px;
	list-style: none;

}
ul.gallery li {
	float: left;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix--*/
}
ul.gallery li a.thumb {
	width: 204px;
	height: 182px;
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
	width: 204px;
	height: 182px;
	overflow: hidden;
	display: block;
}
ul.gallery li a.thumb:hover {
	background: #333;
}
ul.gallery li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px;
	background: #f0f0f0;
	border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}
</style>

•  Body  etiketleri arasına eklemeniz gereken bölüm.

Html : 

<ul class="gallery">
	<li>
		<a href="#" class="thumb"><span><img src="images/sushiand.gif" alt="" /></span></a>
		<h2><a href="#">Sushi &amp; Robots</a></h2>
	</li>
	<li>
		<a href="#" class="thumb"><span><img src="images/garysrea.gif" alt="" /></span></a>
		<h2><a href="#">Gary's Life</a></h2>
	</li>
	<li>
		<a href="#" class="thumb"><span><img src="images/cubescri.gif" alt="" /></span></a>
		<h2><a href="#">Cube Scripts</a></h2>
	</li>
	<li>
		<a href="#" class="thumb"><span><img src="images/ryankeis.gif" alt="" /></span></a>
		<h2><a href="#">Ryan Keiser</a></h2>
	</li>
	<li>
		<a href="#" class="thumb"><span><img src="images/ricardog.gif" alt="" /></span></a>
		<h2><a href="#">Ricardo Gimenes</a></h2>
	</li>
	<li>
		<a href="#" class="thumb"><span><img src="images/foodteas.gif" alt="" /></span></a>
		<h2><a href="#">Food Tease</a></h2>
	</li>

</ul>