مشاهده کدهای آلبوم

کدهای HTML

<div id="gallery" class="grayscale">
<img src="images/flowers/1.jpg" >
<img src="images/flowers/2.jpg" >
<img src="images/flowers/3.jpg" >
	<br >
<img src="images/flowers/4.jpg" >
<img src="images/flowers/5.jpg" >
<img src="images/flowers/6.jpg" >
	<br >
<img src="images/flowers/7.jpg" >
<img src="images/flowers/8.jpg" >
<img src="images/flowers/9.jpg" >
</div>

کدهای CSS

#gallery {
 display:block;
 padding:10px;
 background:#CCC;
 border:1px #aaa solid;
 width:636px;
 height:636px;
 margin-left:auto;
 margin-right:auto;
}
#gallery img {
 cursor:pointer;
 padding:5px;
 width:190px;
 height:190px;
 margin:5px;
 background:#eee;
 border:1px #ddd solid;
/* کد تعریف فیلترهای وب کیت /*
 -webkit-filter:drop-shadow(0px 0px 0px rgba(0, 0, 0, .0)) grayscale(1)sepia(1)hue-rotate(180deg)blur(4px)invert(1);
/*
 کدهای تنظیم سرعت و شکل تغییر خواص 
all
نشان دهنده خواصی است که قرار است با مکث و به صورت زنده تغییر  خواص دهند
 .5s
مدت زمان اجرای تغییر مقدار فعلی معادل نیم ثانیه 
 ease-out 
نحوه ی اجرای تغییر مقادیر دیگر  
 linear
یکنواخت در طول مسیر  
 ease
افکت حرکتی که به صورت آهسته شروع شده و بعد سرعت می یابد و در انتها بسیار آهسته به پایان می رسد  
 ease-in
افکت حرکتی که آهسته آغاز می شود 
 ease-out
افکت حرکتی که آهسته به پایان می رسد  
 ease-in-out
افکت حرکتی که آهسته آغاز می شود و به پایان می رسد 
 cubic-bezier(n,n,n,n)
معادل های عددی برای ساخت افکت دلخواه مقادیر صحیح اعداد بین 0 و 1
 .1s
توقف قبل از اجرای تغییر مقدار فعلی معادل یک دهم ثانیه است
/* 
 -moz-transition: all .5s ease-out .1s;  
 -o-transition: all .5s ease-out .1s;  
 -webkit-transition: all .5s ease-out .1s;  
 transition: all .5s ease-out .1s; 
}
/* کدهای تغییر خواص در زمان اشاره موس /* 
#gallery img:hover {
 width:200px;
 height:200px;
 margin:0px;
 background:#E8E8DD;
 border-color:#999966;
 -webkit-filter:drop-shadow(3px 3px 5px rgba(0, 0, 0, .5)) grayscale(0)sepia(0)hue-rotate(0deg)blur(0px)invert(0);
}