شاید داخل وب سایت خوده ما و دیگر سایت مشاهده کرده باشید که وقتی موس رو روی عکسی میبریم ، اون عکس یک حالتی به خودش میگیره ، میچرخه ، محو میشه ، پررنگ میشه ، دورش کادر میاد یا اصلا نه مثلا دور تمام عکس های سایت یک قالب هستش !! امروز قصد داریم تا آموزش ایجاد کادر دور عکس ها و چرخش تصاویر رو به همراه کدهاشونو تو این نوشته قرار بدیم.با ما باشید

استایل کادر و چرخش تصویر

کدهای استایل چرخش تصاویر و ایجاد کادر


.your-class img {
transition:all 0.5s ease;
 -moz-transition:all 0.5s ease;
 -o-transition:all 0.5s ease;
 -ms-transition:all 0.5s ease;
 -khtml-transition:all 0.5s ease;
 -webkit-transition:all 0.5s ease;
 margin: 6px 0; padding: 2px; border: none;border: 2px solid #f8f8f8
 }
.your-class img:hover { border: 2px solid #37badc;
 transform:rotate( 4deg );
 -moz-transform:rotate( 4deg );
 -o-transform:rotate( 4deg );
 -ms-transform:rotate( 4deg );
 -webkit-transform:rotate( 4deg );
 -khtml-transform:rotate( 360deg );
 }

در ادامه به توضیح و آموزش قرار دادن کد ها می پردازیم.

می خوام تمام تصاویر سایتم این استایل رو بگیره ؟

ما در کدهای بالا اسم کلاسی رو آوردیم که  فقط تصاویر مربوط به اون div این استایل رو به خودش میگیره.حالا ما می خوایم تمام تصاویر سایتمون این شکلی بشه.برای این کار اون دوتا کلاس رو یعنی عبارت your-class. رو از هر دوتا کد پاک کنید.

سپس فایل شیوه نامه (style.css) قالب خودتونو باز کنید (یا اگر همچین فایلی ندارید کدهای شیوه نامه در بین دوتا تگ <head> </head> هستند ) . سپس همون ابتدا body رو پیدا کرده و در زیر شیوه نامه بادی کدهای زیر رو که اون عبارت رو ازش پاک کرده بودید کپی کنید.داخل دموی این استایل که در انتها گذاشتم لینکشو ، من همچین کاریو انجام دادم.

می خوام فقط عکس هاس داخل نوشته هام بچرخن ؟

اگر نمی دونید باید بگردید و پیدا کنید که نوشته های شما داخل div با چه کلاس یا id هستند ، سپس برید دقیقا زیر شیوه نامه همون کلاس یا آیدی و بجای  your-class. که در کدهای بالا قرار دادیم نام کلاس یا آیدی مورد نظره قالبتون رو بنویسید.دقت کنید اگر id بود بجای نقطه باید از علامت شارپ (#) استفاده کنید.

دمو و دانلود استایل چرخش تصاویر و کادر دور آنها

مشاهده دموی استایل چرخش تصاویر

دانلود کدها و فایل ضمیمه

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 1 رای
Loading...