آموزش :not در CSS؛ ایجاد افکت های جذاب در وب

زبان CSS به صورت مرتب در حال بروزرسانی است. یکی از قابلیت های کمتر شناخته شده آن، انتخابگر :not است. در این مطلب با :not در CSS آشنا می شویم.

به صورت کلی با استفاده از انتخابگر ها، امکان انتخاب بخش های مختلف در صفحه را داریم. با انتخاب این بخش ها نیز، با کمک CSS امکان استایل دهی و ایجاد افکت های جذاب را داریم. یکی از ویژگی های کاربردی برای ایجاد افکت، hover است. با استفاده از hover امکان ایجاد افکت با حرکت موس بر روی عناصر ایجاد می شود. حال قصد ایجاد یک افکت جذاب تر با استفاده از انتخابگر :not در CSS را داریم. به زبان ساده این انتخاب گر برعکس عمل می کند. برای مثال کد زیر رنگ زمینه تمام عناصری که پاراگراف نیستند را قرمز می کند:

:not(p) {
  background: #ff0000;
}

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

ایجاد افکت با :not در CSS

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

ایجاد افکت گالری CSS

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

<div id="container">
    <img src="images/01.jpg" class="child">
    <img src="images/02.jpg" class="child">
    <img src="images/03.jpg" class="child">
    <img src="images/04.jpg" class="child">
    <img src="images/05.jpg" class="child">
</div>

در کد بالا عنصر های خود را با نام child، داخل یک مخزن با نام container قرار داده ایم. حال با استفاده از چند خط کد ساده CSS، آنرا زیبا و مرتب می کنیم. برای مثال با کد زیر تصاویر را دایره و کمی از هم فاصله می دهیم:

#container {
  display: flex;
  gap: 2em;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 3em;
  border-radius: 1em;
}
.child {
  width: 10em;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
}

در اینجا نوبت به مرحله اصلی، یعنی ایجاد افکت با :not در CSS است. برای این کار از کد زیر استفاده می کنیم:

#container:hover .child:not(:hover) {
  opacity: 0.5;
  transform: scale(0.9);
}

این کد به سادگی افکت مورد نظر ما را ایجاد می کند. در واقع گفته ایم که در صورت رفتن نشانگر موس بر روی container مقدار شفافیت تمام فرزند ها کم شود. در قسمت بعدی، با استفاده از :not و انتخابگر hover، عنصر مورد نظر را نهی و یا همان not کرده ایم. به همین سادگی افکت مورد نظر ما پیاده سازی شده است.

حل یک مشکل کوچک!

با دقت در این نمونه یک مشکل به چشم می خورد. در صورت حرکت موس بین تصاویر، تمام تصاویر کمرنگ می شوند. این موضوع به دلیل hover نشدن هیچ کدام از عناصر، طبیعی است. برای حل این مشکل باید از ویژگی pointer-events در CSS استفاده کنیم. این ویژگی شرایط فعالیت رویداد برای عنصر ما را کنترل می کند. به زبان ساده با استفاده از pointer-events میتوانیم قابلیت فعالیت نشانگر موس را فعال و یا غیر فعال کنیم. با استفاده از کد زیر، نشانگر را برای containar غیر فعال و مجدد برای فرزند ها فعال می کنیم:

#container {
  pointer-events: none;
}
.child {
  pointer-events: auto;
}

به همین سادگی یک افکت زیبا و جذاب با استفاده از :not در CSS ایجاد کردیم. به صورت کلی قابلیت های بسیار جذاب و خاصی برای انتخابگر :not وجود دارد. اما به دلیل آشنایی کم طراحان وب سایت، کمتر از آن استفاده می شود.