• اطلاعیه ها

    • Masih

      برخوردی شدید با تاپیک های تبلیغاتی   شنبه, 12 آبان 1397

      درود، از این لحظه به بعد، تمامی تاپیک های تبلیغاتی سبک رپرتاژ که با هدف جمع آوری بک لینک در انجمن های بیست اسکریپت ایجاد می شوند، حذف شده و دسترسی کاربر خاطی نیز مسدود خواهد شد.
Configer

تغییر افکت عکس های وردپرس

9 ارسال در این موضوع قرار دارد

سلام

یه چندتا عکس توی سایتم هست

وقتی ماوس میره روش کم رنگ تر میشه

میخام این افکت رو عوض کنم

مثلا وقتی ماوس رفت روش چرخشی بشه یا ویبره بخوره

کد افکت هاشو کسی داره؟

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

بفرمایید:

لطفا برای مشاهده link وارد سایت شوید و یا ثبت نام کنید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

نمیخاستم از کد وبلاگ استفاده کنم

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

درود بر شما.

 

افکت کم رنگ شدن تصویر ، به دلیل استفاده از خاصیت استایل opacity هست. در واقع یک خاصیت تک خطی به صورت زیر که این افکت رو اعمال می کنه :

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

همونطور هم که میدونید مقدار این خاصیت نهایتا عدد 1 می تونه باشه. عدد 1 هم یعنی وضوح کامل . حالا برای مثال مقدار 0.5 این وضوح رو کم می کنه یا به گفته خودتون عنصر مورد نظر رو کم رنگ تر می کنه. هر چی این رقم اعشاری پایین تر بره، کمرنگ تر میشه.

خود این خاصیت هم به راحتی روی هر عنصری از صفحه می تونه برای نوع hover یک عنصر استفاده بشه. تااینجا یه نکته آموزشی بود.

 

اما افکت چرخشی یا ویبره، خودشون نیازمند چندین خاصیت و کلس و ID جداگانه هستند.

در ادامه آموزش رو تقریبا به صورت مبتدی بیان می کنم تا اگر دوستان دیگری هم خواستید استفاده کنند، بهتر بتونند متوجه بشن.

 

 

روش استفاده از افکت چرخشی :

یک دمو از این کد براتون آماده کردم که

لطفا برای مشاهده link وارد سایت شوید و یا ثبت نام کنید.

می تونید ببینید. (با اجازه برای تصویر هم از آواتار خودتون استفاده کردم).

در این نوع افکت، زمانی که موس روی تصویر بره، یک چرخش 360 درجه ای اتفاق میفته.

 

برای استفاده از این افکت، ابتدا باید کد زیر رو در فایل CSS قالبمون قرار بدیم.

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

این کد هم همونطور که پیداست برای تعریف یک کلس جدید و امکان Hover اون استفاده میشه.

در کد بالا ما یک کلس جدید به نام roteffect ایجاد کردیم. حالا این کلس رو به تصویر یا عنصری که می خواهیم این افکت رو بگیره پیوست می کنیم. مثلا:

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

به هر حال شما باید این کلس رو به نوعی به تصاویر یا عنصر مورد نظرتون اضافه کنید. چه کد مربوط به عنصر به صورت HTML در دسترس باشه، چه به صورت یک حلقه کد PHP باشه، بالاخره این کلس باید به کد عنصر مورد نظر اضافه بشه.

 

بعد از اون هم که دیگه فقط می تونید ازش لذت ببرید! حالا هر خاصیت دیگه ای هم که خواستید می تونید به کد CSS اضافه کنید.

 


افکت لرزشی :

برای این مورد هم یک دمو آماده کردم.

لطفا برای مشاهده link وارد سایت شوید و یا ثبت نام کنید.

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

 

استفاده از این هم آسون هست. مثل قبل ابتدا دستورات CSS رو وارد قالب می کنیم :

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

حالا مجددا مثل افکت قبل ، باید کلس جدید رو به عنصر مورد نظرمون اضافه کنیم تا این افکت روی اون اعمال بشه. اگر دموی این افکت رو دیده باشید و کدهاش رو بررسی کرده باشید متوجه شدید که به چه صورت.

برای استفاده از این افکت هم کافیه کلس hvr-buzz-out رو به یک عنصر اضافه کنید. مثال:

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

مشکلی بود بپرسید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

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

چیکار باید بکنم؟

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
در 1 ساعت قبل، marjan68 گفته است :

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

چیکار باید بکنم؟

درود.

آدرس سایت و محل قرار گیری این عکس رو همینجا بزارید تا بهتر راهنمایی کنیم.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

ارسال شده در (ویرایش شده)

در در 17 تیر 1397 در 14:47، Masih گفته است :

درود.

آدرس سایت و محل قرار گیری این عکس رو همینجا بزارید تا بهتر راهنمایی کنیم.

لطفا برای مشاهده link وارد سایت شوید و یا ثبت نام کنید.

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

 

ویرایش شده در توسط marjan68

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
در 15 ساعت قبل، marjan68 گفته است :

لطفا برای مشاهده link وارد سایت شوید و یا ثبت نام کنید.

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

 

درود مجدد.

لوگویی که می فرمایید در فرمت عکس هست. اگر به صورت متن بود می شد با استفاده از استایل و خاصیت رنگ و ... بدون هیچ زحمتی بهش رنگ داد. اما چون تصویر هست، و نمی تونیم توسط filter در استایل رنگ خاکستری رو تغییر بدیم، باید یک عکس مجزا از لوگو که به رنگ آبی هست رو تهیه کنیم و ازش استفاده کنیم.

برای اینکار، اول لوگوی زیر رو در پوشه images قالبتون در کنار فایل logod.png آپلود کنید و بعد کد زیر رو در یکی از فایل های استایل قالبتون قرار بدید. دقت کنید که لوگویی که بنده به رنگ آبی درآورده ممکنه اون رنگی نباشه که می خواهید. بهتره شما که فایل اصلی لوگو رو به صورت PSD دارید، رنگ مورد نظر رو روی متن اعمال کنید و ازش استفاده کنید :

* نام این لوگوی زیر رو به logoe.png تغییر بدید موقع ذخیره کردن داخل سیستمتون.

logoe.png.e4e7819d48b8f1c909c7db5cba14bb82.png

 

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

 

پسند شده توسط 1 کاربر

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
در 8 ساعت قبل، Masih گفته است :

درود مجدد.

لوگویی که می فرمایید در فرمت عکس هست. اگر به صورت متن بود می شد با استفاده از استایل و خاصیت رنگ و ... بدون هیچ زحمتی بهش رنگ داد. اما چون تصویر هست، و نمی تونیم توسط filter در استایل رنگ خاکستری رو تغییر بدیم، باید یک عکس مجزا از لوگو که به رنگ آبی هست رو تهیه کنیم و ازش استفاده کنیم.

برای اینکار، اول لوگوی زیر رو در پوشه images قالبتون در کنار فایل logod.png آپلود کنید و بعد کد زیر رو در یکی از فایل های استایل قالبتون قرار بدید. دقت کنید که لوگویی که بنده به رنگ آبی درآورده ممکنه اون رنگی نباشه که می خواهید. بهتره شما که فایل اصلی لوگو رو به صورت PSD دارید، رنگ مورد نظر رو روی متن اعمال کنید و ازش استفاده کنید :

* نام این لوگوی زیر رو به logoe.png تغییر بدید موقع ذخیره کردن داخل سیستمتون.

لطفا برای مشاهده link وارد سایت شوید و یا ثبت نام کنید.

 

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

 

ممنون واقعا . درست شد 

خیلی لطف کردین

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • چه کسانی در حال بازدید هستند؟   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.