چگونگی تغییر رنگ آنلاین عناصر تصویر در سایت

[usef64]

با سلام
میخواستم بدونم چه جوری میشه در لحظه، رنگ شی ای رو توی سایت، با کلیک و انتخاب کاربر تغییر داد؟
(مثلا توی سایت http://e-farsh.com/ یه منو وجود داره به نام تست دکوراسیون، که در لحظه، رنگ شی انتخابی رو عوض میکنه.)

[vape60]

این گزینه برای تنظیمات خود قالب است


ویپ ('https://vape60shop.com/')
جویس ('https://vape60shop.com/')
کویل ویپ ('https://vape60shop.com/%d9%84%d9%88%d8%a7%d8%b2%d9%85-%d8%ac%d8%a7%d9%86%d8%a8%db%8c/%da%a9%d9%88%db%8c%d9%84-%d9%88%db%8c%d9%be/')

[usef64]

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

[ASHKANLAEI]

سلام دوست عزیز من سعی کردم کاری که این سایت کرده رو متوجه بشم. ولی متاسفانه نتونستم.
در هر صورت، اگه شما کمی از فتوشاپ کمک بگیرید؛ میتونید تصاویر png بسازید که با css رنگشون رو تغییر بدید.
در مورد عکس فرش هم میتونید از css skew کمک بگیرید.
اگه مایلید بگین که توضیحات بیشتری هم بدم.

[usef64]

بله، ممنون میشم اگه یه کم توضیح بدید.

[ASHKANLAEI]

میتونید برای رنگ کردن عکس مبل ها یا پرده ها، عکس اون ها رو به یک رنگ خاص در بیارین. این طوری با قابلیت css hue (https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate) میتونین اون ها رو رنگ کنین.
برای فرش هم میتونید از قابلیت های css skew (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew) و یا css matrix (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix) کمک بگیرین که خیلی منابع خوبی دارن.
و حالا فقط یک چیز میمونه و اون هم جای اشیاء هست که با تغییر position (https://developer.mozilla.org/en-US/docs/Web/CSS/position)به absolute (یا relative) کارتون تموم میشه.

[usef64]

ممنون. حتما موردی رو که گفتید مطالعه میکنم.