ahmadrezash

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

12 پست در این موضوع قرار دارد

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

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

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

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

مرسی

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

ویرایش شده در توسط ahmadrezash
0

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


لینک به پست

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

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


filter: grayscale(0%);

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


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

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

2

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


لینک به پست

نمیشه !!

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

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;
}

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

1

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


لینک به پست

چطور نمیشه. شما استایلتون ویرایش شده و یه سری تغییرات روش دادید!! :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;
}

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

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

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

0

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


لینک به پست

حالا پس از خط 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 صفحه رو رفرش کنید.

2

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


لینک به پست

حالا پس از خط 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

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


لینک به پست

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

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

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

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

1

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


لینک به پست

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

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

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

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

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

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

0

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


لینک به پست

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


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

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


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

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

0

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


لینک به پست

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

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

بله. توضیح دادم که.

1

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


لینک به پست

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


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/

2

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


لینک به پست

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

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

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

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


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

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

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


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