خبرکاو:

در این مقاله قصد داریم با استفاده از افکت‌های دانه‌دار، پس‌زمینه‌های جالب‌تری برای وبسایت ایجاد کنیم.

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

ما این موضوع را به دو صورت پوشش خواهیم داد:

استفاده از یک تصویر PNG با شفافیت مانند سایت زیر.

با استفاده از تصویر و کد SVG خودمان

نحوه ایجاد یک پس‌زمینه دانه‌دار با استفاده از تصویر دانه‌دار PNG

اول، رویکرد PNG.

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

تحلیل این به من نشان داد که آنها از دو چیز استفاده کردند: یک background: var(--colors-primary3) و یک background-image: url(noise.png); :

فایل .noise.png به سادگی یک تصویر دانه‌دار با شفافیت بود، پس رنگ ثابت از پس‌زمینه CSS می‌توانست از طریق:

نحوه ایجاد نویز PNG

بیایید فایل noise.png را دانلود کنیم. سپس یک سند HTML ایجاد کنید. ما یک بخش برای نمایش آن اضافه می کنیم:

 <section class="container noise"> <h1>Noise with PNG</h1> </section>

در CSS خود، چند استایل اولیه برای ظرف اضافه می کنیم:

 .container{ margin: 0 auto; display: flex; width: 100%; min-height: 33vh; justify-content: center; align-items: center; }

سپس، برای کلاس .noise ما:

 .noise{ background: rgb(182, 34, 58); background-image: url(/assets/noise.png); }

و voilà! ما همین اثر را داریم:

بسیار هوشمندانه است، اما من بیشتر حفاری کردم و متوجه شدم که چگونه می توان خود بافت پر سر و صدا را ایجاد کرد و همچنین آن را به صورت درون خطی در کدمان ایجاد کرد.

SVG چیست؟ با نمای کلی ویدیو

ابتدا، یک خلاصه ویدئویی 15 ثانیه ای از بخش درون خطی (تعریف کامل 10 دقیقه ای در انتهای مقاله آمده است):

SVG ها گرافیک های برداری مقیاس پذیر هستند.

آنها مفید هستند زیرا می توانند بدون از دست دادن کیفیت، افزایش یا کاهش پیدا کنند. و آنها همه کاره هستند زیرا می توانید آنها را با کد علامت گذاری کنید، درست همانطور که می توانید از CSS برای ایجاد تغییرات سبک در HTML خود استفاده کنید.

در واقع، حتی می‌توانید یک SVG را مستقیماً در HTML یا CSS خود کدنویسی کنید.

در زیر سه چیز را به شما نشان خواهم داد:

نحوه ایجاد یک فایل SVG برای ارجاع به روشی مشابه PNG بالا.

نحوه استفاده از یک فایل SVG برای ایجاد پس زمینه دانه دار

چگونه SVG دانه دانه را مستقیماً در CSS کدنویسی کنیم تا دانه دانه بودن را در عناصر موجود در HTML خود اعمال کنیم.

نحوه ایجاد SVG

زمین بازی Grainy Gradient در طول این تحقیق بسیار مفید بوده است. این امکان ایجاد سریع این SVG ها را فراهم می کند.

بیایید به کد SVG مورد استفاده آنها نگاه کنیم:

 <!-- svg: first layer --> <svg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'> <filter id='noiseFilter'> <feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/> </filter> <rect width='100%' height='100%' filter='url(#noiseFilter)'/> </svg>

خط اول SVG را با یک ViewBox اولیه تنظیم می کند.

 <svg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'>

سپس، فیلتر راه اندازی می شود و به آن شناسه داده می شود. ما از فیلتر feTurbulence برای ایجاد افکت دانه دار استفاده می کنیم. MDN، مانند همیشه، اطلاعات بیشتری در مورد جزئیات feTurbulence دارد.

 <feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/> </filter>

سپس شکل (مستطیل)، اندازه (100%) را تعریف می کنیم و فیلتر feTurbulence را روی آن اعمال می کنیم:

 <rect width='100%' height='100%' filter='url(#noiseFilter)'/>

اگر اکنون این را در HTML خود بیاندازیم، به صورت نویز ساده نمایش داده می شود:

نحوه استفاده از SVG به عنوان تصویر پس زمینه

از آنجایی که SVGها اساسا فقط کد هستند، می‌توانیم یک فایل noise.svg در پروژه خود ایجاد کنیم و در محتویات مثال SVG کپی کنیم.

ما یک div دیگری برای این روش در HTML خود ایجاد خواهیم کرد:

 <section class="container noise2"> <h1>Noise using SVG File</h1> </section>

من به خاطر ظاهر، baseFrequency='1' در فایل SVG تغییر دادم و سپس موارد زیر را به CSS خود اضافه کردم:

 .noise2{ background: rgb(219, 255, 219); background-image: url(/assets/noise.svg); }

این نتیجه مشابهی را برای بخش پس زمینه سبز به ما می دهد:

فیلتر SVG CSS درون خطی

در نهایت، ما این امکان را داریم که با قرار دادن SVG درون خط، از فایل نویز جداگانه به طور کلی صرف نظر کنیم.

در Gradient Playground، گزینه ای را برای این کار در کادر سوم CSS+Gradient+CSSFilter خواهید دید و یک سوئیچ برای تولید مستقیم CSS درون خطی وجود دارد:

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

ما یک div سوم برای این مثال ایجاد می کنیم:

 <section class="container noise3"> <h1>Noise with SVG Inline</h1> </section>

سپس، می‌توانیم با استفاده از رمزگذار URL مانند این، SVG را به فرمت قابل استفاده در CSS خود تبدیل کنیم. (همچنین می توانید از کادر Grainy Gradient Playground که همان کد در آنجا تولید می شود کپی کنید).

و دقیقاً مانند آن، ما در داخل پرانتز URL کدی را داریم که می توانیم برای background-image خود استفاده کنیم. پس CSS برای div ما به این شکل است (من پایه فرکانس را بیشتر تغییر دادم تا ظاهری دقیق‌تر داشته باشم:

 .noise3{ background:rgb(68,0,255); background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }

پارامترها به راحتی در تمام این SVG ها و فیلترها قابل ویرایش هستند تا جلوه های دانه ای متفاوتی تولید کنند. امیدوارم این یک آموزش مفید برای شما بوده باشد تا به راحتی پس زمینه خود را ادویه کنید!

مرور ویدیویی

در اینجا کلیات ویدیویی از همه موارد بالا آمده است:

آیا به اشتراک کانال یوتیوب من فکر می کنید؟ من در حال ساختن مطالب بیشتر از این قبیل، و داشتن یک انفجار!

شما می توانید من را در لینکدین نیز پیدا کنید 👋.

تو عالی هستی یک عالی داشته باشید!