راهنمای ماسک های CSS: راه حل هایی برای چالش های رایج طراحی

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

\

  • ابتدا، ما می‌خواهیم جلوه‌های محو شدن را به بالا و پایین یک ظرف پیمایش اضافه کنیم.

  • سپس، یک شکل نامنظم را به لبه های یک بنر اضافه می کنیم.

  • و پس از آن، از یک تصویر ماسک برای کشیدن یک استایل شش ضلعی برای یک تصویر مربعی استفاده می کنیم.

    \

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

\

CSS mask-image توضیح داد

بنابراین، قبل از اینکه خیلی از خودمان جلوتر برویم، باید بفهمیم که چه کاری انجام می‌دهیم و واقعاً چگونه کار می‌کند. ما از CSS استفاده خواهیم کرد mask-image ویژگی. قوانین و نحو برای mask-image احتمالا کمی آشنا به نظر می رسد. آنها بسیار شبیه CSS هستند background-image خواص

\ ماسک ها در CSS با استفاده از ترکیبی از مناطق مات و شفاف کار می کنند. مناطقی که کاملا شفاف هستند، چیزهای پشت خود را پنهان می کنند. مناطقی که کاملاً مات هستند این امکان را به شما می دهد که …