👋 دموهای این مقاله با یک باگ غیر استاندارد مربوط به گرادیان های CSS و رندر زیر پیکسلی آزمایش می کنند. رفتار آنها ممکن است در هر زمانی در آینده تغییر کند. آنها همچنین سنگین هستند. ما در جایی که برای بارگیری کلیک می‌کنید به صورت ناهمگام به آنها سرویس می‌دهیم، اما همچنان می‌خواهیم در صورتی که فن لپ‌تاپ شما شروع به چرخیدن کند، به شما هشدار دهیم.
آیا آن نویز ساکن در تلویزیون های قدیمی بدون سیگنال را به خاطر دارید؟ یا وقتی سیگنال بد است و تصویر مخدوش است؟ در صورتی که مفهوم سیگنال تلویزیونی قبل از شما باشد، در اینجا یک GIF وجود دارد که دقیقاً منظور من را نشان می دهد.
مشاهده تصویر (حاوی رسانه پخش خودکار)
بله، ما قصد داریم چنین کاری را فقط با استفاده از CSS انجام دهیم. در اینجا چیزی است که ما می سازیم:
قبل از شروع به بررسی کد، می خواهم بگویم که راه های بهتری برای ایجاد یک افکت نویز استاتیک نسبت به روشی که به شما نشان می دهم وجود دارد. ما می توانیم از SVG استفاده کنیم، از filter اموال و غیره در واقع جیمی چیون نوشته است مقاله خوب نشان دادن نحوه انجام آن با SVG.
کاری که من در اینجا انجام خواهم داد نوعی آزمایش CSS برای کشف برخی از ترفندهای اعمال نفوذ یک اشکال با گرادیان است. شما می توانید آن را در پروژه های جانبی خود برای سرگرمی استفاده کنید، اما استفاده از SVG برای یک پروژه واقعی تمیزتر و مناسب تر است. بعلاوه، این افکت در بین مرورگرها متفاوت عمل می کند، بنابراین اگر آنها را بررسی می کنید، بهتر است آنها را در کروم، اج یا فایرفاکس مشاهده کنید.
بیایید کمی سر و صدا کنیم!
برای ایجاد این اثر نویز، ما می خواهیم از ... گرادیان استفاده کنیم! نه، هیچ عنصر مخفی یا خاصیت جدیدی وجود ندارد که آن را به وقوع بپیوندد. ما قصد داریم از چیزهایی استفاده کنیم که قبلاً در جعبه ابزار CSS ما وجود دارد!
"ترفند" بر این واقعیت استوار است که گرادیان ها در ضد الایاسینگ بد هستند. آیا می دانید آن نوع لبه های ناهمواری که هنگام استفاده از رنگ های استاپ سخت به دست می آوریم؟ بله، در بیشتر موارد در مورد آنها صحبت می کنم مقالات من زیرا آنها کمی آزاردهنده هستند و ما همیشه باید چند پیکسل اضافه یا حذف کنیم تا همه چیز را صاف کنیم:
همانطور که می بینید، دایره دوم بهتر از دایره اول ارائه می شود زیرا یک تفاوت کوچک وجود دارد (0.5%) بین دو رنگ در گرادیان به جای استفاده از یک رنگ سخت مستقیم با استفاده از مقادیر عدد کامل مانند دایره اول متوقف شوید.
در اینجا یک نگاه دیگر است، این بار با استفاده از a conic-gradient جایی که نتیجه واضح تر است:
در حین ساخت این دموها یک ایده جالب به ذهنم خطور کرد. به جای اینکه دائماً اعوجاج را برطرف کنید، چرا سعی نکنید عکس آن را انجام دهید؟ نمی دانستم چه اتفاقی می افتد اما یک سورپرایز جالب بود! من مقادیر گرادیان مخروطی را گرفتم و شروع به کاهش آنها کردم تا نتایج ضعیف ضد آلیاسینگ حتی بدتر به نظر برسند.
می بینی آخری چقدر بد است؟ وسطش یه جورایی به هم ریخته و هیچی صاف نیست. بیایید آن را تمام صفحه با مقادیر کوچکتر کنیم:
فکر می کنم شما می بینید که این به کجا می رود. هنگامی که از مقادیر اعشاری بسیار کوچک برای توقف های رنگ های سخت در یک گرادیان استفاده می کنیم، تصویری تحریف شده عجیبی دریافت می کنیم. سر و صدای ما متولد شد!
ما هنوز با نویز دانه دانه ای که می خواهیم فاصله داریم زیرا هنوز می توانیم گرادیان مخروطی واقعی را ببینیم. اما می توانیم مقادیر را به مقادیر بسیار بسیار کوچک کاهش دهیم - مانند 0.0001% - و ناگهان شیب دیگری جز دانه بندی خالص وجود ندارد:
تادا! ما یک اثر نویز داریم و تنها چیزی که لازم است یک گرادیان CSS است. شرط می بندم اگر بخواهم قبل از توضیح این موضوع را به شما نشان دهم، هرگز متوجه نمی شوید که به یک گرادیان نگاه می کنید. برای دیدن آن باید با دقت به مرکز شیب نگاه کنید.
ما می‌توانیم با بزرگ کردن اندازه گرادیان و تنظیم موقعیت آن، تصادفی بودن را افزایش دهیم:
گرادیان به یک ثابت اعمال می شود 3000px مربع و قرار داده شده در 60% 60% مختصات ما به سختی می توانیم مرکز آن را در این مورد متوجه شویم. همین کار را می توان با گرادیان شعاعی نیز انجام داد:
و برای اینکه چیزها حتی تصادفی تر شوند (و به یک اثر نویز واقعی نزدیک تر) می توانیم هم شیب ها را با هم ترکیب کنیم و هم استفاده کنیم. background-blend-mode برای صاف کردن کارها:
اثر نویز ما عالی است! حتی اگر به دقت به هر مثال نگاه کنیم، هیچ اثری از شیب در آن وجود ندارد، اما نویز استاتیک دانه‌دار زیباست. ما فقط آن باگ anti-aliasing را به یک ویژگی نرم تبدیل کردیم!
اکنون که این مورد را داریم، بیایید چند نمونه جالب را ببینیم که در آن ممکن است از آن استفاده کنیم.
متحرک بدون سیگنال تلویزیون
بازگشت به نسخه نمایشی که با آن شروع کردیم:
اگر کد را بررسی کنید، می بینید که من از یک انیمیشن CSS روی یکی از گرادیان ها استفاده می کنم. واقعاً به همین سادگی است! تمام کاری که ما انجام می دهیم این است که موقعیت شیب مخروطی را با مدت زمان رعد و برق سریع حرکت دهیم (.1s) و این چیزی است که ما بدست می آوریم!
من از همین تکنیک در یک چالش هنری CSS یک دیو استفاده کردم:
فیلتر تصویر دانه دار
ایده دیگر این است که نویز را روی یک تصویر اعمال کنید تا ظاهری قدیمی داشته باشید. هر تصویر را نگه دارید تا آنها را بدون نویز ببینید.
من فقط از یک گرادیان روی یک شبه عنصر استفاده می کنم و آن را با تصویر ترکیب می کنم mix-blend-mode: overlay.
اگر از CSS استفاده کنیم، می‌توانیم جلوه‌های خنده‌دارتری دریافت کنیم filter ویژگی
و اگر الف را اضافه کنیم mask به ترکیب، ما می توانیم اثرات حتی بیشتر!
درمان متن دانه دانه
می‌توانیم همین افکت را روی متن نیز اعمال کنیم. باز هم، تنها چیزی که ما نیاز داریم چند شیب زنجیر شده روی یک است background-image و سپس پس زمینه ها را با هم ترکیب کنید. تنها تفاوت این است که ما نیز به دنبال آن هستیم background-clip بنابراین این افکت فقط به مرزهای هر کاراکتر اعمال می شود.
هنر مولد
اگر به بازی با مقادیر گرادیان ادامه دهید، ممکن است نتایج شگفت‌انگیزتری نسبت به یک افکت نویز ساده دریافت کنید. می‌توانیم شکل‌های تصادفی را بدست آوریم که بسیار شبیه هستند هنر مولد!
البته ما با هنر مولد واقعی که نیاز به کار زیاد دارد فاصله داریم. اما هنوز هم راضی کننده است که ببینیم با چیزی که از نظر فنی یک اشکال در نظر گرفته می شود چه چیزی می توان به دست آورد!
چهره هیولا
آخرین نمونه ای که برایش ساختم CodePen مجموعه divtober 2022:
پسگفتار
امیدوارم از این آزمایش کوچک CSS لذت برده باشید. ما دقیقاً چیزی «جدید» یاد نگرفتیم، اما با شیب کمی دمدمی شدیم و آن را به چیزی سرگرم‌کننده تبدیل کردیم. بازم میگم: این چیزی نیست که من در یک پروژه واقعی استفاده کنم چرا که چه کسی می‌داند که آیا یا چه زمانی آنتی آلیاسینگ در مقطعی از زمان مورد بررسی قرار خواهد گرفت. در عوض، وقتی به آن برخورد کردم، این یک شگفتی بسیار تصادفی و دلپذیر بود. همچنین کنترل آن چندان آسان نیست و در بین مرورگرها به طور متناقض رفتار می کند.
این گفت، من کنجکاو هستم که ببینم با آن چه کاری می توانید انجام دهید! می توانید با مقادیر بازی کنید، لایه های مختلف را ترکیب کنید، از a استفاده کنید filter، یا mix-blend-mode، یا هر چیز دیگری، و مطمئناً چیز بسیار جالبی دریافت خواهید کرد. خلاقیت های خود را در بخش نظرات به اشتراک بگذارید - هیچ جایزه ای وجود ندارد اما ما می توانیم یک مجموعه خوب ارائه دهیم!
