CSS Blurry Shimmer Effect – مجله Smashing

تصور کن box-shadow اما برای جلوه تاری، جایی که پس‌زمینه یک عنصر در اطراف آن عنصر محو می‌شود و به تدریج قدرت تاری کاهش می‌یابد. زمانی که سعی می‌کردم کنتراست یک پنجره بازشو را در یک منطقه تاریک بهبود بخشم، به این ایده رسیدم box-shadow زیرا پنجره بازشو از نظر طراحی چندان منطقی نخواهد بود. سپس فکر کردم، خوب، چه راه های دیگری می تواند یک اثر کنتراست خوب ایجاد کند؟ و بنابراین ناگهان، ایده یک اثر تاری تدریجی در اطراف جسم به ذهنم رسید.

بسیار عالی خواهد بود اگر ما یک box-blur دارایی یا شاید نوعی blur کلمه کلیدی که می توانستیم روی آن تنظیم کنیم box-shadow راهی که برای آن انجام می دهیم inset سایه ها. متاسفانه CSS چنین خاصیتی ندارد. اما از آنجایی که CSS عالی و انعطاف‌پذیر است، ما همچنان می‌توانیم با ترکیب چند ویژگی CSS و هک کردن آن، اثر را به دست آوریم.

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

با نشانه گذاری شروع کنید

این اثر به گونه ای است که به آن اعمال می شود ::before شبه عنصر برخی از عناصر، مثلاً برخی از پنجره های بازشو/دیالوگ/popover/tooltip. اینها “هدف”های رایج برای این نوع اثر هستند. من فکر می‌کنم استفاده از شبه عنصر در اینجا رویکرد خوبی است زیرا به این معنی است که می‌توانیم از نظر فنی سبک‌ها را به شبه عنصر اختصاص دهیم و اثر را روی عناصر دیگر بدون هیچ تغییری در HTML قرار دهیم.

<!-- This is literally it for this demo -->
<div></div>

می توانید به عنصر یک کلاس بدهید، هر ابعادی که دوست دارید، محتوا و سایر عناصر فرزند را در آن وارد کنید یا از یک عنصر کاملاً متفاوت استفاده کنید. HTML عنصر اصلی برای سس مخفی ما نیست.

موقعیت عنصر شبه

ما می خواهیم ::before شبه عنصر برای اشغال کل منطقه <div> عنصری که برای این نسخه ی نمایشی خاص استفاده می کنیم. ما نه تنها می خواهیم که کل منطقه را پوشش دهد، بلکه حتی سرریز به این دلیل که ناحیه قابل مشاهده را ایجاد می کند، که دارای اثر تاری است، بنابراین به سمت بیرون گسترش می یابد.

::before {  
  content: '';

  /* Make sure the parent element is at least relatively positioned to contain the pseudo-element. */
  position: absolute;
  
  /* The blur size should be anything below `0` so it will extend to the outside. */
  inset: -100px;

  /* This layer is positioned between the parent element and page background. */
  /* Make sure this value is one below the `z-index` of the parent element. */
  z-index: -1;
}

نظرات کد قسمت های کلیدی را مشخص می کند. یک رشته خالی باید برای content دارایی بنابراین ::before رندر می شود، سپس با دادن موقعیت مطلق آن را از جریان سند خارج می کنیم. این به ما اجازه می دهد inset موقعیت عنصر است و در نهایت جهت افکت تاری را همانطور که روی آن قرار می دهیم تنظیم می کند box-shadow دارایی – فقط ما از آن استفاده می کنیم inset برای کنترل اندازه آن ما می خواهیم یک منفی inset مقدار، که در آن اثر بیشتر گسترش می یابد هر چه مقدار کمتر می شود.

تا به حال، ما پایه و اساس اثر را تنظیم کرده ایم. واقعاً هنوز چیزی برای دیدن وجود ندارد. اکنون، سرگرمی شروع می شود!

پوشش با گرادیان های شفاف

گرادیان ها از نظر فنی هستند تصاویر – تولید شده توسط مرورگر – که می تواند به عنوان ماسک CSS برای مخفی کردن بخش هایی از یک عنصر برای ایجاد اشکال مختلف استفاده شود. ممکن است چندین مقاله مرتبط با مجله Smashing را دیده باشید که در آنها ماسک CSS به نمایش گذاشته شده است، مانند این مقاله توسط Temani Afif.

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

این در این مورد عالی است زیرا می‌خواهیم اثر قوی‌تر، نزدیک‌تر به جسم باشد و با دورتر شدن از شدت آن محو شود.

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

همانطور که گفتم، شفافیت کلیدی است. هر دو شیب شروع می شوند transparent، سپس انتقال به black تا درست قبل از پایان، جایی که آنها به آنجا برمی گردند transparent برای محو کردن چیزها به یاد داشته باشید، این شیب ها هستند ماسک ها به جای تصاویر پس‌زمینه، بنابراین آنها بر روی اعلام می‌شوند mask ویژگی، که کنترل می کند کدام پیکسل ها باید رندر شوند و کدورت آنها.

mask:
  linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
  linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);

• گرادیان عمودی (to top) یک محو شدن از شفاف در پایین به سیاه در وسط ایجاد می کند، سپس دوباره به شفاف در بالا باز می گردد.
• شیب افقی (to left) یک محو شدن از شفاف در سمت راست به مشکی در وسط ایجاد می کند و سپس به شفاف در سمت چپ برمی گردد.

این رویکرد شیب دوگانه، نواحی سیاه را در موقعیت مکانی قرار می دهد، بنابراین آنها با هم ادغام می شوند و خط پایه ناهموار یک شکل مستطیلی را ایجاد می کنند که در مرحله بعدی اصلاح می شود. را mask ویژگی بهتر است ابتدا به عنوان پیشوند و سپس بدون پیشوند اعلام شود تا پشتیبانی بیشتر مرورگرها را پوشش دهد:

-webkit-mask:
  linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
  linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);
mask:
  linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
  linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);

پالایش با استفاده از mask-composite ویژگی

را mask-composite ویژگی بخشی از ماژول پوشاندن CSS است و کنترل پیکسلی بر ترکیب محتوای ماسک‌شده را امکان‌پذیر می‌کند و امکان ترکیب‌بندی پیچیده را فراهم می‌کند.

را source-in مقدار این ویژگی برای افکتی که به دنبال آن هستیم بسیار مفید است زیرا به مرورگر می‌گوید که فقط قسمت‌های همپوشانی ماسک را حفظ کند، بنابراین تنها پیکسل‌هایی که حاوی هر دو گرادیان (ذکر شده در بالا) هستند رندر می‌شوند. این به شکل مستطیل قفل می‌شود، که می‌توان آن را روی هر عنصر DOM که دارای گوشه‌های خمیده‌ای بدون تا متوسط ​​است، اعمال کرد.border-radius).

به تدریج تار کردن پس زمینه

اکنون که ماسکی برای کار داریم، تنها کاری که باید انجام دهیم استفاده از آن است. را backdrop-filter ویژگی CSS می‌تواند هر چیزی را که «پشت» یک عنصر با استفاده از رندر می‌شود، محو کند blur() تابع:

::before {
  /* etc. */

  backdrop-filter: blur(10px);
}

هر چه مقدار بزرگتر باشد، تاری شدیدتر است. من استفاده میکنم 10px خودسرانه در واقع، می‌توانیم این موارد را بعداً تغییر دهیم تا پیاده‌سازی را انعطاف‌پذیرتر و به راحتی پیکربندی کنیم.

اما صبر کن! همانطور که مشخص است، Safari به یک نسخه پیشوند فروشنده نیاز دارد backdrop-filter برای اینکه اونجا کار کنه:

::before {
  /* etc. */

  -webkit-backdrop-filter: blur(10px); /* Required for Safari */
  backdrop-filter: blur(10px);
}

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

لمس سایه هم افزایی

من فکر می کنم اضافه کردن کمی سیاه و سفید نیمه مات box-shadow که ناحیه تاری را می پوشاند، عمق کمی به جلوه می دهد. تنها چیزی که وجود دارد این است که شما می خواهید آن را به خود عنصر اضافه کنید تا به آن ::before شبه:

div {
  box-shadow: 0 0 40px #00000099;
}

اگرچه این کاملا اختیاری است.

آوردن همه چیز با هم

وقتی همه چیز را با هم ترکیب می کنیم، CSS چگونه ظاهر می شود.

/* This can be set on the ::before pseudo of the element it is applied to. */
::before {    
  content: '';

  /* This layer is positioned between some element and its background. */
  position: absolute;
  
  /* This should not affect the contents of the container. */
  z-index: -1;
  
  /* The blur size should be anything below `0` so it will extend to the outside. */
  inset: -100px;
  
  /* The blur effect */
  -webkit-backdrop-filter: blur(10px); /* Required for safari */
  backdrop-filter: blur(10px);
  
  /* A mask fades the blur effect, so it gets weaker. */
  /* towards the edges, further from the container box. */
  /* (The fill color is irrelevant, so "red" is used as it's the shortest color name.) */
  mask: 
    linear-gradient(
      to top, 
      transparent 0%,
      red 100px calc(100% - 100px),
      transparent 100%), 
    linear-gradient(
      to left,
      transparent 0%,
      red 100px calc(100% - 100px),
      transparent 100%);
  
  /* This merges the masks above so only the overlapping pixels are rendered. */
  /* This creates the illusion of a fade-out mask. */
  mask-composite: intersect;
  -webkit-mask-composite: source-in; /* Required for Safari */
}

نسخه ی نمایشی نهایی، یک بار دیگر

قلم را ببینید [Faded Outer Box Backdrop Blur [forked]](https://codepen.io/smashingmag/pen/ZEPJKRO) توسط یایر حتی یا.

من همچنین یک را آماده کرده ام نسخه ساده شده با حداقل کد و بدون متغیرهای CSS که خواندن و استفاده مجدد آسان تر است.

(gg, yk)