استایل کادر و چرخش تصاویر سایت
شاید داخل وب سایت خوده ما و دیگر سایت مشاهده کرده باشید که وقتی موس رو روی عکسی میبریم ، اون عکس یک حالتی به خودش میگیره ، میچرخه ، محو میشه ، پررنگ میشه ، دورش کادر میاد یا اصلا نه مثلا دور تمام عکس های سایت یک قالب هستش !! امروز قصد داریم تا آموزش ایجاد کادر دور عکس ها و چرخش تصاویر رو به همراه کدهاشونو تو این نوشته قرار بدیم.با ما باشید
کدهای استایل چرخش تصاویر و ایجاد کادر
.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 بود بجای نقطه باید از علامت شارپ (#) استفاده کنید.
در دمو ایی که وجود داره یک دیو کناره پیج وجود داره,سمت چپ.ممیشه در این باره بهم کمک کنید.ممنون.یاستتون بنظرم واقعا خوب بود
بله واقعا” عالی بود ممنونم از شما
سلام از این مطلب استفاده کردم تشکر
با عرض سلام و خسته نباشید خدمت مدیریت سایت دکتر وردپرس . آقا آرش از تون خواهش میکنم جوابمو بدید . من یه قالب وردپرس درست کرده ام همی چیز رو ساختم ولی فقط افزونه (( نمایش کد یعنی افزونه ی SyntaxHighlighter در قالبم کار نمی کنه می خواست بدونم اگه تکه کد یا تگی وجود داره که در قالبم بذارم تا کدها نمایش داده شوند رو بهم بدید خواهش می کنم با تشکر و درود فراوان
سلام.
چیکار کنیم فقط وقتی موس روی عکس اومد یچرخه و وقتی موس از روی عکس برداشته شد دیگه نچرخه.
مثل عکس سمت راست هدر سایتتون.
ممنون
سلام.
چیکار کنیم فقط وقتی موس روش می اد 360درجه بچرخه و قتی موس عکس رو ترک کی کنه دیگه نچرخه.
مثل عکس سمت راست هدر سایتتون.
سلام / با تشکر فایل شیوه نامه (style.css) قالب لوکس بلاگ را پیدا نکردم . کدها دو عبارت your class. رو پاک کردم و زیر body قرار دادم اتفاقی نیفتاد .لطفا” ساده تر راهنمایی فرمایید.
سلام
برای وبلاگ یکم سخت هستش ، چون معمولا فایل ها یکجا دیگه آپلود شدن ، باید از قسمت ویرایش قالب style.css رو پیدا کنید و بعد از ویرایش و اضافه کردن کدها اونو یکجا آپلود کنید و آدرسی رو که آپلود کردید بجای آدرس قبلی تو قسمت ویرایش قالب قرار بدید.
راستش ساده تر نمیشه توضیح داد ، باید یکمم خودتون هم بلد باشید
سلام و ممنون ..
عالیه بود ..ممنون
با سلام و تشکر از وب سایت خوبتون
به جای .your-class نام عکس مورد نظر باید وارد شود؟
سلام
نه باید کلاس یا آیدی مورد نظرتونو تو قالب پیدا کنید و وارد کنید.
این کد رو همون طوری که گفتین زیر body قرار میدم ولی کار نمی کنه، میشه یکم بیشتر راهنماییم کنین؟
دوست عزیز اگر از کدها دو عبارت your class. رو پاک کنید و زیر body قرار بدید تمام تصاویر سایت استایل رو به خودشون میگیرند اما اگر فقط می خواهید یک قسمت خاصی از قالبتون اینطوری بشه عکس هاش باید ببینید تو قالبتون از چه کلاسی استفاده شده و بجای عبارت your class. کلاس مورد نظر قالب خودتونو قرار بدید.
سلام امکانش هست فقط کادر دور بگیره. نمیخوام بچرخه فقط میخوام اون کادر آبیه دورش بیاد وقتی میری روش
از کلاس اولی فقط آخرین کد رو نگه دارید و بقیه رو پاک کنید و از کلاس دومی هم فقط خط اول کدها و بقیه رو پاک کنید.
سلام مرسی از مطالب خوب و مفیدت
سلام ،
خوشحالم که مورد استفادتون قرار گرفت.