دموها و مثال هایی از blending در css

مثال هایی از آمیختگی رنگ ها و تصاویر در CSS

در اینجا به نمایش چند مثال جالب در مورد آمیختگی در CSS می پردازیم. اگر با این مبحث آشنایی ندارید به این مطلب مراجعه کنید.

دموی های زیر توسط بنده طراحی نشدند اما اگر در مورد هر یک سوالی بود در خدمتم.

 

استفاده در نمودارها

در مثال زیر برای ساخت نمودارها از SVG استفاده شده و به کمک ویژگی mix-blend-mode به نمودارها ظاهری خاص داده شده است.

 

See the Pen Better SVG Diagrams & Graphs with Blend Modes by Dudley Storey (@dudleystorey) on CodePen.


 

 

تعیین رنگ یک شی خاص در یک تصویر

عاشق این دمو هستم خلاقیت موج میزنه در این دمو. کافی است روی ماشین رنگی کلیک کنید و رنگ مورد نظرتان را انتخاب کنید. خیلی کار انجام شده ساده است و بدون هیچ جاوااسکریپتی ساخته شده است. می توانید در تصاویر معرفی محصولات از این ایده استفاده کنید, مثلا تغییر رنگ لباس تن مانکن.

 

See the Pen Dynamic Image Colorizing with by Noah Blon (@noahblon) on CodePen.


 

 

استفاده از حالت difference

این حالت کاربردهای جالبی می تواند داشته باشد. در مثال زیر, متن مربوط به فقط یک عنصر است پس چطور دو رنگ شده است؟

 

See the Pen Automatic Text Color Contrast with Blend Modes by Dudley Storey (@dudleystorey) on CodePen.


 

همچنین اساس تغییر رنگ عدد در شمارنده زیر استفاده جالبی است که از این ویژگی شده است. با کلیک کردن شمارنده دوباره به کار می افتد:

 

See the Pen Minimal Countdown Timer by Nathaniel Watson (@nw) on CodePen.


 

 

همراه با متحرک سازی

 

See the Pen blend-mode and transition by Mojtaba Seyedi (@seyedi) on CodePen.


 

هر دو دمو از متحرک سازی background-position استفاده می کنند. که باید توجه داشته باشید این ویژگی از آن دسته ویژگی هایی است که متحرک سازی آن هزینه بالایی دارد و باعث پایین آوردن کارایی (performance) می شود. پس مراقب باشید تا کارایی بهتر فدای جلوه های این چنینی نشود. از روش های بهتری می توان برای ساخت چنین متحرک سازی هایی بهره برد که به کارایی سایت هم لطمه ای وارد نشود که در مورد آنها در مطالب آینده بحث خواهیم کرد.

 

See the Pen Animated Image Changes with background-blend-mode by Dudley Storey (@dudleystorey) on CodePen.


 

6 دیدگاه برای “مثال هایی از آمیختگی رنگ ها و تصاویر در CSS

  1. سلام
    من توی اون مدل ماشین هرچی گشتم پیدا نکردم کجای جاوا اسکریپتش داره بلک گراند انتخابی رو بهش میده!
    باید روی backgruond-color تغییر بده دیگه !؟

    1. سلام. اون اصلا جاوااسکریپت نیاز نداره. خود عنصر input هستش که به عنوان یک پوشش قرار گرفته و نقش یک لایه که بتونه رنگ بگیره رو بازی می کنه. CSSش رو با دقت بررسی کنید و تغییرش بدید متوجه می شید.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *