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

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

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

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


.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 بود بجای نقطه باید از علامت شارپ (#) استفاده کنید.

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

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

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

امتیاز شما برای این مقاله
18 نظرات
  1. zahra می گوید

    در دمو ایی که وجود داره یک دیو کناره پیج وجود داره,سمت چپ.ممیشه در این باره بهم کمک کنید.ممنون.یاستتون بنظرم واقعا خوب بود

  2. تخت بادی می گوید

    بله واقعا” عالی بود ممنونم از شما

  3. saeedeh می گوید

    سلام از این مطلب استفاده کردم تشکر

  4. رحمت حاجی سعدین می گوید

    با عرض سلام و خسته نباشید خدمت مدیریت سایت دکتر وردپرس . آقا آرش از تون خواهش میکنم جوابمو بدید . من یه قالب وردپرس درست کرده ام همی چیز رو ساختم ولی فقط افزونه (( نمایش کد یعنی افزونه ی SyntaxHighlighter در قالبم کار نمی کنه می خواست بدونم اگه تکه کد یا تگی وجود داره که در قالبم بذارم تا کدها نمایش داده شوند رو بهم بدید خواهش می کنم با تشکر و درود فراوان

  5. mohammad می گوید

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

  6. mohammad می گوید

    سلام.
    چیکار کنیم فقط وقتی موس روش می اد 360درجه بچرخه و قتی موس عکس رو ترک کی کنه دیگه نچرخه.
    مثل عکس سمت راست هدر سایتتون.

  7. احمد مانی می گوید

    سلام / با تشکر فایل شیوه نامه (style.css) قالب لوکس بلاگ را پیدا نکردم . کدها دو عبارت your class. رو پاک کردم و زیر body قرار دادم اتفاقی نیفتاد .لطفا” ساده تر راهنمایی فرمایید.

    1. آرش حیدری می گوید

      سلام
      برای وبلاگ یکم سخت هستش ، چون معمولا فایل ها یکجا دیگه آپلود شدن ، باید از قسمت ویرایش قالب style.css رو پیدا کنید و بعد از ویرایش و اضافه کردن کدها اونو یکجا آپلود کنید و آدرسی رو که آپلود کردید بجای آدرس قبلی تو قسمت ویرایش قالب قرار بدید.
      راستش ساده تر نمیشه توضیح داد ، باید یکمم خودتون هم بلد باشید

  8. قائم می گوید

    سلام و ممنون ..

  9. tekide می گوید

    عالیه بود ..ممنون

  10. un می گوید

    با سلام و تشکر از وب سایت خوبتون

    به جای .your-class نام عکس مورد نظر باید وارد شود؟

    1. آرش حیدری می گوید

      سلام
      نه باید کلاس یا آیدی مورد نظرتونو تو قالب پیدا کنید و وارد کنید.

  11. محمد می گوید

    این کد رو همون طوری که گفتین زیر body قرار میدم ولی کار نمی کنه، میشه یکم بیشتر راهنماییم کنین؟

    1. آرش حیدری می گوید

      دوست عزیز اگر از کدها دو عبارت your class. رو پاک کنید و زیر body قرار بدید تمام تصاویر سایت استایل رو به خودشون میگیرند اما اگر فقط می خواهید یک قسمت خاصی از قالبتون اینطوری بشه عکس هاش باید ببینید تو قالبتون از چه کلاسی استفاده شده و بجای عبارت your class. کلاس مورد نظر قالب خودتونو قرار بدید.

  12. peyman می گوید

    سلام امکانش هست فقط کادر دور بگیره. نمیخوام بچرخه فقط میخوام اون کادر آبیه دورش بیاد وقتی میری روش

    1. آرش حیدری می گوید

      از کلاس اولی فقط آخرین کد رو نگه دارید و بقیه رو پاک کنید و از کلاس دومی هم فقط خط اول کدها و بقیه رو پاک کنید.

  13. بهار می گوید

    سلام مرسی از مطالب خوب و مفیدت

    1. آرش حیدری می گوید

      سلام ،
      خوشحالم که مورد استفادتون قرار گرفت.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.