سیاه و سفید | فیلتر sepia | چرخاندن رنگ | بلور شدن تصویر | نگاتیو شدن |
---|
مشاهده کدهای آلبوم
کدهای 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) ; /* کدهای تنظیم سرعت و شکل تغییر خواص 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 .5sease-out
.1s; -o-transition: all .5sease-out
.1s; -webkit-transition: all .5sease-out
.1s; transition: all .5sease-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) ; }
بازگشت به آلبوم
© 2024 copyright کاری از ماندگاروب ، کپی برداری بلامانع است طراح و برنامه نویس ایمان فخار