در اینجا به نمایش چند مثال جالب در مورد آمیختگی در 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.
سلام
من توی اون مدل ماشین هرچی گشتم پیدا نکردم کجای جاوا اسکریپتش داره بلک گراند انتخابی رو بهش میده!
باید روی backgruond-color تغییر بده دیگه !؟
سلام. اون اصلا جاوااسکریپت نیاز نداره. خود عنصر input هستش که به عنوان یک پوشش قرار گرفته و نقش یک لایه که بتونه رنگ بگیره رو بازی می کنه. CSSش رو با دقت بررسی کنید و تغییرش بدید متوجه می شید.
اوکی شد. حواسم نبود بهش!
مثال count down به نظرم خیلی کاربردیه
فوق العاده بود. مرسی
آقا این scss چیه ؟ فرقش با sass و less چیه؟
اره منم یه چنین سوالی برام پیش اومده بود؟
scss هم مال sass هست فرقی که باهاش داره اینه که اینجا کد رو مثل css مینویسیم بااضافه قابلیت نیستینگ یا همون تورفتگی. فکر کنم پرکاربردترین شون هست چون خیلی شباهت با css داره و به راحتی میتونیم یه کد css رو به scss تبدیل کنیم. درباره فرقش با sass میتونی تو این لینک بیشتر بدونی https://sass-lang.com/guide
سلام یه سوال داشتم که واقعا توش گیر کردم. توی همین سایت خودتون داخل فوتر آیکون تلگرام و توییتر و …. رو دارید که اگه hover بشن رنگشون تغییر میکنه میخواستم ببینم برای css باید چجوری اینکارو بکنم.
سلام توی ایان سایت با svg ها درست شدن اگر اشتباه نکنم ولی با وب فونت fontawesome به راحتی امکان بذیر هست
این هم سایتش:
https://fontawesome.com/