همه چیز درباره کلیپ و مسک کردن در وبسایت(قسمت دوم)
همه چیز درباره کلیپ و مسک کردن در وبسایت(قسمت دوم)
همه چیز درباره کلیپ و مسک کردن در وبسایت(قسمت دوم) : در این مقاله به بررسی کلیپ و مسک کردن (Clipping,Masking) میپردازیم که بحث بسیار جالب و چالش بر انگیزی در حوزه فرانت اند وب است .دو رکن بسیار جالب و مهم گرافیک کامپیوتر کلیپ و مسک کردن است , که اگر با اس وی جی (SVG) یا HTML Canvas کار کرده باشید این مفاهیم و کلمه ها برایتان عجیب و غریب نخواهد بود .
فرق بین مسک ها و کلیپ ها چیست؟
Masks are images; Clips are paths.
مسک ها عکس هستن و با عکس سرو کار دارند , کلیپ ها مسیر و شکل و جهت هستند . و اگر درس قبلی که در مورد همین موضوع بود را به خوبی خوانده باشید با دو واژه clip و clip-path آشنا هستید .
مسک کردن
مسک کردن برای فیلتر کردن یک بخش از یک المنت بصری است .که دو نوع متفاوت دارد : لومیننس و آلفا که در سی اس اس زیاد به تفاوت بین آنها توجهی نخواهیم داشت و اما شاید بهتر باشد مسک کردن را با یک مثال در عکس ببینید :
Mask کردن در سی اس اس را باید با پریفیکس -webkit- انجام بدهید . کد زیر را مشاهده کنید :
img { width: 150px; -webkit-mask-image: -webkit-gradient( linear, left top, right bottom, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.35, rgba(0,0,0,1)), color-stop(0.50, rgba(0,0,0,0)), color-stop(0.65, rgba(0,0,0,0)), color-stop(1.00, rgba(0,0,0,0))); }
میتوانید نتیجه را در این لینک ببینید .
ولی این روش منسوخ شده است و حتی حالت نوشتاری گرادینت آن نیز مدرن و استاندارد نیست . و اگر ما نوشتار گرادینتش را استاندارد و امروزی کنیم این نوع مسک کار نخواهد کرد .
و شاید این نوع مسک کردن هم منسوخ شده باشد , ولی نگران نباشید همیشه راهی برای درست کردن این حالات بصری جالب وجود دارد . (این نوع نوشتار که در بالا میبینید هنوز کار میکند و نتیجه را به ما میدهد منتها قابل اعتماد نیست چون نوشتار صحیح و استانداردی نیست).
شما میتوانید اینکار را با SVG انجام دهید . و با کمی دانش SVG میتوانید حالات بصری جالبی را ایجاد کنید , به کد زیر نگاه کنید :
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200"> <defs> <filter id="filter"> <feGaussianBlur stdDeviation="5"/> </filter> <mask id="mask"> <ellipse cx="50%" cy="50%" rx="25%" ry="25%" fill="white" filter="url(#filter)"></ellipse> </mask> </defs> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="170" height="200" mask="url(#mask)"></image> </svg> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" />
.mask { mask: url(mask.svg); }
میتوانید نتیجه کد ها را در این لینک مشاهده کنید .
برای آشنایی بیشتر با انواع مسک کردن و کلیپ کردن به این لینک سر بزنید .