آیا می دانید تا کنون 8179 نفر در 16 دوره آموزشی سون لرن ثبت نام کرده اند !

Clippy : ساخت ویژگی CSS Clip-path با ابزار آنلاین

0 262 ۲۹ دی ۹۵

clippy

در این مطلب میخایم شما رو با یک ابزار آنلاین آشنا کنیم و نحوه کار با اون رو به شما آموزش بدیم. همونطور که میدونیم یک ویژگی بنام clip-path درون CSS وجود داره که با استفاده از اون میتونیم المنتهای مورد نظرمون رو با استفاده از اشکال مختلف مانند دایره و مثلث و اشکال پیچیده تر مثل چندضلعی ها برش بدیم و حالت زیبایی رو به وجود بیاریم. نحوه کلی کار به این صورت هست که شما یک مسیر یا path رو تعریف میکنید و اون رو بعنوان مقدار ویژگی clip-path قرار میدید. حالا این ویژگی رو برای هر المنتی که قرار بدین، اون المنت مطابق با این مسیر یا شکل تعریف شده برش داده میشه و فقط اون قسمتهایی از المنت که درون این شکل قرار میگیرن نمایش داده میشه و بقیه قسمتها مخفی و حذف میشن و نمیشه اونا رو دید.

خب برای شروع وارد سایت مورد نظر میشیم:clippy 1

همونطور که میبینید این سایت از تعدادی بخش و زیرمجموعه تشکیل شدن که هر کدوم وظیفه ای رو بر عهده دارن. در قسمت بالا و سمت چپ که خروجی کار نمایش داده میشه و شما میتونین با گرفتن و درگ گردن نقطه های نشان داده شده، اونا رو به نقطه مورد نظر خودتون ببرید تا شکل مورد نظر و نهایی تغییر یابد. متناسب با هر تغییری که شما درون تنظیمات وارد میکنید، در همون لحظه کدهای موجود در قسمت پایین و سمت چپ به روز رسانی میشه و شما میتونین اونا رو بردارید و درون سایت خودتون استفاده کنید. در قسمت بالا و سمت راست سایت، اشکال مختلفی که میتونین از اونا استفاده کنید قرار داده شده اند که زمانی که بر روی اون قسمت هاور میکنید، همه اونا نمایش داده میشه:clippy 2

میبینید که اشکال مختلفی نظیر دایره، مربع، مثلث، ستاره، چندضلعی و ... قرار داده شده و با کلیک بر روی هر کذوم از اونا فورا خروجی به همان صورت تبدیل میشه و نقاط مربوط به اونا هم نمایش داده میشه و شما میتونین اونا رو درگ کنید و شکل رو متناسب با سلیقه خودتون تغییر بدید. اگر دنبال شکلی می گردید که در اشکال بالا وجود ندارد، میتونین بر روی مورد Custom Polygon که در تصویر بالا مشخص شده است، کلیک کنید تا بتونین خودتون نقاط مورد نظر رو از ابتدا مشخص کرده و شکل مورد نظر خودتون رو بسازید. علاوه بر درگ کردن نقاط، شما میتونین نقطه ای که به نظرتون اضافه هست رو با کلیک کردن بر روی اون و زدن X حذف کنید. زمانی که بر روی مورد Custom Polygon کلیک میکنیم، روند کار بصورت زیر می باشد:clippy 3

همونطور که دیدید به سادگی نقاط مورد نظرمون رو مشخص کردیم و این ابزار هم به سادگی همه کارها رو برای ما انجام میده و کدهای خروجی رو تولید میکنه و در اختیار ما قرار میده.clippy 4

  1. اگر این مورد فعال باشه، prefix مربوط به webkit درون کد خروجی قرار داده میشه
  2. با استفاده از این قسمت میتونین عرض و ارتفاع پیش نمایش رو تغییر بدین
  3. با استفاده از این قسمت میتونین تصویر پیش زمینه رو متناسب با سلیقه خودتون تغییر بدین. حتی میتونین آدرس تصویر پس زمینه دیگه ای رو وارد کنید و بر روی اون کار کنید.
  4. با فعال کردن این مورد قسمتهای خارج از شکل هم بصورت کم رنگ نمایش داده میشه.

تصویر زیر رو در نظر بگیرید:clippy 5

  1. درون این قسمت پشتیبانی مرورگرها از این ویژگی رو قرار داده
  2. با کلیک بر روی این قسمت کدهای خروجی درون سایت Codepen باز میشن و شما میتونین بر روی اونا کار کنید و خروجی رو مشاهده کنید

این ابزار ویژگی های دیگه هم داره که خودتون میتونین بیشتر با اون کار کنید و یاد بگیرید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram