افکت کج شدن تصاویر

[vahab00]

شاید شما هم در برخی سایت ها مشاهده کرده باشید که هنگامی که موس خود را بر روی عکسی میبرید عکس مورد نظر به اطراف کج می شود


http://s2.webamoz.ir/img/6.91/img-effects.jpg

برای این ساعت از سایت وب آموز این افکت زیبا را برای شما آماده کردم . امیدوارم مورد پسند و رضایت شما دوستان عزیز قرار بگیره

برای اینکار باید ابتدا css رو اینطور تعریف کنیم :


img {
border: solid 5px #444444;
border-radius: 7px 7px 7px 7px;
box-shadow: 0 0 4px #858585;
}

img:hover {
border: solid 5px #4bbdff;
border-radius: 80px 7px 80px 7px;
box-shadow: 0 0 4px #FFFFFF;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
}

در استایل بالا گفتیم برای عکس ها یک بردر (حاشیه دور عکس) تعریف کن و نوعش رو solid یعنی خط ساف بزار و سایزش ۵ پیکسل باشه

بعد شعاع براش تعریف کردیم ۷ پیکسل و سپس نوع جعبه سیاه و رنگش

بعد گفتیم هر وقت موس رفت روی عکس (img:hover) افکت کج شدن رو بهش بده

فکر نکنم نیاز به توضیح خواصی باشه و خدایی حوصله توضیح هم برای این ها رو ندارم . اگه سوالی دارید بپرسید تا توضیح بدم

از این پس هر جا عکسی ببینه این افک رو روش میذاره

اما اگه میخواید این افکت رو فقط مثلا تو پست هاتون استفاده کنید ببینید کلاس div پستتون چیه . مثلا اگه کلاس div پست من content بود اینطور براش تعریف میکنم :


.content img {
border: solid 5px #444444;
border-radius: 7px 7px 7px 7px;
box-shadow: 0 0 4px #858585;
}

.content img:hover {
border: solid 5px #4bbdff;
border-radius: 80px 7px 80px 7px;
box-shadow: 0 0 4px #FFFFFF;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
}

در اینجا گفتیم در تگ content هر عکسی دیدی بهش این افکت رو بده

شما میتوانید دمو این افکت را به صورت html از اینجا (http://www.webamoz.ir/1391/06/%D8%A7%D9%81%DA%A9%D8%AA-%DA%A9%D8%AC-%D8%B4%D8%AF%D9%86-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1.html) دانلود کنید

امیدوارم این آموزش مورد توجه و رضایت شما دوستان عزیز قرار بگیره

منتظر نظرات ، پیشنهادات و انتقادات شما دوستان عزیز هستم

منبع : وب آموز - افکت کج شدن تصاویر (http://www.webamoz.ir/1391/06/%D8%A7%D9%81%DA%A9%D8%AA-%DA%A9%D8%AC-%D8%B4%D8%AF%D9%86-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1.html)