نحوه تغییر پویا رنگ در حین پیمایش با CSS

با این ویژگی CSS مفید، اما کمتر شناخته شده، یک مشکل رایج در تضاد رنگ را حل کنید.

با عناصر ثابت وب سایت مانند لوگوها، اغلب هنگام پیمایش صفحه با رنگ آمیزی مواجه می شوید. این می تواند اتفاق بیفتد اگر عنصر استاتیک روی بخشی از وب سایت که رنگ مشابهی با عنصر به اشتراک می گذارد برود. عنصر استاتیک زمانی که روی آن پس‌زمینه قرار دارد نامرئی خواهد بود.

برای رفع این مشکل، باید رنگ لوگو را هنگامی که روی عنصری با همان رنگ می رود، به صورت پویا معکوس کنید. یاد بگیرید که چگونه می توانید این اثر را فقط با استفاده از CSS و بدون نیاز به جاوا اسکریپت به دست آورید!

کد شروع را دانلود کنید

برای دنبال کردن این آموزش، کد شروع را از آن دانلود کنید
مخزن GitHub
به ماشین محلی شما

index.html را در یک مرورگر باز کنید که باید شبیه صفحه نشان داده شده در اینجا باشد:

صفحه HTML شامل یک لوگو و چهار بخش است. هر بخش دارای یک عنوان ساختگی و سه پاراگراف متن ساختگی است. متن لوگو همان رنگ مشکی پس زمینه قسمت دوم و چهارم است. این افکت از بلوک nth-child(even) در styles.css می آید که پس زمینه سیاه را روی بخش های زوج اعمال می کند.

چسبناک کردن لوگو

با این کد شروع، لوگو به بالا نمی چسبد. این به این معنی است که وقتی صفحه را به پایین اسکرول می کنید، لوگو ناپدید می شود. می توانید با اعمال موقعیت: خاصیت چسبنده در داخل فایل CSS، لوگوی خود را به یک هدر چسبنده تبدیل کنید. برای آشنایی عمیق با موقعیت یابی در CSS، پست ما را در مورد ویژگی موقعیت CSS بخوانید.

مطمئن شوید که آرم به بالا می‌چسبد، اما این کار را فقط در صفحه‌های بزرگ‌تر انجام دهید (زیرا در اندازه‌های کوچک‌تر صفحه‌نمایش، می‌تواند از عناصر دیگر عبور کند). پرس و جوی رسانه پاسخگو HTML زیر این افکت را ایجاد می کند:

@media(width > 980px) {
  .logo { 
    position: sticky; 
    top: .5rem; 
  }
}

اکنون لوگو همیشه به بالا می‌چسبد و در حین پیمایش شما را دنبال می‌کند. اما همچنین متوجه خواهید شد که وقتی به بخش‌های پس‌زمینه تیره بروید، متن ناپدید می‌شود (زیرا متن لوگو نیز سیاه است). اکنون به نحوه رفع این مشکل توجه کنید.

افزودن حالت ترکیبی به هدر چسبنده شما

برای اطمینان از اینکه لوگوی مشکی روی پس‌زمینه سیاه محو نمی‌شود، باید رنگ را به صورت پویا معکوس کنید. روشی که شما این کار را انجام می دهید با استفاده از ویژگی CSS mix-blend-mode و اختصاص مقدار تفاوت به آن است:

@media(width > 980px) { 
  .logo { 
    position: sticky; 
    top: .5rem; 
    mix-blend-mode: difference
  }
}

ویژگی CSS mix-blend-mode مشخص می کند که چگونه محتوای یک عنصر باید با محتوای والد عنصر و پس زمینه آن ترکیب شود. مقدار متفاوت، مقدار تفاوت هر پیکسل را می گیرد و رنگ های روشن را معکوس می کند. بنابراین اگر مقادیر رنگ یکسان باشد، سیاه می شوند. تفاوت در مقادیر معکوس خواهد شد.

افزودن CSS بالا باعث می شود که لوگو به طور کامل ناپدید شود. این به این دلیل است که شما رنگ متن لوگو را در خارج از درخواست رسانه روی سفید قرار نداده اید. این کار را با کد زیر انجام دهید:

.logo { 
  color: white; 
  /* Other CSS properties */
}

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

علاوه بر سیاه و سفید می توانید با رنگ های دیگری نیز کار کنید. برای مثال، اگر بخواهید رنگ متن لوگوی خود را به رنگ آبی (008080#) تغییر دهید، رنگ صورتی را در پس‌زمینه‌های سفید دریافت خواهید کرد. تصویر زیر گویای این موضوع است.

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

<img src="loremipsum-297.svg" alt="Lorem Ipsum Logo">

.logo {
  color: white;
  width: 10rem;
  /* Other CSS properties */
}

.logo {
  color: white;
  width: 10rem;
  mix-blend-mode: difference;
  /* Other CSS properties */
}