PhotoGallery – Oldukça şık bir tasarım

Çok güzel ve kullanışlı bir Css3 fotoğraf galerisi örneği. İçinde 12 adet fotoğraf bulunan bu örneği Css kodlar ile değişiklik yaparak istediğiniz boyutlarda  kullanabilirsiniz.

Çok az bir zahmet ile sitenizin herhangi bir köşesine uyabilecek şekilde düzenleyebilirsiniz. Benim düşüncem sitenin sağ yada sol tarafında dikey olarak kullanmaktı. Daha doğrusu sağ yada sol tarafta daha iyi görünür diye düşünüyordum. İsterseniz bannere, footere yada sitenizin göbeğine ekleyin. Hangi bölüme eklerseniz ekleyin sitenize farklı bir görünüm kazandıracak bir örnektir bu Css3 fotoğraf galerisi.

Css3 galeri örneğimizde webkit animasyonlar kullanılmış, resimler arası geçiş için fade efekti kullanılmış ve tamamen Css3 olarak hazırlanmıştır. Herhangi bir javascript kod bulunmuyor.

 Kullanım : 

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

Css : 

@charset "utf-8";
/* CSS Document */
#wrap{   
	margin: 30px auto;
	}
*{margin:0; padding:0;}
#wrap{width:900px; height:260px; background:#000; overflow:hidden;}

#main_ul{padding:2px;}
#wrap li{list-style:none;}
#main_view_wrap{width:440px; height:260px; margin-bottom:2px; float:right; position:relative; overflow:hidden;}
#main_view_wrap input{display:none;}
#main_view_wrap li{position:absolute; top:0; left:0;}
#main_view_wrap input:checked + img{opacity:1; -moz-opacity:1; filter: alpha(opacity=100);
	-webkit-animation:'check_on' 1s ease 1;
	-moz-animation:'check_on' 1s ease 1;
	-ms-animation:'check_on' 1s ease 1;
	-o-animation:'check_on' 1s ease 1;
}

#main_view_wrap img{width:440px; height:256px; opacity:0; -moz-opacity:0; filter: alpha(opacity=0);
	-webkit-animation:'check_off' 1s ease 1;
	-moz-animation:'check_off' 1s ease 1;
	-ms-animation:'check_off' 1s ease 1;
	-o-animation:'check_off' 1s ease 1;
}

.switch{width:112px; height:84px; float:left;  margin:0 2px 2px 0;}
.switch label img{
	opacity:0.8; -moz-opacity:0.8; filter: alpha(opacity=80);
	-webkit-animation:'check_out' 0.5s ease 1;
	-moz-animation:'check_out' 0.5s ease 1;
	-ms-animation:'check_out' 0.5s ease 1;
	-o-animation:'check_out' 0.5s ease 1;
}

.switch label img:hover{
	opacity:1; -moz-opacity:1; filter: alpha(opacity=100);
	-webkit-animation:'check_over' 0.5s ease 1;
	-moz-animation:'check_over' 0.5s ease 1;
	-ms-animation:'check_over' 0.5s ease 1;
	-o-animation:'check_over' 0.5s ease 1;
}

.switch label{cursor:pointer;}
.switch img{width:112px; height:84px;}

/* keyframes check_over */
	@-webkit-keyframes check_over{
		0%{opacity:0.8;}
		100%{opacity:1;}
	}
	@-moz-keyframes check_over{
		0%{-moz-opacity:0.8;}
		100%{-moz-opacity:1;}
	}
	@-ms-keyframes check_over{
		0%{ filter: alpha(opacity=80);}
		100%{ filter: alpha(opacity=100);}
	}
	@-o-keyframes check_over{
		0%{opacity:0.8;}
		100%{opacity:1;}
	}
	@keyframes check_over{
		0%{opacity:0.8;}
		100%{opacity:1;}
	}	
/* keyframes check_over */

/* keyframes check_out */
	@-webkit-keyframes check_out{
		0%{opacity:1;}
		100%{opacity:0.8;}
	}
	@-moz-keyframes check_out{
		0%{-moz-opacity:1;}
		100%{-moz-opacity:0.8;}
	}

	@-ms-keyframes check_out{
		0%{filter: alpha(opacity=80);}
		100%{filter: alpha(opacity=80);}
	}

	@-o-keyframes check_out{
		0%{opacity:1;}
		100%{opacity:0.8;}
	}

	@keyframes check_out{
		0%{opacity:1;}
		100%{opacity:0.8;}
	}
/* keyframes check_out */

/* keyframes check_on */
	@-webkit-keyframes check_on{
		0%{opacity:0;}
		100%{opacity:1;}
	}
	@-moz-keyframes check_on{
		0%{-moz-opacity:0;}
		100%{-moz-opacity:1;}
	}
	@-ms-keyframes check_on{
		0%{-moz-opacity:0;}
		100%{-moz-opacity:1;}
	}

	@-o-keyframes check_on{
		0%{-moz-opacity:0;}
		100%{-moz-opacity:1;}
	}
	@keyframes check_on{
		0%{-moz-opacity:0;}
		100%{-moz-opacity:1;}
	}	
/* keyframes check_on */

/* keyframes check_on */
	@-webkit-keyframes check_off{
		0%{opacity:1;}
		100%{opacity:0;}
	}
	@-moz-keyframes check_off{
		0%{-moz-opacity:1;}
		100%{-moz-opacity:0;}
	}
	@-ms-keyframes check_off{
		0%{-moz-opacity:1;}
		100%{-moz-opacity:0;}
	}

	@-o-keyframes check_off{
		0%{-moz-opacity:1;}
		100%{-moz-opacity:0;}
	}
	@keyframes check_off{
		0%{-moz-opacity:1;}
		100%{-moz-opacity:0;}
	}	
/* keyframes check_on */

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

Html : 

<div id="wrap">
	<form>
		<ul id="main_ul">
			<li id="main_view_wrap">
				<ul>
					<li><input type="radio" id="radio_01" name="main"><img src="img/1.jpg"></li>
					<li><input type="radio" id="radio_02" name="main"><img src="img/2.jpg"></li>
					<li><input type="radio" id="radio_03" name="main"><img src="img/3.jpg"></li>
					<li><input type="radio" id="radio_04" name="main"><img src="img/4.jpg"></li>
					<li><input type="radio" id="radio_05" name="main"><img src="img/5.jpg"></li>
					<li><input type="radio" id="radio_06" name="main"><img src="img/6.jpg"></li>
					<li><input type="radio" id="radio_07" name="main"><img src="img/7.jpg"></li>
					<li><input type="radio" id="radio_08" name="main"><img src="img/8.jpg"></li>
					<li><input type="radio" id="radio_09" name="main"><img src="img/9.jpg"></li>
					<li><input type="radio" id="radio_10" name="main"><img src="img/10.jpg"></li>
					<li><input type="radio" id="radio_11" name="main"><img src="img/11.jpg"></li>
					<li><input type="radio" id="radio_12" name="main" checked><img src="img/13.jpg"></li>
				</ul>
			</li>
			<li class="switch"><label for="radio_01"><img src="img/1.jpg"></label></li>
			<li class="switch"><label for="radio_02"><img src="img/2.jpg"></label></li>
			<li class="switch"><label for="radio_03"><img src="img/3.jpg"></label></li>
			<li class="switch"><label for="radio_04"><img src="img/4.jpg"></label></li>
			<li class="switch"><label for="radio_05"><img src="img/5.jpg"></label></li>
			<li class="switch"><label for="radio_06"><img src="img/6.jpg"></label></li>
			<li class="switch"><label for="radio_07"><img src="img/7.jpg"></label></li>
			<li class="switch"><label for="radio_08"><img src="img/8.jpg"></label></li>
			<li class="switch"><label for="radio_09"><img src="img/9.jpg"></label></li>
			<li class="switch"><label for="radio_10"><img src="img/10.jpg"></label></li>
			<li class="switch"><label for="radio_11"><img src="img/11.jpg"></label></li>
			<li class="switch"><a href="https://www.mintik.com/?p=13544"><img src="img/13.jpg"></a></li>
		</ul>
	</form>
</div>