رفتن به مطلب

افکت گذاری سیاه و سفید بر روی تصاویر سایت


پست های پیشنهاد شده

با سلام خدمت تمام دوستان و اساتید محترم

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

خواهشا کدشو اگه دارید بگید و طریقه استفاده از اونم توی وردپرس بگید !!

مرسی

سایت : http://armusic.org

ویرایش شده توسط ahmadrezash
لینک به ارسال

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

کد زیر رو به کلاس images200 در فایل استایل اضافه کنید.


filter: grayscale(0%);

یک کلاس هم در حالت Hiver ایجاد کنید و از مقدار 100 درصد براش استفاده کنید. یعنی اینجوری


.images200:Hover {
filter: grayscale(100%);
}

البته قشنگتر اینه که در حالت معمولی 50 درصد و در حالت Hover هم 0 درصد باشه.

لینک به ارسال

چطور نمیشه. شما استایلتون ویرایش شده و یه سری تغییرات روش دادید!! :blink:

ببینید در فایل app.css (در پوشه css قالب) و در خط 309 و بعد از خط زیر


.images200 img {

کد زیر رو درج کنید.


filter: grayscale(0%);

یعنی


.images200 img {
width: 100%;
height: 190px;
border-radius: 5px;
}

میشه


.images200 img {
filter: grayscale(0%);
width: 100%;
height: 190px;
border-radius: 5px;
}

اینو انجام بدین تا بقیش رو بگم.

لینک به ارسال

چطور نمیشه. شما استایلتون ویرایش شده و یه سری تغییرات روش دادید!! :blink:

ببینید در فایل app.css (در پوشه css قالب) و در خط 309 و بعد از خط زیر


.images200 img {

کد زیر رو درج کنید.


filter: grayscale(0%);

یعنی


.images200 img {
width: 100%;
height: 190px;
border-radius: 5px;
}

میشه


.images200 img {
filter: grayscale(0%);
width: 100%;
height: 190px;
border-radius: 5px;
}

اینو انجام بدین تا بقیش رو بگم.

سلام دوست خوبم

عزیز این کار انجام شد اگر امکان داره مرحله بعدی رو بگید مرسی

لینک به ارسال

حالا پس از خط 313 یه Enter بزنید و این کد رو درج کنید.


.images200 img:hover{
filter: grayscale(100%);
}

در واقع


.images200 img{
filter: grayscale(0%);
width:100%;
height:190px;
border-radius:5px;
}

میشه


.images200 img{
filter: grayscale(0%);
width:100%;
height:190px;
border-radius:5px;
}
.images200 img:hover{
filter: grayscale(100%);
}

بعد با CTRL+F5 صفحه رو رفرش کنید.

لینک به ارسال

حالا پس از خط 313 یه Enter بزنید و این کد رو درج کنید.


.images200 img:hover{
filter: grayscale(100%);
}

در واقع


.images200 img{
filter: grayscale(0%);
width:100%;
height:190px;
border-radius:5px;
}

میشه


.images200 img{
filter: grayscale(0%);
width:100%;
height:190px;
border-radius:5px;
}
.images200 img:hover{
filter: grayscale(100%);
}

بعد با CTRL+F5 صفحه رو رفرش کنید.

سلام دوست عزیز

این کار هم انجام شد !!

کار بعدی وجود داره یا خیر ؟

سلام دوست عزیز

این کار هم انجام شد !!

کار بعدی وجود داره یا خیر ؟

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

ولی من میخواستم فقط یه قسمت از سایت که به اسم Special Posts است اون طراح بیوفته روش.ممنون میشم اینم یه راهنمایی کنید.

بعد این کار امکان داره برعکس بشه ؟

یعنی اولش سیاه و سفید باشه بعد وقتی موس میره روش بشه رنگ اصلی !! الان اول رنگ اصلیه بعد میری روش میشه رنگ سیاه و سفید !!

لینک به ارسال

عرض کردم که بهتره برعکس باشه. 0 رو در کد اول به 100 و 100 رو در کد دوم به 0 تغییر بدین.

البته سیاه و سفید بودن تصاویر زیاد جالب نیست، بهتر یه حالت سوبیایی داشته باشه، برای این کار می تویند 0 رو در کد اول به 50 تغییر بدین یا مقادیر بین 0 و 100 رو مثلا 70 یا 30 برای رسیدن به حالت مطلوب امتحان کنید.

در مورد اینکه می خواید در قسمت Special Posts فقط این انتخاب بیفته یه مقدار کار سخت تر میشه. چون تصاویر این بخش هیچ استایل خاصی ندارن و صرفا از استایل اصلی تصاویر استفاده می کنن.

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

لینک به ارسال

عرض کردم که بهتره برعکس باشه. 0 رو در کد اول به 100 و 100 رو در کد دوم به 0 تغییر بدین.

البته سیاه و سفید بودن تصاویر زیاد جالب نیست، بهتر یه حالت سوبیایی داشته باشه، برای این کار می تویند 0 رو در کد اول به 50 تغییر بدین یا مقادیر بین 0 و 100 رو مثلا 70 یا 30 برای رسیدن به حالت مطلوب امتحان کنید.

در مورد اینکه می خواید در قسمت Special Posts فقط این انتخاب بیفته یه مقدار کار سخت تر میشه. چون تصاویر این بخش هیچ استایل خاصی ندارن و صرفا از استایل اصلی تصاویر استفاده می کنن.

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

خب این کار قابل توضیح هست یا خیر ؟

واقعیتش من زیاد تو کد ها و استایل های قالب و وردپرس وارد نیستم !

لینک به ارسال

از قالبتون بکاپ داشته باشید و بعد کد زیر رو در کل قالب سرچ کنید


<div class="well bg-dark b m-t">

بعد به کد زیر تغییرش بدین.


<div class="well images200 b m-t">

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

لینک به ارسال

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


filter: grayscale(100%);
-webkit-filter: grayscale(1) ;

این ژنراتور رو هم چک کنید

http://mandegarweb.com/wordpress/wordpress-tools/%DA%98%D9%86%D8%B1%D8%A7%D8%AA%D9%88%D8%B1-%D9%BE%D8%A7%D8%B1%D8%B3%DB%8C-%D9%88%D8%A8-%DA%A9%DB%8C%D8%AA/

لینک به ارسال

به گفتگو بپیوندید

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

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

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

×
×
  • اضافه کردن...