همه چیز درباره کلیپ و مسک کردن در وبسایت(قسمت اول)
همه چیز درباره کلیپ و مسک کردن در وبسایت(قسمت اول) : در این مقاله به بررسی کلیپ و مسک کردن (Clipping,Masking) میپردازیم که بحث بسیار جالب و چالش بر انگیزی در حوزه فرانت اند وب است .دو رکن بسیار جالب و مهم گرافیک کامپیوتر کلیپ و مسک کردن است , که اگر با اس وی جی (SVG) یا HTML Canvas کار کرده باشید این مفاهیم و کلمه ها برایتان عجیب و غریب نخواهد بود .
همه چیز درباره کلیپ و مسک کردن در وبسایت(قسمت اول)
مفهوم ابتدایی کلیپ و مسک کردن : به صورت خیلی ساده میتوان تعریف این دو واژه را محدود کردن یک شی یا گروهی از اشیایی به شکلی یا یک شی دیگری . برای مثال فرض کنید یک عکس مستطیلی داریم که یک دایره وسط آن میگذاریم و آن عکس را با کلیپ کردن به قالب دایره در میآوریم .
کلیپ کردن : بخش قابل رویت یک شی یا شکل را تعریف میکند .
مسک کردن : در مسک کردن شفافیت و روشنایی یک شی یا شکل کدر بودن یا نبودن شی دوم را مشخص میکند .
نکته : در هر دو این حالات شکل و شی اصلی ما هیچ تغییری نخواهد کرد و ما میتوانیم براحتی آن را با unclipped و unmasked کردن به شکل اولیه خود در بیآوریم .
به یک نمونه از کلیپ کردن در اچ تی ام ال و سی اس اس نگاه کنید :
نکته : clip برای اس وی جی است و سازگار تر است برای المنت های اس وی جی و منسوخ شده است . ولی clip-path منسوخ نشده است و برای کار با المنت های اچ تی ام ال نیز وجود دارد و همینطور با المنت های اس وی جی نیز به خوبی کار میکند .به یاد داشته باشید که برای کار کردن Clip-path در سافاری باید پریفیکس -webkit- را اضافه کنید
اکثریت استفاده از کلیپ کردن در عکس و تکست ها است که بسیار ترکیب خوبی را بوجود می آورد مثل تصویر زیر :
اشکال مختلف در Clip path
شکل هایی که clip-path قادر به ساختن هست : polygon, ellipse, circle or inset هستند که شما نیز قادر به تغییر آنها و سفارشی سازی کردنشان خواهید بود .
Polygon :
این نوع از شکل بسیار پیچیده و بسیار انعطاف پذیر است و شما قادر به ساختن شکل های بسیار زیادی با آن خواهید بود و بر اساس پیکسل یا درصد هست (pixel or percent based) .
به دلیل سخت بودن و پیچیده بودن این نوع از شکل در clip-path بهتر است برای کار کردن و کشیدن شکل های polygon از ابزار های مناسب استفاده کنید .
مثال برای شکل polygon :
<img src="http://s9.picofile.com/file/8325299518/clip1%D8%B0.png" class="polygon">
.polygon{ -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
Circle :
درست کردن دایره با این نوشتار circle(radius at posX posY) در قسمت radius باید شعاع دایره مورد نظر را وارد کنید و در قسمت posY|posX نیز موقعیت و پوزیشن را مشخص کنید .
پوزیشن اختیاری است و در حالت پیشفرض 50% 50% تنظیم شده است .
<img src="http://s9.picofile.com/file/8325299518/clip1%D8%B0.png" class="circle"">
.circle { -webkit-clip-path: circle(50%); clip-path: circle(50%); }
Ellipse :
فرق زیادی با سیرکل یا همان دایره که در بالا گفته شد ندارد منتها نوشتار آن کمی متفاوت تر از دایره است : ellipse(radiusX radiusY at posX posY)
<img src="http://s9.picofile.com/file/8325299518/clip1%D8%B0.png" class="ellipse">
.ellipse { -webkit-clip-path: ellipse(50% 35%); clip-path: ellipse(50% 35%); }
Inset :
این شکل نیز یک مستطیل درست میکند و هر چیزی بعد از آن مستطیل اضافه باشد حذف خواهد شد .
شما میتوانید با گذاشتن کلمه round در نوشتار این شکل که در زیر خواهید دید مستطیلتان را با گوشه هایی نرم و گرد شده داشته باشید .
<img src="http://s9.picofile.com/file/8325299518/clip1%D8%B0.png" class="inset2">
.inset2 { -webkit-clip-path: inset(45% 0% 33% 10% round 10px); clip-path: inset(45% 0% 33% 10% round 10px); }
سینتکس یا همان نوشتار inset به این صورت است : (top,right,bottom,left)
منتظر قسمت بعدی که به معرفی مسک کردن و مثال های جالب میپردازیم باشید .میتوانید کد های بالا را در این لینک ببینید و اجرا کنید : کلیک کنید
برچسب:clipping, masking, کلیپ کردن, ماسک کردن, ماسک کردن در وب